Welcome to the CMT Sites technical documentation. This site serves as the single source of truth for all design specifications, component behaviors, and layout documentation across all CMT sites build with this repo.
Reusable UI elements like buttons, cards, forms, and navigation elements. Each component page includes:
Visual snapshots of all states (default, hover, active, disabled, error, etc.)
Behavior specifications from user and admin perspectives
Acceptance criteria for QA
Optional:
Accessibility requirements
Responsiveness rules
Layouts
Page templates used across the sites. Each layout page documents:
Overall structure and component composition
Content requirements from CMS
SEO and meta tag requirements
Responsive behavior at each breakpoint
Flows
User journeys and admin workflows. Each flow page includes:
Flow diagrams showing step-by-step processes
Decision points and edge cases
Error handling and validation rules
Success and failure states
Version Control
All documentation is version-controlled in git alongside the codebase. Visual snapshots from Figma are exported and committed to ensure immutability. Each page displays its last modification date.
2. General
2.1 Theming
The frontend is designed to be repurposed by multiple brands. They share the same layouts and components, but each brand has a unique visual theme. The theme defines colors, typography, spacing, and shadows that align with the brand’s identity.
All theme and brand-specific values are implemented as CSS variables.
Colors
On surfaces (backgrounds):
--text-on-surface-primary - Primary text color
--text-on-surface-secondary - Secondary text color
--text-on-surface-tertiary - Tertiary text color
--text-on-surface-disabled - Disabled text color
--text-on-surface-inverted - Inverted text color
On media (images/videos):
--text-on-media-primary - Primary text on media
--text-on-media-secondary - Secondary text on media
--text-on-media-tertiary - Tertiary text on media
--text-on-media-disabled - Disabled text on media
--text-on-media-inverted - Inverted text on media
Base surfaces:
--surface-base - Base background color
--surface-base-inverted - Inverted base color
Elevated surfaces:
--surface-elevated-a - Elevated surface level A
--surface-elevated-max - Maximum elevation surface
On media surfaces:
--surface-on-media-elevated-a - Elevated surface on media
--surface-on-media-elevated-max - Maximum elevation on media
System surfaces:
--surface-system-disabled - Disabled state surface
--border-strong - Strong border color
--border-soft - Soft border color
--border-inverted - Inverted border color
--border-accented - Brand accent border (varies by brand)
Brand-specific (overridden per brand):
--color-accented-primary - Primary brand accent color
--color-accented-secondary - Secondary brand accent color
--color-on-accented-primary-surface - Text color on primary accent
--color-on-accented-secondary-surface - Text color on secondary accent
--shadow-xl-negative - Extra large negative shadow
2.2 Spacing and Sizing
The spacing and sizing system defines consistent space and dimensions across all components and layouts. It uses CSS variables that automatically scale from desktop to mobile, ensuring consistency and responsive behavior across all brands.
Soft Scale
Used for ~90% of spacing needs. Values decrease gradually (linearly) from desktop to mobile.
Primary use: Gaps, margins, paddings, and sizing for icons, badges, and small images.
Desktop
Mobile
128
104
112
88
96
72
80
64
72
56
64
48
48
40
40
32
32
24
24
20
20
16
16
12
12
10
10
8
8
6
6
4
4
2
2
0
Hard Scale
Values decrease by half for more dramatic scaling. Used for main section DIVs and specific cases requiring sharper reduction.
Primary use: Section-level spacing and containers.
Desktop
Mobile
128
64
112
56
96
48
80
40
72
36
64
32
48
24
40
20
32
16
24
12
20
10
16
8
12
6
10
5
8
4
6
3
4
2
2
1
Variable Scale
Custom scaling for contexts where flex direction changes and spacing needs may vary (increase, decrease, or stay the same).
Primary use: Gaps that transition from horizontal to vertical layouts.
24px variable values:
Desktop
Variable Options
24
16, 24, 32, 40, 48
16px variable values:
Desktop
Variable Options
16
8, 16, 24
To Zero Scale
Desktop values reduce to zero on mobile to maximize space.
Primary use: Decorative paddings and offsets that can be removed on mobile.
Desktop
Mobile
128
0
112
0
96
0
80
0
64
0
48
0
40
0
32
0
24
0
20
0
16
0
12
0
8
0
4
0
From Zero Scale
Zero on desktop, scales up on mobile (inverse of To Zero Scale).
Primary use: Spacing that’s only needed on mobile devices.
Desktop
Mobile
0
128
0
112
0
96
0
80
0
64
0
48
0
40
0
32
0
24
0
20
0
16
0
12
0
8
0
4
Site-Specific Variables
Certain values are brand-specific (Collegium, Mondial) for grid and navigation spacing:
Property
Desktop
Mobile
12-col
1392
1392
Navi offset
76
113
Navi offset with announcement strip
118
150
Site-specific variables:
--navi-offset: Navigation offset (varies by breakpoint)
--navi-banner-offset: Navigation offset with announcement banner (varies by breakpoint)
2.3 Internationalization (i18n)
CMT sites styles allows for each site to be multilanguge. The frontent i18n is handled by Hugo, Decap handles CMS translations. Both content and template strings can be translated and edited. user selects the preferred language via a language switcher component. The default language is set in the site config file (hugo.toml).
3. Components
Each component page includes:
Name
Description and purpose: What the component is for and when to use it
Properties: Different versions of the component (e.g., state: default, hover, active, disabled; responsive: desktop, mobile)
Visual Snapshots: Figma exports showing examples of each property
Behavior (User-facing): How it responds to interaction, validation rules, error states
Behavior (Admin/CMS): How content editors configure it in Decap CMS
Accessibility: Keyboard navigation, ARIA labels, focus management, color contrast
Responsive Rules: How it adapts across breakpoints (xs, sm, md, lg, xl, xxl, xxxl)
Dependencies: Related components, JavaScript modules, or feature flags
Acceptance Criteria: Checklist for QA validation
3.1 Header
The Header component provides site navigation and branding. Shows logo, main menu with dropdown navigation, language selector, and mobile hamburger menu.
Functional Documentation
Role
Scenario
Description
system
Display header content
Shows site logo, horizontal navigation menu, language selector, and optional CTA button on desktop. Switches to mobile hamburger menu on smaller viewports.
system
Display mobile menu
On mobile, shows logo and hamburger icon. Clicking hamburger opens slide-out menu with navigation items.
system
Sticky header behavior
Header remains fixed to top of viewport while scrolling.
editor
Configure navigation items
Each menu item requires label and URL. Supports nested submenu items. Menu items can be reordered.
editor
Configure language selector
Language options are configured based on available site languages.
user
Navigate menu
Click menu item to navigate. Hover shows dropdown submenu when present. On mobile, click hamburger to open/close menu.
user
Switch language
Click language selector to view available languages. Select language to switch site language.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
Segment (Variant)
Value
Example
Collegium
Mondial
Cooltura
BW
3.2 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.
Functional Documentation
Role
Scenario
Description
system
Display primary section
Shows logo with gradient line separator, followed by columns of navigation links and an outlined support section. Content adapts based on brand site variant.
system
Display secondary section
Shows related site logos with gradient line separator and copyright text. Logo count and arrangement adjusts per brand.
system
Stack sections on mobile
On mobile, gradient-line separators, columns, and logos reflow to vertical stacking with reduced padding and adjusted spacing.
editor
Configure navigation columns
Each column contains a headline (uppercase), optional icon indicator, and list of links. Columns can be shown or hidden per variant.
editor
Configure support box
Outlined column displays headline, descriptive text, and call-to-action button with arrow icon. Text content is editable.
editor
Configure footer links
List items within columns are editable. Links can be added, removed, or reordered. Each link inherits label typography.
All footer links are clickable and navigate to their configured destinations. Column headers (e.g., "Doživetja") may be interactive or static depending on page context.
user
Click support button
Button in outlined column displays hover state and navigates to support or help page when clicked. Contains label and right-facing arrow icon.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.3 Button
The button component is the primary call-to-action element used throughout the site. It directs users to complete important actions such as form submissions, navigation to key pages, and confirmation of choices.
Properties
State (Variant)
Value
Example
Default
Hover
Active
Disabled
Has left icon (Boolean)
Value
Example
Yes
No
3.4 Anchor Cards
The Anchor Cards displays a grid of clickable feature cards with icons, titles, descriptions, and call-to-action buttons. Includes optional title with heading and body text. Cards display key benefits or selling points in a visually organized layout.
Functional Documentation
Role
Scenario
Description
system
Display section title
Shows heading and body text when title is present. Title area does not display when not present.
system
Display card grid layout
Cards display in 4-column horizontal grid on desktop, single-column stack on mobile.
system
Display card content
Each card shows circular icon with brand color background, bold title text, body text description, and outlined button with label and arrow icon.
editor
Add section title content
Heading (optional) and body text (optional, can include multiple paragraphs).
editor
Add and configure cards
Create up to 4 cards. Each card requires icon selection from predefined set, title text, description text, and button with label and URL. Cards can be reordered.
user
Click card button
Navigates to destination URL. Button shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
Icons background (Variant)
Value
Example
Yellow
Blue
3.5 Anchor Link Navigation
The Anchor Link Navigation component displays a navigation menu with links to different sections within the same page. Shows section links that smooth scroll to corresponding content when clicked.
Functional Documentation
Role
Scenario
Description
system
Display anchor links
Shows horizontal or vertical list of links to page sections. May become sticky on scroll.
system
Highlight active section
Currently visible section's link displays with active state styling.
editor
Configure anchor links
Links are automatically generated from page section headings or manually configured. Each link requires label and target section ID.
user
Navigate to section
Click link to smooth scroll to corresponding section. Link shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.6 Contact Form
The Contact Form component provides a form for visitors to submit inquiries or messages. Includes input fields for name, email, message, and optional additional fields with validation and submission handling.
Functional Documentation
Role
Scenario
Description
system
Display form fields
Shows input fields for name, email, subject, message, and optional additional fields. Displays labels and placeholder text.
system
Validate input
Validates required fields and email format before allowing submission. Shows error messages for invalid inputs.
system
Handle submission
Displays loading state during submission. Shows success message on successful submission or error message on failure.
editor
Configure form fields
Set which fields are required, add optional custom fields, configure recipient email address and success message.
user
Complete and submit form
Fill in form fields and click submit button. Receives feedback on submission success or errors.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.7 Current Experiences and Events
The Current Experiences and Events component displays a curated list or grid of ongoing and upcoming experiences and events. Shows key information like dates, titles, and brief descriptions with links to detailed pages.
Functional Documentation
Role
Scenario
Description
system
Display events grid
Shows events in grid layout on desktop, stacked on mobile. Displays event image, date, title, and description for each item.
system
Filter by date
Shows only current and upcoming events. Past events do not display.
editor
Configure event display
Set number of events to display and sorting order (date, featured, etc.).
user
Click event
Navigates to event detail page. Shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.8 Current Experiences and Events Section B
Alternative variation of the Current Experiences and Events component with different layout or styling approach. Displays ongoing and upcoming experiences and events.
Functional Documentation
Role
Scenario
Description
system
Display events layout
Shows events in alternative grid or list layout. Displays event information with different visual treatment than Section A.
system
Filter by date
Shows only current and upcoming events. Past events do not display.
editor
Configure event display
Set number of events to display and sorting order.
user
Click event
Navigates to event detail page. Shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.9 Experience Archive Categories
The Experience Archive Categories component displays category filters or navigation for browsing experiences. Shows category names with counts and links to filtered views.
Functional Documentation
Role
Scenario
Description
system
Display categories
Shows category list or grid with category names and optional item counts.
system
Highlight active category
Currently selected category displays with active state styling.
editor
Configure categories
Categories are automatically generated from content taxonomy. Display order and visibility can be configured.
user
Filter by category
Click category to filter experiences. Shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.10 Frame 6616
Component placeholder for Figma frame 6616. This component requires identification and proper naming based on its function in the design system.
Functional Documentation
Role
Scenario
Description
system
Display component
Component behavior and display to be documented after identification.
editor
Configure component
Configuration options to be documented after identification.
user
Interact with component
User interaction patterns to be documented after identification.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.11 General FAQ
The General FAQ component displays frequently asked questions in an expandable accordion format. Shows list of questions that expand to reveal answers when clicked.
Functional Documentation
Role
Scenario
Description
system
Display FAQ list
Shows questions in accordion format. Only one answer expanded at a time or all collapsed by default.
system
Display question and answer
Question displays with expand icon indicator. Answer text displays when expanded with smooth transition.
editor
Add FAQ items
Each FAQ item requires question and answer text. Items can be reordered. Supports rich text formatting in answers.
user
Expand answer
Click question to expand/collapse answer. Shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.12 Graduation Experience Terms Archive
The Graduation Experience Terms Archive component displays available graduation experience dates or terms. Shows schedule information with booking availability and pricing details.
Functional Documentation
Role
Scenario
Description
system
Display terms list
Shows available graduation experience terms in list or grid format with dates, availability status, and pricing.
system
Display term details
Each term shows date range, destination, availability status (available, limited, sold out), and price.
system
Show availability status
Terms display availability indicator. Sold out terms may be visually de-emphasized.
editor
Configure term display
Set sorting order and filtering options. Terms are automatically populated from booking system.
user
Select term
Click term to view details or proceed to booking. Shows hover state on available terms.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.13 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 full content.
Functional Documentation
Role
Scenario
Description
system
Display guides grid
Shows guides in grid layout on desktop, stacked on mobile. Each item displays image, title, excerpt, and read more link.
system
Display guide content
Each guide card shows thumbnail image, title, brief excerpt, and link to full guide.
editor
Configure guide display
Set number of guides to display, sorting order, and optional category filtering.
user
Click guide
Navigates to full guide page. Card shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.14 Icon Boxes
The Icon Boxes component displays a grid of icon-based feature cards. Each box contains an icon, heading, and description text.
Functional Documentation
Role
Scenario
Description
system
Display icon boxes grid
Shows boxes in grid layout. Number of columns adjusts based on viewport size.
system
Display box content
Each box shows icon at top, heading below, and description text.
editor
Add and configure boxes
Each box requires icon selection, heading text, and description. Boxes can be reordered.
user
Click box
When link URL is present, entire box is clickable and navigates to destination. Shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.15 Image and Text
The Image and Text component combines image content with structured text content. It displays optional kicker, headline, body paragraph, optional button and optional bulleted list with icons. Images can be static or animated sequences.
Functional Documentation
Role
Scenario
Description
system
Display image content
Shows single static image or cycles through 3 images when multiple provided.
system
Display text content
Shows kicker (when present), headline, body text, button (when present), and list (when present).
editor
Add text content
Kicker (optional), headline, body text, and button (optional) with label and URL.
editor
Upload images
Single static image or 3 images for animated sequence.
user
View content
Static images display without interaction. Animated images cycle automatically.
user
Click button
Navigates to destination URL. Shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
Layout (Variant)
Value
Example
Default
White BG + button
Image on right
3.16 Image Box Accordion Grid
The Image Box Accordion Grid displays a grid of partner or accreditation logos with expandable accordion items. Each item contains a logo image, title, truncated description, and expand button. The component includes an optional title, heading, and introductory text.
Functional Documentation
Role
Scenario
Description
system
Display section header
Shows optional kicker, heading, and body text above grid when present.
system
Display grid layout
Arranges accordion items in rows of 3 on desktop, single-column stack on mobile.
system
Display accordion item
Each item shows logo image, title, truncated single-line description with ellipsis, and expand button with down arrow icon.
editor
Add section header content
Kicker (optional), heading (optional), and introductory body text (optional).
editor
Add and configure accordion items
Each item requires logo image upload (square format), title text, and description text. Items can be reordered.
user
Click expand button
Expands accordion to show full description text. Button shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.17 Image Cards
The Image Cards component displays a grid of image-based cards. Each card contains an image, title, optional description, and optional button or link.
Functional Documentation
Role
Scenario
Description
system
Display cards grid
Shows cards in grid layout. Number of columns adjusts based on viewport size.
system
Display card content
Each card shows image, title, optional description, and optional button or link.
editor
Add and configure cards
Each card requires image, title, optional description, and optional button with label and URL. Cards can be reordered.
user
Click card
Navigates to destination URL. Shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
Background (Variant)
Value
Example
Yellow
Blue
3.18 Image Cards Hero
The Image Cards Hero component displays large image-based cards in a hero section. Features prominent images with overlaid text and call-to-action elements.
Functional Documentation
Role
Scenario
Description
system
Display hero cards
Shows large image cards with text overlay containing heading and optional button.
system
Display card layout
Arranges cards in horizontal layout on desktop, stacks on mobile.
editor
Add and configure hero cards
Each card requires background image, heading text, optional description, and optional button with label and URL. Cards can be reordered.
user
Click card or button
Navigates to destination URL. Shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.19 Image with Icon Box Grid
The Image with Icon Box Grid component combines a featured image with a grid of icon boxes. Shows large image on one side with icon-based feature boxes on the other side.
Functional Documentation
Role
Scenario
Description
system
Display split layout
Shows featured image in one column and icon boxes grid in adjacent column on desktop. Stacks vertically on mobile.
system
Display icon boxes
Each icon box shows icon, heading, and description in compact format within grid.
editor
Configure image
Featured image required.
editor
Add and configure icon boxes
Each box requires icon selection, heading, and description. Boxes can be reordered.
user
View content
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.20 Logos
The Logos component displays a grid or row of partner, sponsor, or certification logos. Shows brand logos with optional links to partner websites.
Functional Documentation
Role
Scenario
Description
system
Display logos grid
Shows logos in evenly-spaced grid or horizontal row. Adjusts layout based on viewport size.
system
Display logo images
Each logo displays at consistent size with proper aspect ratio maintained.
editor
Add and configure logos
Each logo requires image upload and optional link URL. Logos can be reordered.
user
Click logo
Navigates to partner website when link is present. Shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.21 Main Navigation
The Main Navigation component provides the primary site navigation menu. Features hierarchical menu structure with dropdown submenus and mobile hamburger menu.
Functional Documentation
Role
Scenario
Description
system
Display navigation menu
Shows horizontal menu bar on desktop with dropdown submenus. Shows hamburger icon on mobile that opens slide-out menu.
system
Highlight active page
Current page menu item displays with active state styling.
editor
Configure menu structure
Add, remove, and reorder menu items. Each item requires label and URL. Supports nested submenu items.
user
Navigate menu
Click menu item to navigate to page. Hover shows dropdown submenu on desktop. Click hamburger icon on mobile to open/close menu.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.22 Navigation Link Group
The Navigation Link Group component displays a grouped set of related navigation links. Often used in footer or sidebar for organizing links by category or topic.
Functional Documentation
Role
Scenario
Description
system
Display link group
Shows group heading and list of links beneath it.
system
Display links
Each link shows label text and navigates to destination on click.
editor
Configure link group
Set group heading and add links. Each link requires label and URL. Links can be reordered.
user
Click link
Navigates to destination page. Link shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.23 Product Additional Information
The Product Additional Information component displays supplementary details about a product or experience. Shows organized content sections with headings and descriptions for terms, policies, requirements, etc.
Functional Documentation
Role
Scenario
Description
system
Display information sections
Shows content organized into sections with headings and body text. Sections may be displayed as expandable accordions or standard content blocks.
system
Display section content
Each section shows heading and formatted body text with optional lists or links.
editor
Add information sections
Each section requires heading and body text content. Supports rich text formatting including lists and links. Sections can be reordered.
user
View information
Read content sections. If accordion format, click heading to expand/collapse section.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.24 Product Archive
The Product Archive component displays a filterable and sortable list or grid of products or experiences. Shows product cards with images, titles, key information, and links to detail pages.
Functional Documentation
Role
Scenario
Description
system
Display products grid
Shows products in grid layout. Number of columns adjusts based on viewport size.
system
Display filter controls
Shows category filter buttons or dropdown and optional search input above product grid.
system
Filter and sort products
Filters products based on selected categories or search query.
editor
Configure display options
Set number of products per page, default sorting order, and visible filter categories.
user
Filter products
Click category filter to show only products in that category. Multiple filters can be applied.
user
Click product card
Navigates to product detail page. Card shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.25 Product Booking Items Archive
The Product Booking Items Archive component displays a list or grid of available booking items for a product. Shows individual booking options with dates, availability, and selection controls.
Functional Documentation
Role
Scenario
Description
system
Display booking items
Shows available booking options in list or grid format with dates, availability status, and pricing.
system
Display item details
Each item shows date range, availability indicator (available, limited, sold out), price, and selection button or checkbox.
system
Show availability status
Items display availability indicator. Sold out items may be disabled or visually de-emphasized.
editor
Configure item display
Booking items are automatically populated from booking system. Display format and sorting options can be configured.
user
Select booking item
Click or check item to select for booking. Proceeds to booking form or cart. Shows hover state on available items.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.26 Product Booking Offer
The Product Booking Offer component displays pricing and booking options for a product or experience. Shows package options with pricing, inclusions, and booking buttons.
Functional Documentation
Role
Scenario
Description
system
Display booking options
Shows available booking packages or pricing tiers with features and pricing information.
system
Display package details
Each package shows name, price, inclusions list, and booking button.
editor
Configure booking packages
Each package requires name, price, inclusions list, and booking button URL. Packages can be reordered. Optional featured package highlighting.
user
Select package
Click booking button to proceed with selected package. Button shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.27 Product Hero
The Product Hero component displays a hero section for product or experience detail pages. Features large image or image gallery with product title, key information, and booking call-to-action.
Functional Documentation
Role
Scenario
Description
system
Display hero content
Shows product image or image gallery, product title, brief description, key details (dates, location, duration), and primary booking button.
system
Display image gallery
When multiple images present, shows image gallery with navigation controls. Single image displays without gallery controls.
editor
Add hero content
Product title, description, and primary image required. Additional images optional. Booking button label and URL required.
user
Navigate image gallery
Click navigation controls to view additional images when gallery present.
user
Click booking button
Navigates to booking page or form. Button shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.28 Product Hero Slider
The Product Hero Slider displays a rotating carousel of hero images or content at the top of product pages. Features navigation controls and automatic progression through slides.
Functional Documentation
Role
Scenario
Description
system
Display slider content
Shows hero slides with automatic rotation. Displays navigation dots and arrow controls.
system
Auto-advance slides
Automatically progresses to next slide after set interval.
editor
Add and configure slides
Each slide requires image, optional heading, body text, and button with label and URL. Slides can be reordered.
user
Navigate slides
Click navigation arrows or dots to view specific slide. Hover pauses auto-rotation.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
Type (Variant)
Value
Example
Collegium Experience
Mondial Destination
3.29 Product Overview
The Product Overview component displays key information and highlights about a product or experience. Shows structured content with icons, descriptions, and feature lists.
Functional Documentation
Role
Scenario
Description
system
Display overview content
Shows product description, key features with icons, highlights, and supporting information in structured layout.
system
Display feature items
Each feature displays icon, title, and description text.
editor
Add overview content
Main description text required. Add feature items with icon selection, title, and description. Features can be reordered.
user
View overview
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.30 Product Program
The Product Program component displays detailed itinerary or schedule for an experience or trip. Shows day-by-day breakdown with activities, timings, and descriptions.
Functional Documentation
Role
Scenario
Description
system
Display program schedule
Shows day-by-day itinerary with day number or date, title, and activity descriptions.
system
Display day content
Each day shows heading, list of activities with times (when present), and descriptions.
editor
Add program days
Each day requires day number or date, title, and activity list. Each activity has description and optional time. Days and activities can be reordered.
user
View program
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.31 Product Template FAQ
The Product Template FAQ component displays frequently asked questions specific to a product or experience type. Shows accordion-style Q&A list with expandable answers.
Functional Documentation
Role
Scenario
Description
system
Display FAQ list
Shows questions in accordion format. Only one answer expanded at a time or all collapsed by default.
system
Display question and answer
Each item shows question text with expand icon. Answer text displays when expanded.
editor
Add FAQ items
Each FAQ item requires question and answer text. Items can be reordered. Supports rich text formatting in answers.
user
Expand answer
Click question to expand/collapse answer. Shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.32 Product Text Offer
The Product Text Offer component displays text-based promotional offer or special information for a product. Features highlighted text with optional icon or badge.
Functional Documentation
Role
Scenario
Description
system
Display offer message
Shows promotional text with optional icon or badge in highlighted container.
system
Display offer styling
Offer displays with distinct background color or border to draw attention.
editor
Add offer content
Offer text required. Optional icon selection and link URL.
user
Click offer
Navigates to destination URL when link present. Shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.33 Social Media Cards
The Social Media Cards component displays embedded social media posts or links to social media profiles. Shows cards with social media platform branding, content previews, and links to full posts.
Functional Documentation
Role
Scenario
Description
system
Display social cards
Shows social media cards in grid layout with platform icons and branding.
system
Display card content
Each card shows platform icon, content preview or description, and link to full post.
editor
Add social media links
Each card requires platform selection (Instagram, Facebook, etc.) and post URL or profile link.
user
Click social card
Opens social media post or profile in new tab.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.34 Stats
The Stats component displays key statistics and metrics in a grid layout. Each stat contains a large number or value, label, and descriptive text. The component arranges stats in a horizontal row on desktop and stacks them vertically on mobile.
Functional Documentation
Role
Scenario
Description
system
Display stats layout
Shows stats in horizontal row on desktop with vertical borders between items, stacks vertically on mobile with horizontal borders between items.
system
Display stat content
Each stat shows large number/value, title label, and descriptive text in centered layout.
editor
Add and configure stats
Each stat requires numeric value or text, label/title, and description text. Stats can be reordered.
user
View stats
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.35 Sticky CTA
The Sticky CTA component displays a fixed call-to-action button or bar that remains visible while scrolling. Provides persistent access to primary action like booking or contact.
Functional Documentation
Role
Scenario
Description
system
Display sticky CTA
Shows CTA button or bar fixed to viewport. Remains visible while user scrolls page.
system
Show on scroll
CTA appears after user scrolls past hero section. Hides when user scrolls back to top.
editor
Configure CTA
Button label, URL, and trigger scroll position required. Optional background color and positioning (top/bottom).
user
Click CTA
Navigates to destination URL or triggers action. Button shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.36 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.
Shows centered card with black background, brand-colored bottom border, breadcrumb navigation, and heading text.
editor
Add background image
Upload image that displays as full-width background.
editor
Add breadcrumb navigation
Configure breadcrumb items. Home link is included by default, followed by current page name.
editor
Add heading text
Text field for main hero heading matching page title.
user
Click breadcrumb link
Navigates to linked page. Link shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.37 Tertiary Hero
The Tertiary Hero component displays a simplified hero section for tertiary or detail pages. Features minimal design with heading and optional breadcrumb navigation.
Functional Documentation
Role
Scenario
Description
system
Display hero content
Shows heading text and optional breadcrumb navigation in minimal layout.
system
Display breadcrumbs
Shows breadcrumb trail when present with separator between items.
editor
Add hero content
Heading text required. Breadcrumb navigation optional.
user
Click breadcrumb link
Navigates to parent page. Link shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.38 Text Columns
The Text Columns displays text content in a two-column layout on desktop and single-column layout on mobile. The left column contains a heading and body text, while the right column contains additional body text and an optional button.
Functional Documentation
Role
Scenario
Description
system
Display column layout
Shows two-column layout side by side on desktop, stacks vertically on mobile.
system
Display left column content
Shows heading and body text in left column.
system
Display right column content
Shows body text and optional button with label and arrow icon in right column. Button does not display when not present.
editor
Add left column content
Heading text and optional body paragraph for left column.
editor
Add right column content
Body paragraph text and optional button with label and URL for right column.
user
Click button
Navigates to destination URL. Button shows hover state on hover.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
4. Layouts
Each layout page includes:
Name
Purpose: What type of content this layout is for
Visual Snapshot: Full-page screenshot from Figma
Content Map: Which components appear and in what order
SEO/Meta: Expected front matter fields for meta tags
4.1 Home
The home layout serves as the primary entry point for site visitors. It provides an overview of the brand, highlights key services or content, and guides users toward conversion actions.
Content Map
List of components used (TODO)
SEO/Meta Requirements
TODO
CMS Configuration (Decap)
TODO
Brand Variations
TODO
4.2 Default List
4.3 Default Single
Default layout for content pages. Customizable with shortcodes and modules. Example usage includes About Us, landing pages, explanation pages, etc.
