Split
Two-column landing band content: prose on one side and the media it describes on the other.
Every incident writes its own timeline, so the postmortem starts half done.
- Status changes posted as they happen
- Responders and acknowledgements recorded
- One link to share with customers
- 14:02Latency above 800 ms p95 from fra and ams
- 14:03Paged Dana Ruiz (primary on-call)
- 14:05Acknowledged · status page set to Investigating
- 14:19Rolled back api@4.18.2 in eu-west
View code
<Split lean="copy">
<Split.Copy checks>
<p>Every incident writes its own timeline, so the postmortem starts half done.</p>
<ul>
<li>Status changes posted as they happen</li>
<li>Responders and acknowledgements recorded</li>
<li>One link to share with customers</li>
</ul>
</Split.Copy>
<Split.Media bleed="end">
<ProductFrame lights title="Elevated API latency in eu-west">
{timeline}
</ProductFrame>
</Split.Media>
</Split>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.
- RooftreeRooftree keeps a household's groceries, chores, calendar and meals on one encrypted list that syncs across iPhone, Android, Mac and Windows./demo/app
- The MeasureA book and video course on web typography for designers and engineers: measure, rhythm, scale and fonts, with CSS for every chapter./demo/book
- KeelKeel meters every event your product emits, prices it on any plan and sends the invoice on the first of the month./demo/saas
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.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { Split } from "@sdxc/ui/landing";Lays Split.Copy and Split.Media as a two-track grid. The host
is the named sizing container; an inner wrapper holds the tracks and
@container column rules so the query can restyle a descendant. Goes two
columns at the lg container (48rem), centred on each other so a short column sits
level with a tall one; the gap grows from 2rem to 3rem at xl.
Composition
The parts the component publishes, each a static property of the host.
SplitSplit.CopyThe prose column of a Split.Split.MediaThe media column of a Split, sized to the track rather than its content so a long sample does not tower over the copy beside it.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
lean | "copy" | "media" | No | Which column is wider. Defaults to DEFAULT_LEAN so media usually leads the layout. |
children | RemixNode | Yes | Split.Copy and Split.Media columns. |
Also accepts everything in TagProps<"div">.
Split.Copy
| Prop | Type | Required | Description |
|---|---|---|---|
checks | boolean | No | When set, unordered lists inside the copy render as checked claims rather than bullets. |
children | RemixNode | Yes | Prose, claims, and supporting copy for the column. |
Also accepts everything in TagProps<"div">.
Split.Media
| Prop | Type | Required | Description |
|---|---|---|---|
bleed | "end" | No | Lets the media's content grow to max(100%, 60rem) and run past the measure toward the inline end once the split has two columns; the enclosing band clips it at the viewport edge. |
children | RemixNode | Yes | Media, samples, or staged UI for the column. |
Also accepts everything in TagProps<"div">.
Types
| Name | Values | What it decides |
|---|---|---|
Lean | "copy" | "media" | Which column receives the wider track above the stack breakpoint. |