Bento

Equal columns of claim cells.

Monitors

HTTP, TCP and DNS checks every thirty seconds from six regions, with response time per region beside up or down.

Incidents

An outage opens an incident, pages whoever holds the pager and closes itself once every region recovers.

Status pages

Publish live status on your own domain, with subscriber updates by email and RSS.

View code

tsx

<Bento columns={3}>
	<Bento.Cell>
		<Bento.Media>
			<svg viewBox="0 0 360 140" role="img" aria-label="Availability over the last 45 days">
				{dailyBars}
			</svg>
		</Bento.Media>
		<Bento.Title size="lg">Monitors</Bento.Title>
		<Bento.Body>
			HTTP, TCP and DNS checks every thirty seconds from six regions, with
			<strong> response time per region</strong> beside up or down.
		</Bento.Body>
	</Bento.Cell>
	<Bento.Cell>
		<Bento.Title>Incidents</Bento.Title>
		<Bento.Body>
			An outage opens an incident, pages whoever holds the pager and
			<strong> closes itself</strong> once every region recovers.
		</Bento.Body>
	</Bento.Cell>
	<Bento.Cell>
		<Bento.Title>Status pages</Bento.Title>
		<Bento.Body>
			Publish live status on your own domain, with
			<strong> subscriber updates</strong> by email and RSS.
		</Bento.Body>
	</Bento.Cell>
</Bento>

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

Bento grid of claim cells. The host is the named sizing container; an inner wrapper holds the tracks so the query can restyle a descendant: one column on a phone, two from the md container (36rem), columns from lg (48rem). Cell titles render one heading level below the band title.

Composition

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

Bento
Bento.CellOne bento cell, padded 1.5rem and 2.5rem from the lg container.
Bento.MediaIllustration at the top of the cell, bleeding past the cell padding and fading into the fill; hidden below the md container.
Bento.TitleCell title at the ambient heading depth, balanced across its lines: 1.25rem rising to 1.5rem on 2rem leading from the md container, or base semibold for dense claims.
Bento.BodySupporting copy under a bento title, with emphasis fragments in the heading ink.

Props

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

Prop	Type	Required	Description
`columns`	`Columns`	No	Columns at the `lg` container. Defaults to DEFAULT_COLUMNS.
`variant`	`Variant`	No	Grid chrome. Defaults to DEFAULT_VARIANT.
`children`	`RemixNode`	Yes	Bento.Cell children to lay out.

Also accepts everything in TagProps<"div">.

Bento.Cell

Prop	Type	Required	Description
`"data-corner"`	`string`	No	Outer corners this cell rounds at the `lg` step, space separated (`"start-start end-start"`). Setting it on any cell hands every `lg` outer corner to the page, for cells that span columns.
`children`	`RemixNode`	Yes	Cell content: an optional Bento.Media or glyph, then title and body.

Also accepts everything in TagProps<"div">.

Bento.Media

Prop	Type	Required	Description
`children`	`RemixNode`	Yes	Illustration or screenshot drawn edge to edge at the top of the cell.

Also accepts everything in TagProps<"div">.

Bento.Title

Prop	Type	Required	Description
`size`	`"base" \| "lg"`	No	Title step. Defaults to DEFAULT_TITLE_SIZE.
`children`	`RemixNode`	Yes	Title copy for the cell.

Also accepts everything in TagProps<"h1">.

Bento.Body

Prop	Type	Required	Description
`children`	`RemixNode`	Yes	Supporting copy for the cell; `<strong>` fragments render in the heading ink.

Also accepts everything in TagProps<"div">.

Types

Name	Values	What it decides
`TitleSize`	`"base" \| "lg"`	Title step: `lg`, 1.25rem rising to 1.5rem, for a bento's cells, or `base` for a dense grid of short claims.