Why Cards
Figma Component: 23690-203765
Last modified with commit 74094e5 on
by Martin Jagodic.
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)
- Font Feature Settings: ‘calt’ 0
Play Button
- Background: rgba(0,0,0,0.5) semi-transparent (–overlay/medium)
- Border: 1px solid white (–border/on-media/strong)
- Padding: 24px desktop, 20px mobile (–scale/soft/24)
- Border Radius: 600px (pill shape)
- Icon Size: 40px desktop, 32px mobile
- Position: Centered (flex items-center justify-center)
Right Column (Cards)
- Flex: 1 0 0 (flex-1)
- Gap: 32px desktop, 24px mobile (–scale/soft/32)
- Padding Left:
- Desktop: 16px (–scale/to-zero/16)
- Mobile: 0px
- Padding Top:
- Desktop: 112px (–scale/to-zero/112)
- Mobile: 0px
Why Card
- Background: #f0f3f5 (–surface/elevated/elevated-a)
- 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