Feature

One landing claim cell.

Six probe regions

Every check runs from three continents at once, so a regional blip never pages you.

Alerts that agree

An incident opens only when two regions see the outage, then routes to whoever is on call.

Latency, not just status

Track response time per region and publish it on your status page.

View code

tsx

<Feature.Grid columns={3}>
	<Feature>
		<Feature.Icon>
			<GlobeIcon />
		</Feature.Icon>
		<Feature.Title>Six probe regions</Feature.Title>
		<Feature.Description>
			<p>Every check runs from <strong>three continents at once</strong>, so a regional blip never pages you.</p>
		</Feature.Description>
	</Feature>
	<Feature>
		<Feature.Icon>
			<BellRingIcon />
		</Feature.Icon>
		<Feature.Title>Alerts that agree</Feature.Title>
		<Feature.Description>
			<p>An incident opens only when <strong>two regions see the outage</strong>, then routes to whoever is on call.</p>
		</Feature.Description>
	</Feature>
	<Feature>
		<Feature.Icon>
			<GaugeIcon />
		</Feature.Icon>
		<Feature.Title>Latency, not just status</Feature.Title>
		<Feature.Description>
			<p>Track <strong>response time per region</strong> and publish it on your status page.</p>
		</Feature.Description>
	</Feature>
</Feature.Grid>

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

Renders one claim cell. Compose Feature.Media, Feature.Icon, Feature.Title, Feature.Description, and Feature.Action inside it.

Composition

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

Feature
Feature.IconGlyph tile that leads the claim, quiet by default.
Feature.MediaIllustration at the top of the cell, bleeding past the cell padding and fading into the fill; hidden below the md container.
Feature.TitleClaim title at the ambient heading depth, sized for a feature cell.
Feature.DescriptionSupporting copy under the claim title, with emphasis fragments in the heading ink.
Feature.ActionTrailing action slot for a link or button under the claim body, pinned to the foot of the cell so the actions of cells sharing a grid row line up however long each claim's copy runs.
Feature.LinkQuiet brand-coloured link with a trailing arrow, for a Feature.Action.
Feature.GridGrid of Feature cells, as separate cards by default.

Examples

Icon list and mixed spans

Open in a new tab

DesktopPhone

View code

tsx

<Feature.Grid variant="list" columns={3}>
	<Feature>
		<Feature.Icon><GaugeIcon aria-hidden="true" /></Feature.Icon>
		<Feature.Title>Probes from 12 regions</Feature.Title>
		<Feature.Description>A failure pages only once two regions agree.</Feature.Description>
	</Feature>
	…
</Feature.Grid>

<Feature.Grid columns={3}>
	<Feature span={2}>…</Feature>
	<Feature>…</Feature>
	<Feature>…</Feature>
	<Feature span={2}>…</Feature>
</Feature.Grid>

Props

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

Prop	Type	Required	Description
`span`	`2 \| 3`	No	Tracks the cell spans from the grid's widest step, for a grid of mixed spans; it spans the whole row where the grid has fewer tracks. Name the grid's outer corners with `data-corner` on the cells that hold them.
`variant`	`"plain" \| "panel"`	No	Cell chrome. Defaults to DEFAULT_VARIANT.
`href`	`string`	No	Destination for the claim, exposed as `data-href`; the navigation itself is a Feature.Link inside Feature.Action, which makes the cell its hit target.
`children`	`RemixNode`	Yes	Compound parts: Feature.Media, Feature.Icon, Feature.Title, Feature.Description, Feature.Action, or other content.