Guides List
Mobile: View design
Desktop: View design
Last modified with commit 508b812 on
by Sara Deric.
Layout for guides listing page with hero section, icon boxes explaining guide selection, and filterable guide list. Displays guide cards with profile images, names, and action buttons.
Components
| Name | Description | Mode |
|---|---|---|
| Header | The Header component provides site navigation and branding. Shows brand logo, website switcher dropdown, main navigation menu with dropdown submenus, optional CTA button, and responsive mobile hamburger menu. Main navigation supports up to 2 levels of navigation (main items + one level of submenus/dropdowns). | global |
| Sub Page Hero | The Sub Page Hero Section displays a hero banner at the top of subpages with breadcrumb navigation and large heading text. Features full-width background image with gradient overlay and centered text card with brand-colored bottom border. | fixed |
| Image with Icon Box Grid | The Image with Icon Box Grid component displays a grid of icon boxes with optional featured image. Image can be positioned at the top, center, or omitted entirely, with icon boxes arranged in a grid layout. | fixed |
| Guide List | The Guide List component displays a structured list or grid of guides, articles, or resources. Shows preview cards with title, excerpt, and link to external social media content (Instagram or LinkedIn). | fixed |
| Footer | Multi-column footer section with site branding, navigation links, support information, and related site logos. Adapts across different brand sites (Collegium, Mondial, Collegium CRO, Cooltura) and responsive breakpoints. | global |