StatStrip

A numeric proof strip for landing bands.

4.2MChecks run every day

6Probe regions

38sMedian alert latency

99.99%Measured uptime

12,400Status pages published

3,180Incidents resolved last month

2m 40sMedian time to acknowledge

View code

tsx

<StatStrip>
	<StatStrip.Item label="Checks run every day">4.2M</StatStrip.Item>
	<StatStrip.Item label="Probe regions">6</StatStrip.Item>
	<StatStrip.Item label="Median alert latency">38s</StatStrip.Item>
	<StatStrip.Item label="Measured uptime">99.99%</StatStrip.Item>
</StatStrip>

<StatStrip variant="gap">
	<StatStrip.Item label="Status pages published">12,400</StatStrip.Item>
	<StatStrip.Item label="Incidents resolved last month">3,180</StatStrip.Item>
	<StatStrip.Item label="Median time to acknowledge">2m 40s</StatStrip.Item>
</StatStrip>

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.

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.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { StatStrip } from "@sdxc/ui/landing";

Lays StatStrip.Item children in two columns, then in one row from lg (48rem) of its own width. The host is the sizing container and fills its parent, and each cell sets its own text alignment, so a centring band never re-aligns labels.

Composition

The parts the component publishes, each a static property of the host.

StatStrip
StatStrip.ItemOne proof cell: the figure as children in tabular digits, and what it counts as label, both on the strip's align edge.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`variant`	`"ruled" \| "gap"`	No	Seam treatment. Defaults to DEFAULT_VARIANT.
`align`	`"start" \| "center"`	No	Edge each figure and its label share, whatever text alignment the band around the strip sets. Defaults to DEFAULT_ALIGN.
`size`	`"base" \| "display"`	No	Figure step. Defaults to DEFAULT_SIZE.
`children`	`RemixNode`	Yes	One or more StatStrip.Item cells.

Also accepts everything in TagProps<"div">.

StatStrip.Item

Prop	Type	Required	Description
`label`	`RemixNode`	Yes	What the number counts — always supplied by the page.
`children`	`RemixNode`	Yes	The figure itself.

Also accepts everything in TagProps<"div">.

Types

Name	Values	What it decides
`Variant`	`"ruled" \| "gap"`	How cells meet: a hairline between them, or a gap with no rule.
`Align`	`"start" \| "center"`	Edge each cell's figure and label share: `start`, or `center` for a strip in a centred band that should read centred too.
`Size`	`"base" \| "display"`	Figure step: `base` at 1.875rem, or `display`, a fluid 2.5–4.5rem numeral that scales with the strip's width for a strip that is the band's headline.