Anchor Cards
Figma Component: 22271-175513
Last modified with commit 0a12b72 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 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 |  |