Platform 2 Guide — This article applies to the new platform. Looking for classic platform docs? Browse the Platform 1 collection.
Why: The Content Grid block allows you to showcase collections of content in a visually appealing way, enhancing the browsing experience for your members. By configuring filters, sorting options, and search behavior, you can create tailored content displays that meet your audience's needs.
Navigate: App Station > Page Builder > Add Block > Content Grid
Quick Start
Click Add Block in the Page Builder.
Select Content Grid from the block options.
Choose the content type you want to display (e.g., Recipes, Meal Plans).
Configure your layout (Grid or List) and card size.
Set any filters or search options as needed.
Detailed Sections
Overview of the Content Grid Block
The Content Grid block is a versatile component that allows you to display various types of content, including recipes, meal plans, resources, blog posts, and more. You can choose between grid or list layouts, apply filters, and enable search functionality to create an engaging experience for your members.
Configuration Options
Basic Properties
Content Type: Select the type of content to display (e.g., Recipe, Meal Plan).
Layout: Choose between a grid layout (columns) or a list layout (compact rows).
Title: Optionally add a header title above the grid.
Limit: Set the maximum number of items to display (leave empty to show all).
Card Size: Control the size of the cards in the grid layout (compact, small, medium, large, feature).
Card Size Options
The cardSize property determines how many columns are displayed based on the screen size:
Compact: Maximum density, ideal for large catalogs.
Small: Dense layout with readable cards.
Medium: Balanced layout for most uses.
Large: Featured content with larger images.
Feature: Showcase sections with a single column on mobile.
Filtering Properties
You can filter the displayed content using the following properties:
Category ID: Filter by specific collection IDs (supports multiple selections).
Tags: Filter by tag IDs to narrow down the content.
Sort By: Choose the sorting order (newest, popular, etc.).
Featured First: Optionally show featured items at the top.
Search Functionality
You can enable search functionality within the Content Grid block:
Enable Search: Turn on search capabilities for the block.
Show Advanced Filters: Display additional filtering options.
Search Behavior: Control how the block responds to search queries:
Respond: Filters content based on search terms.
Hide: The block disappears during searches.
Ignore: Always shows original content.
Search-Only: Hidden until a search is performed, ideal for dedicated search results grids.
Layout Modes
Grid Layout: Items are displayed in a responsive grid format. The
cardSizeproperty controls the density and number of columns.List Layout: Items are displayed in a single column, optimized for scanning and reading.
Example Configurations
Here are some common configurations for the Content Grid block:
Recipe Grid Example
{
"blockType": "content-grid",
"config": {
"contentType": "RECIPE",
"layout": "grid",
"cardSize": "medium",
"limit": 12,
"sortBy": "newest",
"enableSearch": true,
"showAdvancedFilters": true
}
}
Dedicated Search Results Example
To create a dedicated search results grid that only appears when a member searches, configure the block as follows:
{
"blockType": "content-grid",
"config": {
"contentType": "RECIPE",
"searchBehavior": "search-only"
}
}
Animation Options
You can enhance the visual appeal of your Content Grid block with entrance animations. Enable animations in the configuration panel and choose from various styles (e.g., fadeInUp) to create engaging effects as items scroll into view.
Related Features
Search Block Integration
By utilizing the Content Grid block effectively, you can create a dynamic and engaging content experience for your members, tailored to their preferences and needs.