<st-steps>
JSON type: Steps
A numbered process: a responsive grid of cards, each with an automatic "01", "02", ... number, a
title and a description. highlightLast makes the final card a dark navy call-out, the way
enterprise pages close a how-it-works sequence. inverted puts the whole block on the dark band.
variant="band" sets the block on a white full-width band with hairline top and bottom borders;
the cards sit on a light blue surface and the numbers are large azure.
Usage
import '@sankhyatronics/sankhya-cms/steps'; // registers <st-steps>
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
eyebrow | eyebrow | string | '' | Small uppercase label above the title. |
title | title | string | '' | |
subtitle | subtitle | string | '' | |
items | — | StepItem[] | [] | The steps, in order. |
highlightLast | highlight-last | boolean | false | Renders the last step as a dark navy call-out card. |
inverted | inverted | boolean | false | Puts the block on the dark band (--st-cms-band-dark-bg), which stays dark in the dark theme. |
variant | variant | 'default' | 'band' | 'default' | default is the bordered card grid; band is a white full-width band with light blue cards. |
markdown | markdown | boolean | false | Renders each step's description as Markdown (inline code, links). Off by default: descriptions are plain text. |
See the live examples in Storybook.