StepList
Landing steps for a “how it works” band.
Add a monitor
Paste the URL you want watched.Pick who gets paged
Route alerts to a person or a rotation.Share the status page
Customers subscribe to updates.
14:02 UTC
Checkout starts failing
Probes in eu-west and us-east both see 503s from checkout, so the failure is confirmed in 3 seconds.14:04 UTC
On-call acknowledges
Ana gets the page with the failing region, the response body and the last deploy.14:19 UTC
Back to green
The rollback lands, every region passes, and subscribers get the all-clear.
View code
<StepList>
<StepList.Item title="Add a monitor">Paste the URL you want watched.</StepList.Item>
<StepList.Item title="Pick who gets paged">Route alerts to a person or a rotation.</StepList.Item>
<StepList.Item title="Share the status page">Customers subscribe to updates.</StepList.Item>
</StepList>
<StepList variant="timeline">
<StepList.Item meta="14:02 UTC" title="Checkout starts failing">
Probes in eu-west and us-east both see <strong>503s from checkout</strong>, so the
failure is confirmed in 3 seconds.
</StepList.Item>
<StepList.Item meta="14:04 UTC" title="On-call acknowledges">
Ana gets the page with the failing region, the response body and the last deploy.
</StepList.Item>
<StepList.Item meta="14:19 UTC" title="Back to green">
The rollback lands, every region passes, and subscribers get the all-clear.
</StepList.Item>
</StepList>Demo landings
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- RooftreeRooftree keeps a household's groceries, chores, calendar and meals on one encrypted list that syncs across iPhone, Android, Mac and Windows./demo/app
- The MeasureA book and video course on web typography for designers and engineers: measure, rhythm, scale and fonts, with CSS for every chapter./demo/book
- KeelKeel meters every event your product emits, prices it on any plan and sends the invoice on the first of the month./demo/saas
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { StepList } from "@sdxc/ui/landing";Lays steps in a responsive track. A sizing wrapper is the named container; the <ol>
holds the grid so the query can restyle a descendant. A numbered list sets every step in
one row from xl (64rem) with connectors between them; a timeline stays one column.
Composition
The parts the component publishes, each a static property of the host.
StepListStepList.ItemOne step.
Examples
<StepList variant="timeline">
<StepList.Item meta="14:02 UTC" title={t("incident.detect")} media={probeCard}>
{t("incident.detect.body")}
</StepList.Item>
</StepList>Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
variant | "numbered" | "timeline" | No | List look. Defaults to DEFAULT_VARIANT. |
children | RemixNode | Yes | StepList.Item children, numbered by CSS counters. |
Also accepts everything in TagProps<"ol">.
StepList.Item
| Prop | Type | Required | Description |
|---|---|---|---|
title | RemixNode | Yes | Step title — rendered at the ambient heading depth. |
meta | RemixNode | No | Line above the title in a timeline, such as a timestamp. A numbered list leaves it out. |
media | RemixNode | No | Rendered UI beside the copy from the lg container up and under it below, in a timeline. A numbered list leaves it out. |
children | RemixNode | Yes | Supporting copy under the title; <strong> fragments draw in the heading ink. |
Also accepts everything in Omit<TagProps<"li">, "title">.
Types
| Name | Values | What it decides |
|---|---|---|
Variant | "numbered" | "timeline" | numbered lays steps in counted columns; timeline runs them down a rule with a square marker each, an optional timestamp line and optional media. |