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 Ecommerce Product Hero
Full-screen hero section with video/image background, countdown timer, event title and metadata, and integrated CTA box with pricing and booking options.
Functional Documentation
Role
Scenario
Description
system
Display hero with media background
Shows video or image background with dark gradient overlay for text readability.
system
Display countdown timer
Shows four boxes (days, hours, minutes, seconds) with semi-transparent backgrounds and white text.
system
Display title and metadata
Shows large heading, location with pin icon, and dates with calendar icons.
system
Position CTA box
Desktop shows CTA box in right column. Mobile overlaps CTA box below hero content.
editor
Select product variant
Choose product determines background media and content.
editor
Set event information
Configure title, location, dates, and countdown target.
editor
Configure pricing
Set prices, discount percentage, urgency messaging, and button text.
user
View event information
Sees hero with countdown, title, location, and dates.
user
Take action
Clicks primary or secondary CTA button to book or view offer.
system
Display urgency messaging
Shows urgency section with bold title, description, pricing tier arrows, and link.
system
Apply responsive spacing
Uses responsive spacing variables for navigation offset, padding, and CTA positioning.
system
Apply gradient overlay effect
Background has top and bottom gradients for dramatic lighting and text contrast.
editor
Select background media
Choose between auto-play looping video or static image background.
editor
Configure countdown timer
Set target date/time. Timer shows days, hours, minutes, seconds with real-time updates.
editor
Configure event details
Set title, location, and date ranges (supports multi-week events).
editor
Configure pricing and CTA
Set prices, discount percentage, urgency messaging, tier labels, and button text.
editor
Choose product variant
Select variant to apply corresponding background and CTA configuration.
user
View event information at a glance
Sees hero with title, location, dates, and countdown. High contrast ensures readability.
user
Monitor countdown timer
Sees real-time countdown with visually distinct timer boxes.
user
Read urgency messaging
Sees early bird pricing message with tier arrows and link for more info.
user
View pricing comparison
Sees discounted price next to strikethrough original with discount badge.
user
Take action with CTAs
Clicks primary "Reserve now" button or secondary "View offer" button. Reassurance text reduces friction.
user
Experience responsive layout
On desktop, user sees cinematic wide layout with CTA box elegantly positioned alongside content. On mobile, CTA box floats above hero creating card-like focus on pricing and action buttons, while hero content remains visible below countdown timer.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.10 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.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 Help Center Contact
Contact options section displaying support availability, contact methods (email, WhatsApp, phone), and office visit information. Includes title, description text, and multiple call-to-action buttons.
Functional Documentation
Role
Scenario
Description
system
Display remote contact section
Shows title "Potrebujete dodatno pomoč?", office hours text, and three contact buttons (email, WhatsApp, phone).
system
Display office visit section
Shows title "Raje v živo? Obiščite nas.", availability text, and location button with address.
system
Display contact buttons with icons
Each button has icon (email, WhatsApp, phone, location) and label text. Buttons have outlined style with border.
editor
Configure contact information
Set office hours, support availability text, email address, WhatsApp number, phone number, and physical address.
editor
Configure button links
Set mailto link for email, WhatsApp URL, phone tel link, and Google Maps link for location.
user
Contact support remotely
Clicks email, WhatsApp, or phone button to initiate contact via preferred method.
user
Visit office
Clicks location button to view address on map and plan visit during office hours.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.15 Help Center Group
Accordion-based FAQ group component displaying categorized help topics. Each group has a title and expandable list of questions with answers. Used in help center archives to organize content by category.
Functional Documentation
Role
Scenario
Description
system
Display FAQ group accordion
Shows group title with chevron icon. Clicking expands/collapses questions list.
system
Display questions within group
Each question displays as clickable row with title and chevron icon. Clicking navigates to full answer page.
system
Apply brand-specific categories
FAQ categories vary by brand (Collegium shows "Pred rezervacijo", "Po rezervaciji", etc.).
editor
Create FAQ groups
Set group title. Add multiple questions with titles and URLs.
editor
Configure brand archive
Select brand archive determines visible categories and titles.
user
Browse help categories
Clicks group title to expand/collapse category. Clicks question to view full answer.
Properties
Responsive (Variant)
Value
Example
Desktop and mobile
Is opened (Boolean)
Value
Example
False
True
3.16 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.17 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.18 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.19 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.20 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.21 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
Layout ()
Value
Example
Image top
Image center
No image
3.22 Large Intro Text
Displays large introductory text with optional small title above. Uses large typography for emphasis.
Functional Documentation
Role
Scenario
Description
system
Display intro text
Shows optional small title (uppercase, gray) above large main text (bold, black).
system
Apply responsive typography
Text scales from 40px (desktop) to 26px (mobile). Small title scales from 20px to 18px.
editor
Toggle small title
Enable or disable small title above main text.
editor
Set text content
Small title (optional) and main text content (required).
user
Read intro text
Sees large, prominent introductory text.
Properties
Responsive (Variant)
Value
Example
Desktop
Mobile
3.23 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.24 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.25 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.26 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.27 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.28 Product Banner
The Product Banner component (also known as Classificator CHILD) displays a compact label showing product classification or category information. Features a rounded container with title text and optional status indicators, separated by a horizontal divider line.
Functional Documentation
Role
Scenario
Description
system
Display product banner
The component renders as a compact rounded container with light gray background (rgba(202,202,202,0.5)), subtle border radius (16px), and light shadow. Contains title text and optional status area separated by a horizontal line.
system
Display title section
The title appears in the upper section using Inter Tight SemiBold font at 9.31px with tight letter spacing (-0.0931px) and 1.2 line height. Text color is black.
system
Display divider line
A horizontal gray line (#8d8d8d) with 2.277px height and fully rounded ends (100px radius) separates the title from any status content below.
system
Apply container styling
The banner has a light gray translucent background, 16px border radius, subtle shadow (0px 0.414px 0.828px rgba(52,52,52,0.05)), and minimal padding (1.656px) around the content.
editor
Set banner title
Editor can configure the title text that appears in the banner (e.g., "Placeholder", category name, product type).
editor
Add status indicators
Editor can optionally add status badges or indicators in the status area below the title and divider line.
user
View product classification
User sees the product category or classification information displayed in a compact, visually distinct banner format.
user
Identify product type
User can quickly identify the product type or category by reading the title text in the banner.
Properties
Responsive ()
Value
Example
Desktop
Mobile
3.29 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.30 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
Layout ()
Value
Example
Collegium
Mondial
3.31 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.32 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.33 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.34 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.35 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.36 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
Layout ()
Value
Example
Default
No cards
Additional description
3.37 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.38 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.39 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.40 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.41 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.42 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
3.43 Why Cards
Section with heading and list of benefit cards alongside video player. Desktop shows sticky video on left with scrolling cards on right. Mobile stacks vertically.
Functional Documentation
Role
Scenario
Description
system
Display section with title
Shows small uppercase title and large heading, centered.
system
Display sticky video (desktop)
Left column shows video player that remains visible while scrolling.
system
Display cards list
Shows vertically stacked cards with image, title, and description.
editor
Configure section titles
Set small title and main heading.
editor
Set video embed
Configure video source and title.
editor
Add cards
Add cards with image, title, and description text.
user
Watch video
Clicks play button to watch video.
user
Scroll through cards
Reads benefit cards while video remains visible (desktop).
Properties
Product (Variant)
Value
Example
Balkan Wave
Responsive (Variant)
Value
Example
Desktop
Mobile
Section Container
Background: White (–surface/base/base)
Max Width: 1392px centered
Padding: Large responsive vertical spacing
Title Block
Small Title: Gray uppercase label
Main Heading: Large black heading
Alignment: Center
Z-index: 2 (above content)
Main Container (Desktop)
Left Column: Sticky video player (flex-1)
Right Column: Scrolling cards list (flex-1)
Layout: Two-column flex with gap
Main Container (Mobile)
Stacked Layout: Video first, then cards
Single Column: Full width
Video Player Card
Aspect Ratio: 1:1 (square)
Background: Image with dark overlay
Content: Title + centered play button
Styling: Rounded corners, padding
Why Cards
Layout: Horizontal (image + text)
Background: Light gray elevated surface
Content: Image wrapper + text wrapper (title + description)
Styling: Rounded corners, consistent spacing
Design Details
Section Container
Background: var(–surface/base/base, white)
Padding Vertical:
Desktop: 112px (–scale/hard/112)
Mobile: 56px (–scale/hard/112)
Padding Horizontal:
Desktop: 40px (–scale/hard/40)
Mobile: 20px (–scale/hard/40)
Gap: 0px desktop, 64px mobile (–scale/from-zero/64)
Title Block
Max Width: 1392px
Padding Horizontal:
Desktop: 80px (–scale/to-zero/80)
Mobile: 0px
Gap: 20px (–scale/soft/20)
Text Align: Center
Z-index: 2
Small Title
Font: Oswald Regular (–font/family/supporting)
Size: 20px desktop, 18px mobile (–font-size/supporting/20)
Color: #33373b (–text/on-surface/secondary)
Line Height: 1.2
Text Transform: Uppercase
Font Feature Settings: ‘calt’ 0
Main Heading
Font: Gabarito Extra Bold (–font/family/heading)
Weight: 800 (–font/weight/heading)
Size: 48px desktop, 30px mobile (–font-size/heading/L)
Color: Black (–text/on-surface/primary)
Line Height: 1.1
Letter Spacing: -0.48px desktop, -0.3px mobile
Main Container
Max Width: 1392px
Gap: 24px (–scale/variable/24/24-to-40)
Padding Horizontal:
Desktop: 64px (–scale/to-zero/64)
Mobile: 0px
Z-index: 1
Left Column (Video)
Flex: 1 0 0 (flex-1)
Position: Desktop sticky (top: 0)
Padding Top:
Desktop: 112px (–scale/to-zero/112)
Mobile: 0px
Padding Right:
Desktop: 80px (–scale/to-zero/80)
Mobile: 0px
Video Player Card
Aspect Ratio: 1:1 (420/420)
Padding: 16px desktop, 12px mobile (–scale/soft/16)
Border Radius: 30px (–radius/xl)
Background: Image with overlay
Overlay: rgba(0,0,0,0.2) (–overlay/weak)
Video Title
Font: Gabarito Semibold (–font/family/button)
Size: 18px desktop, 15px mobile (–font-size/button/solid/font-size-L)
Color: White (–text/on-media/primary)
Line Height: 28px desktop, 24px mobile (–font-size/button/solid/font-line-height-L)
Padding: 24px desktop, 20px mobile (–scale/soft/24)
Border Radius: 30px (–radius/xl)
Gap: 24px desktop, 20px mobile (–scale/soft/24)
Layout: Horizontal flex
Card Image Wrapper
Width: 128px
Height: 64px (mobile also 64px but shown as 64px)
Border Radius: 16px (–radius/l)
Object Fit: Cover
Card Text Wrapper
Flex: 1 0 0 (flex-1, takes remaining space)
Gap: 10px desktop, 8px mobile (–scale/soft/10)
Vertical Align: Center
Card Title
Font: Gabarito Bold (–font/family/title)
Weight: 700
Size: 22px desktop, 18px mobile (–font-size/title/M)
Color: Black (–text/on-surface/primary)
Line Height: 1.2
Card Description
Font: Gabarito Regular (–font/family/body)
Weight: 400
Size: 16px desktop, 15px mobile (–font-size/body/16)
Color: #33373b (–text/on-surface/secondary)
Line Height: 1.6
Usage Context
This component is specifically designed for:
Product feature/benefit listings
Event highlights and reasons to attend
Service capability showcases
Multi-benefit marketing sections
Landing page conversion sections
“Why choose us?” explanatory content
Best Practices
Card Count: 4-8 cards ideal for desktop scrolling experience
Card Order: Prioritize most compelling benefits first
Video Content: Use engaging, high-quality video that reinforces benefits
Images: Use 2:1 aspect ratio images that clearly illustrate each benefit
Titles: Keep card titles concise (3-8 words)
Descriptions: One sentence maximum, approximately 50-100 characters
Consistency: Maintain parallel structure across card titles and descriptions
Content Guidelines
Section Title: Use question format (e.g., “Zakaj na Balkan Wave?”) or direct statement
Section Heading: Use compelling, action-oriented headline
Card Titles: Start with benefit (e.g., “Največja imena z Balkana”)
Card Descriptions: Provide specific details or evidence
Video Title: Describe video content briefly
Language: Slovenian for CMT Sites (Collegium/Mondial brands)
Accessibility Considerations
Video player has visible play button with adequate size and contrast
Card titles and descriptions maintain WCAG AA contrast ratios
Images have appropriate alt text (though not shown in current implementation)
Sticky positioning doesn’t interfere with keyboard navigation
Card list is keyboard accessible and screen reader friendly
Play button is clearly actionable with visible focus states
Responsive layout maintains readability at all screen sizes
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
Primary landing page layout featuring hero section with brand showcase and modular content areas. Supports three hero variants (product slider, image cards, or tertiary hero) with flexible content modules below for experiences, features, and social proof.
Dedicated layout for contact pages featuring header, tertiary hero, contact form and footer. Designed for help and support pages where users can submit inquiries. Simple structure focuses on form submission without additional content modules.
Help center layout with hero section, categorized help topics, and contact options. Displays accordion-style help categories with contact methods including email, WhatsApp, and phone support.
