Why: Tailor how your content cards appear to your members, enhancing their experience and engagement with visually appealing layouts that highlight the most important information.
Navigate: App Station > Page Builder > Card Templates
Quick Start
Click on Card Templates in the Page Builder section.
Select the card layout you want to customize.
Adjust the layout variant (vertical, horizontal, compact, or featured).
Configure the display options for images, titles, summaries, and tags.
Save your changes to apply the new card template.
Understanding Card Templates
The Card Layout System allows you to customize how content cards are displayed across various content types, including recipes, meal plans, resources, challenges, and blog posts. Each card layout is specific to one content type, ensuring that only relevant information is shown.
Layout Variants
You can choose from several layout variants for your cards:
Vertical: Image on top, content below (ideal for grids).
Horizontal: Image on the left, content on the right (great for larger cards).
Compact: Minimal row layout (perfect for dense lists).
Featured: Hero-style large card (for highlighting specific content).
Configuration Options
Each card layout can be customized with various configuration options that control what information is displayed:
Show Image: Toggle to display the cover media.
Show Title: Toggle to display the title of the content.
Show Summary: Toggle to display a brief summary.
Show Tags: Toggle to display tags associated with the content.
Show Favorite Icon: Toggle to show a favorite icon for easy access.
Show Meta Chips: Toggle to display additional information like view counts or serving sizes.
Time Display Options (For Recipes)
For recipe cards, you can also control the visibility of time-related information:
Show Prep Time: Displays preparation time.
Show Cook Time: Displays cooking time.
Show Total Time: Displays total time required.
Tag Filtering
You can filter which tags are displayed on your cards based on their types. This allows you to control the visibility of dietary, cuisine, meal type, and other tags.
Tag Types to Show: Specify which tag types to include (e.g., dietary, cuisine).
Maximum Tags: Limit the number of tags displayed, with additional tags shown as "+N".
Card Style Presets
Card layouts support visual style presets that can change the overall appearance of the cards without needing to adjust individual CSS properties. Available styles include:
Classic
Sharp
Soft
Elevated
Flat
Polaroid
List Style System (Compact Layout)
When using the compact layout variant, you can customize how list items appear with options for style presets, density, image size, and more.
Saving Your Customizations
Once you have configured your card templates to your liking, make sure to save your changes. Your new card templates will be applied to the relevant content types, enhancing how your members interact with your app.
Related Features
Page Builder - Learn how to use the Page Builder for more customization options.
Content Library - Manage your recipes, meal plans, and other content types.
Member-Created Content - Understand how member-created content is displayed in your app.