Marketing Web Modules

Guidelines

Core Elements

1. 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:
     1. 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
     2. 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
2. 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:
     1. Grid View (default):
        • Cards will show in standard layout, with optional brand shapes if no image is present.
     2. 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.

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