Why Cards
Figma Component: 23690-203765
Last modified with commit 5074bd1 on
by Sara Deric.
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. Video can be YouTube embed or self-hosted (Cloudinary).
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 with thumbnail and centered play button overlay 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 | Choose video | Add video to section. |
| 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
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop |  |
| Mobile |  |