Anchor Cards
Figma Component: 22271-175513
Last modified with commit 7574dc5 on
by Sara Deric.
The Anchor Cards displays a grid of clickable feature cards with icons, titles, descriptions, and call-to-action buttons. Includes optional 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 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, title text, description text, and button with label and URL. URLs are typically anchor links to sections below on the same page. |
| user | Click card button | Navigates to destination URL (typically anchor link to section below on the same page). Button shows hover state on hover. |
Properties
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop |  |
| Mobile |  |