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 display your content in an organized and visually appealing way. By configuring this block, you can enhance the browsing experience for your subscribers, making it easier for them to find and engage with your content.

Navigate: App Station > Pages & Menu > Add Block > Content Grid

Quick Start

Go to the Pages & Menu section in App Station.
Click Add Block and select Content Grid.
Choose the content type you want to display (e.g., Recipes, Meal Plans).
Configure your layout (Grid or List) and set the card size.
Adjust filtering and search behavior settings 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 customize how your content appears to your members.

Configuration Options

Basic Properties

When setting up the Content Grid block, you can configure several key properties:

Content Type: Choose from options like RECIPE, MEAL_PLAN, RESOURCE, CHALLENGE, BLOG_POST, or SHOPIFY_PRODUCT.
Layout: Select either grid for a column layout or list for a compact row layout.
Title: Add an optional header title that appears above the content grid.
Limit: Specify the maximum number of items to display (leave empty to show all).
Card Size: Choose the size of the cards displayed in the grid.

Card Size Options

The cardSize property determines how many columns will display at different screen sizes:

compact: Maximum density, ideal for large catalogs.
small: Dense browsing with readable cards.
medium: Default size, balanced for most uses.
large: Larger cards for featured content.
feature: Showcase sections with a single column.

Filtering Properties

You can filter content displayed in the grid using the following properties:

Category ID: Filter by one or more collection IDs.
Tags: Apply tag filters that are always active, even during searches.
Sort By: Choose how to sort the displayed content (e.g., newest, popular).
Featured First: Optionally show featured items at the top.

Search Behavior

The Content Grid block can respond to page-level searches, allowing you to control how it behaves based on user input. You can set the searchBehavior property to one of the following options:

respond: Filters content based on the search query.
hide: The grid disappears when a search is active.
ignore: Always shows original content, regardless of search.
search-only: The grid is hidden until a search is performed, making it ideal for dedicated search results.

Layout Modes

The Content Grid block supports two layout modes:

Grid Layout: Items are displayed in a responsive grid format. The cardSize property controls the density and number of columns.
List Layout: Items are displayed in a single column, optimized for reading.

Example Configurations

Here are a few examples of how to configure the Content Grid block:

Recipe Grid Example

{
  "blockType": "content-grid",
  "config": {
    "contentType": "RECIPE",
    "layout": "grid",
    "cardSize": "medium",
    "limit": 12,
    "sortBy": "newest",
    "searchBehavior": "respond"
  }
}

Meal Plan List Example

{
  "blockType": "content-grid",
  "config": {
    "contentType": "MEAL_PLAN",
    "layout": "list",
    "limit": 10,
    "sortBy": "startDate",
    "searchBehavior": "respond"
  }
}

Animations

You can enhance the visual appeal of your Content Grid by enabling entrance animations. Options include different styles like fadeIn, fadeInUp, and more. You can control the duration and stagger delay of these animations for a smooth user experience.

Related Features

By configuring the Content Grid block effectively, you can create a dynamic and engaging experience for your members, helping them discover and enjoy your content more easily.