Card Components
Card Components are designed to organize one or more cards within a container, maintaining consistent scaling in both width and height. This approach supports a cohesive, responsive layout that enhances visual alignment and usability across different screen sizes.
Each Card Component can be optionally assigned one or more categories. These categories are filterable on the frontend, allowing users to easily sort and discover relevant content based on their selection criteria.
Example of Card Components
Heading goes Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Heading Goes Here
Your text here. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
How to Use
- After adding the block to the editor, click Add a Card Component to insert your first card. Add more as needed. Cards automatically scale to match each other and wrap to the next row based on the container or viewport size.
Card Components with Categories
Example of Card Components with Filterable Categories
Use the buttons to filter cards by category. All categories are shown by default. A clear filters button appears when a category is chosen.
Category A
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Category B
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Category C
Consectetur adipiscing elit. Duis condimentum, elit ac egestas tempor, lacus dolor condimentum lorem, eget hendrerit ipsum urna auctor nulla. Curabitur dictum lacinia congue.
Category B, Category C
Elit ac egestas tempor, lacus dolor condimentum lorem, eget hendrerit ipsum urna auctor nulla. Curabitur dictum lacinia congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis condimentum.
How to Use
- At the parent level of Card Components, you can optionally enable categories for sorting cards by toggling the Toggle Categories option. Once categories are created, they can be assigned to individual Card Components.
- A Multiselect toggle allows users to select one or more categories at a time. By default, only one category can be selected, which will filter the cards on the frontend.
- Card Components can have their category buttons positioned to the left, center, or right.
- The All Categories button is available only when multiselect is disabled, and its text can be customized.