Sticky Cards
Figma Component: 27075:276203
GitHub Issue: #263
Section with heading, body text, and optional CTA button on the left, paired with a fixed set of five cards on the right. Desktop shows a sticky parallax background behind the text column while cards scroll; mobile stacks the text block above the cards.
Functional Documentation
| Role | Scenario | Description |
|---|---|---|
| system | Display sticky background (desktop) | Left column sits over a background image that remains fixed behind the section while the right column of cards scrolls past it. |
| system | Display cards | Shows cards stacked in the right column, each with a check icon, title, and description. |
| system | Stack on mobile | Text column and card column stack vertically instead of sitting side by side. Background image changes to a mobile-cropped version and is not sticky. |
| editor | Configure section text | Set small title, section title, and description. Small title and description are optional. CTA button is also optional. |
| editor | Configure cards | Each card has a title and description text. |
| editor | Choose style | Select Media (background image, light text) or Solid (no image, dark text). |
| user | Click CTA button | Navigates to destination URL. Shows hover state on hover. |
Properties
Style (Variant)
| Value | Example |
|---|---|
| Media |  |
| Solid |  |
Responsive (Variant)
| Value | Example |
|---|---|
| Desktop |  |
| Mobile |  |