Card

A bounded container grouping a header, body content.

acme-web

Production · deployed 12 minutes ago

Healthymain@4f9c1ab

Requests: 1.2M
p95: 84ms
Errors: 0.02%

Checkout latency

Incident INC-4821 · opened 06:14 UTC

p95 on /checkout has held above 2s for 18 minutes. The payments queue is draining at half its usual rate.

View code

<div mix={[hstack({ gap: 4, align: "stretch" }), flexWrap()]}>
	<Card mix={[is("22rem")]}>
		<Card.Header>
			<Card.Title>acme-web</Card.Title>
			<Card.Description>Production · deployed 12 minutes ago</Card.Description>
		</Card.Header>
		<Card.Content mix={[vstack({ gap: 3, align: "stretch" })]}>
			<div mix={[hstack({ gap: 2, align: "center" })]}>
				<Badge color="success" variant="secondary">
					Healthy
				</Badge>
				<span mix={[hstack({ gap: 1, align: "center" }), text("sm"), fg("neutral")]}>
					<GitBranchIcon size={14} aria-hidden="true" />
					main@4f9c1ab
				</span>
			</div>
			<Separator />
			<dl mix={[hstack({ gap: 6, align: "start" })]}>
				<div mix={[vstack({ gap: 1, align: "start" })]}>
					<dt mix={[text("xs"), fg("neutral.muted")]}>Requests</dt>
					<dd mix={[text("lg"), weight("semibold")]}>1.2M</dd>
				</div>
				<div mix={[vstack({ gap: 1, align: "start" })]}>
					<dt mix={[text("xs"), fg("neutral.muted")]}>p95</dt>
					<dd mix={[text("lg"), weight("semibold")]}>84ms</dd>
				</div>
				<div mix={[vstack({ gap: 1, align: "start" })]}>
					<dt mix={[text("xs"), fg("neutral.muted")]}>Errors</dt>
					<dd mix={[text("lg"), weight("semibold")]}>0.02%</dd>
				</div>
			</dl>
		</Card.Content>
		<Card.Footer mix={[hstack({ gap: 2, align: "center" })]}>
			<Button type="button" size="sm">
				Open logs
			</Button>
			<Button type="button" size="sm" variant="outline" color="neutral">
				Roll back
			</Button>
		</Card.Footer>
	</Card>

	<Card color="danger" mix={[is("20rem")]}>
		<Card.Header>
			<Card.Title mix={[hstack({ gap: 2, align: "center" })]}>
				<TriangleAlertIcon size={18} aria-hidden="true" />
				Checkout latency
			</Card.Title>
			<Card.Description>Incident INC-4821 · opened 06:14 UTC</Card.Description>
		</Card.Header>
		<Card.Content>
			p95 on /checkout has held above 2s for 18 minutes. The payments queue is draining at
			half its usual rate.
		</Card.Content>
		<Card.Footer>
			<Button type="button" size="sm" color="danger">
				Page on-call
			</Button>
		</Card.Footer>
	</Card>
</div>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

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

Usage

import { Card } from "@sdxc/ui";

The card panel: a rounded, bordered, softly shadowed <section> tinted through the data-color attribute contract. Compose Card.Header, Card.Content, and Card.Footer inside it.

Composition

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

Card
Card.HeaderRenders the card's header slot: a <header> stacking its children in a column with a small gap, padded on every side.
Card.TitleThe card's heading, in the native heading element matching the nearest ambient heading level — <h1> where nothing supplies one.
Card.DescriptionRenders the card's supporting copy inside a native <p>, muted to seventy percent opacity so it reads as secondary to Card.Title.
Card.ContentThe card's main body slot: a <div> padded on its inline and block-end edges, leaving its block-start edge flush against Card.Header.
Card.FooterThe card's footer slot: a <footer> laying its children out in a vertically centered row, padded on its inline and block-end edges so it sits flush against the content above.

Examples

<Card color="danger">
	<Card.Header>
		<Card.Title>{t("errors.billing.title")}</Card.Title>
	</Card.Header>
</Card>

Props

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

Prop	Type	Description
`color?`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role. Defaults to DEFAULT_COLOR.

Also accepts everything in TagProps<"section">.

Card.Header

Also accepts everything in TagProps<"header">.

Card.Title

Also accepts everything in TagProps<"h1">.

Card.Description

Also accepts everything in TagProps<"p">.

Card.Content

Also accepts everything in TagProps<"div">.

Card.Footer

Also accepts everything in TagProps<"footer">.

Types

Name	Values	What it decides
`Color`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role, each mapped to its matching `--ui-*` border, background, and foreground variables.