FeatureBand

Mid-page feature band.

DesktopPhone

View code

tsx

<FeatureBand
	layout="stage"
	id="how-it-works"
	eyebrow="How it works"
	title="From a failed probe to the right phone"
	description="Every alert is <strong>confirmed from two regions</strong> before it pages anyone."
>
	<TabbedStage.Item
		value="watch"
		label="Watch every endpoint"
		description="Probes in six regions check each URL every thirty seconds."
		defaultChecked
	>
		<Panel title="Monitors" rows={MONITORS} />
	</TabbedStage.Item>
	<TabbedStage.Item value="confirm" label="Confirm before paging" description="…">
		<Panel title="checkout.beacon.dev" rows={PROBES} />
	</TabbedStage.Item>
	<TabbedStage.Item value="page" label="Page the right person" description="…">
		<Panel title="Incident #2114" rows={ESCALATION} />
	</TabbedStage.Item>
</FeatureBand>

<FeatureBand
	layout="timeline"
	tone="tinted"
	eyebrow="Incident timeline"
	title="One incident, start to finish"
	description="Seventeen minutes from the first 503 to the all-clear on the status page."
>
	<StepList.Item meta="14:02 UTC" title="Checkout starts failing">…</StepList.Item>
	<StepList.Item meta="14:04 UTC" title="Ana acknowledges">…</StepList.Item>
	<StepList.Item meta="14:11 UTC" title="Status page updated">…</StepList.Item>
	<StepList.Item meta="14:19 UTC" title="Back to green">…</StepList.Item>
</FeatureBand>

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 { FeatureBand } from "@sdxc/ui/landing";

Renders a feature band with a chapter header and a split, grid, steps, timeline, or stage body. A split with media carries its header in the copy column, so copy and media share one grid; cell and step titles sit one heading level under the band title.

Examples

tsx

<FeatureBand layout="stage" id="how" title={t("how.title")}>
	<TabbedStage.Item value="detect" label={t("how.detect")} defaultChecked>{shot}</TabbedStage.Item>
</FeatureBand>

tsx

<FeatureBand layout="timeline" title={t("incident.title")}>
	<StepList.Item meta="14:02 UTC" title={t("incident.detect")}>{t("incident.body")}</StepList.Item>
</FeatureBand>

Props

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

Prop	Type	Required	Description
`layout`	`"split" \| "grid" \| "steps" \| "stage" \| "timeline"`	No	Body layout. Defaults to DEFAULT_LAYOUT.
`tone`	`Tone`	No	Band fill. Defaults to DEFAULT_TONE.
`eyebrow`	`RemixNode`	No	Optional eyebrow above the title.
`eyebrowVariant`	`LandingHeader.EyebrowVariant`	No	Eyebrow chrome forwarded to LandingHeader.
`eyebrowHref`	`string`	No	Turns the eyebrow into a link to this URL, forwarded to LandingHeader.
`eyebrowIndex`	`RemixNode`	No	Index a `numbered` eyebrow leads with, such as `"02"`.
`title`	`RemixNode`	Yes	Section title — required, always supplied by the page.
`description`	`RemixNode`	No	Supporting lead under the title.
`media`	`RemixNode`	No	Media for `layout="split"`. Every other layout carries its media in its items.
`lean`	`Split.Lean`	No	Which column is wider when `layout="split"`.
`columns`	`Feature.Columns`	No	Grid column count when `layout="grid"`.
`gridVariant`	`Feature.GridVariant`	No	Grid chrome when `layout="grid"`: `cards`, `mosaic` or an un-carded `list`.
`stageName`	`string`	No	Radio group name for `layout="stage"`. Defaults to `"<id>-stage"` when the band has an `id`, else DEFAULT_STAGE_NAME; give every stage band on a page its own `id` or `stageName` so their selections stay independent.
`stageLabel`	`string`	No	Accessible name for the stage when `layout="stage"`. Defaults to the title when the title is a string; pass it whenever the title is markup.
`children`	`RemixNode`	No	Body content: claim list / copy for `"split"`, Feature cells for `"grid"`, StepList.Item children for `"steps"` and `"timeline"`, or TabbedStage.Item children for `"stage"`.
`parts`	`PartsProps`	No	Per-part styling for title, lead, and media.

Also accepts everything in Omit< LandingSection.Props, "children" | "tone" | "title" | "parts" >.

Types

Name	Values	What it decides
`Layout`	`"split" \| "grid" \| "steps" \| "stage" \| "timeline"`	How the band body lays out under the header.