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 various types of content in an organized and visually appealing way. By configuring this block, you can enhance the browsing experience for your members, 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 the layout (Grid or List) and set any filtering options.
Save your changes to see the Content Grid on your page.

Detailed Sections

Overview of the Content Grid Block

The Content Grid block is a versatile tool for displaying different types of content in either grid or list layouts. It combines the functionality of previous blocks into a single, flexible component that supports:

Multiple content types: Recipes, Meal Plans, Resources, Blog Posts, and more.
Layout modes: Choose between a grid (columns) or list (compact rows) format.
Search and filtering options: Tailor the display based on member preferences.
Customizable card templates: Control how each content card looks.
Engaging animations: Add visual interest as items scroll into view.

Configuration Options

Basic Properties

You can customize the Content Grid block with the following properties:

contentType: Select the type of content to display (e.g., RECIPE, MEAL_PLAN).
layout: Choose between 'grid' or 'list'.
title: Optionally add a header title above the grid.
limit: Set the maximum number of items to display.
cardSize: Control the size of the cards displayed in the grid.

Filtering Properties

You can filter the content displayed in the grid using:

categoryId: Filter by one or more collection IDs.
tags: Apply tags to filter content.
sortBy: Choose the sorting order (e.g., newest, popular).
featuredFirst: Option to show featured items first.

Base Tags vs. Search Tags: The tags property acts as a base filter, always applied when content is rendered. This means that when a member searches, the results will only show items that match both the base tags and the search terms.

Search Behavior

The Content Grid block can respond to page-level search queries. Configure the searchBehavior property to control how the grid interacts with searches:

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

Layout Modes

You can choose between two layout modes for displaying content:

Grid Layout: Items are displayed in a responsive grid. The cardSize property controls how many columns are shown at various screen sizes.
List Layout: Items are displayed in a single column, optimized for reading.

Animation Options

The Content Grid block supports entrance animations that enhance user engagement. You can enable animations and choose from various styles, such as fadeInUp or slideInLeft. Adjust the duration and stagger delay to create a smooth visual effect.

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'
  }
}

Dedicated Search Results Grid Example

{
  blockType: 'content-grid',
  config: {
    contentType: 'RECIPE',
    searchBehavior: 'search-only'
  }
}

Related Features

By leveraging the Content Grid block, you can create dynamic and engaging pages that enhance the experience for your members. Adjust the settings to fit your content strategy and watch your community thrive!