Text¶
Placeable in Canvas
The generic text block — eyebrow, heading, subtitle and rich body. It is also the catalog's only generic text leaf, which is what fills slot-shell components like a Bootstrap card.
Loading…Props¶
| Prop | Required | Type | Description | Example |
|---|---|---|---|---|
icon_name |
Optional | string | Optional icon shown above the heading. | |
eyebrow |
Optional | string | Small label shown above the heading (e.g. 'Mission'). | Mission |
title |
Optional | string | The heading. | Welcome to Our Site |
subtitle |
Optional | string | Optional supporting text shown below the heading. | A short supporting statement that adds context. |
body |
Optional | string | The main text. | <p>Discover amazing content and features.</p> |
color_scheme |
Optional | enum | Dark puts this on a dark background with light text. Defaults to light. |
light, dark |
heading_level |
Optional | enum | Pick by page outline, not size. Use H1 only if this is the page's main heading. Defaults to h2. |
h1, h2, h3, h4, h5, h6 |
Built on the shared Icon Media partial.
Text is the one caller that passes show_placeholder: false: with no icon assigned, none renders at all, rather than the empty-state placeholder Statistic and CTA Icon Item show.
Set heading_level to keep the page's heading outline in order. → Full accessibility guidelines
Tokens used by this component
| Token | Default |
|---|---|
--ixm-text-body-leading |
var(--theme-leading-relaxed, 1.72) |
--ixm-text-eyebrow-case |
var(--theme-eyebrow-case, none) |
--ixm-text-eyebrow-tracking |
var(--theme-tracking-eyebrow, 0em) |
--ixm-text-icon-size |
1.75rem |
--ixm-text-measure |
var(--theme-measure, 44rem) |
--ixm-text-subtitle-leading |
var(--theme-leading-normal, 1.55) |
--ixm-text-subtitle-opacity |
0.75 |
--theme-measure is a length, not ch
ch resolves against whichever font-size the element inherits, and Canvas's heading-scale utility sets a size on the component wrapper. A 66ch cap under that wrapper resolved to roughly 2000px — no cap at all. Keep this token in rem.