CTA Icon Item¶
Placeable in Canvas
An icon, a heading, a line of copy and a link — placed in a row to build a set of entry points.
Usage
Loading…Props¶
| Prop | Required | Type | Description | Example |
|---|---|---|---|---|
icon_name |
Optional | string | Choose an icon. Used instead of the icon image if both are set. | |
icon_image |
Optional | object or string | An image to use as the icon. | |
title |
Optional | string | Title | Our Mission |
body |
Optional | string | The main text. | <p>Dedicated to delivering excellence in everything we do.</p> |
link_url |
Optional | string | Link URL | /services |
color_scheme |
Optional | enum | Dark puts this on a dark background with light text. Defaults to light. |
light, dark |
layout |
Optional | enum | Stacked puts the icon above the text. Compact puts the icon beside it. Defaults to stacked. |
stacked, compact |
Built on the shared Icon Media partial.
icon_image 1:1
With link_url set the whole card is the link and its cue always reads "Learn more", so title has to make sense on its own. → Full accessibility guidelines
Tokens used by this component
| Token | Default |
|---|---|
--cta-icon-item-border-width |
0 |
--cta-icon-item-cue-travel |
var(--theme-spacer-2, 0.5rem) |
--cta-icon-item-hover-border-color |
var(--theme-color-primary, var(--bs-primary, #0d6efd)) |
--cta-icon-item-hover-shadow |
none |
--cta-icon-item-icon-* |
(several — see full reference) |
--cta-icon-item-padding |
var(--theme-spacer-5, 3rem) 0 0 |
--cta-icon-item-radius |
0 |
--cta-icon-item-rule-color |
var(--theme-color-border-strong, var(--bs-border-color, #212529)) |
--cta-icon-item-rule-width |
1px |
--cta-icon-item-surface |
transparent |
--cta-icon-item-transition-duration |
var(--theme-duration, 150ms) |
--cta-icon-item-transition-ease |
var(--theme-ease, ease-out) |