Use Cases
The CSOL Filterable Content module could be used on a page where we want users to easily navigate and filter through various resources such as articles, videos, and documents related to different subjects or topics.
Cards can be text only, or they can link out to an external page, or even open a modal for more information.
Card Data Source
For the majority of users the Card Data Source for this module will be Manual. This means you will manually enter each card and their filters. We highly recommend having your categories and tags planned out prior to entering the content in the module, as this is an advanced module to navigate data entry.
If you happen to have HubDB access, this module does allow for the card source to be input from a HubDB table. HubDB access is limited and permission is only granted on a need to have basis.
If you are creating a HubDB table for your module, then you can clone our HubDB table templatehere, to start you off with the correct columns that you will need.
Guidelines
Core Elements
- Filter Menu:
- Offers up to 4 filter categories (set to 2 filters by default)
- Filter Menu can display as either default left-aligned (to the left of the cards), or top-aligned (above the cards).
- Filter Types:
- Primary Filter (Filter 1):
- Filter is displayed as a dropdown menu
- Functions as a badge on the card
- Only ONE can be selected for each card
- HubDB column type (if required): 'Select' type
- Secondary Filters (Filters 2-4):
- Filters are displayed as checkboxes (or buttons if set to top-aligned)
- Supports multiple selections
- Multiple of each filter type can be added to a given card
- Up to 3 additional filters can be configured as required
- HubDB column type (if required): 'Multi-Select' type
- Primary Filter (Filter 1):
- Content Cards:
- Cards within the module consist of information such as:
- Image (optional) (recommended dimensions: 250px × 150px)
- Primary filter tag (displayed as a badge)
- Secondary filter labels (up to 3)
- Title
- Description
- CTA (optional)
- Card CTAs:
- Manual data entry: Links can have several destination type (external link, modal trigger, product CTA, etc)
- HubDB data: Either external links, or modal triggers
- Note about modals: To set up a modal trigger, add a "(CSOL) Pop-Up Modal" module to your page, and link your card to it via the ID (e.g. example-case-study)
- Card Layout Options:
- Grid View (default):
- Cards will show in standard layout, with optional brand shapes if no image is present.
- Gallery View:
- Cards will show in a masonry layout. Brand shapes do not show, if there is no image.
- If Gallery View is selected, then cards can optionally be displayed in Full-Image mode. To enable Full-Image mode for a card, simply remove its description text. The image will now show as the full width and height of the card. Note that the card's title becomes the CTA text when Full-Image mode is enabled.
- Grid View (default):
- Cards within the module consist of information such as:
Things to Know
- Filter 1 can only have ONE filter associated with it. This is what will appear in the badge in the top right corner of the card. For Filters 2-4 you can have numerous filter options and these are what will appear as the checkbox filters and above the title on the cards.
- For the desktop card variation, there’s space for an optional thumbnail image. If not provided, a random asset will be placed instead, from a selection of 3 options.
- Image: 150x250px
How to use this module
- Please watch this loom to view a demo of using this module in the editor.