Rails

Frames landing content in a ruled column.

DesktopPhone

View code

tsx

<LandingSection>
	<LandingHeader eyebrow="Platform">Built like infrastructure</LandingHeader>
</LandingSection>
<Rails ruled marks="corners">
	<FeatureRow />
</Rails>
<Rails ruled marks="corners" spacing="compact">
	<p>Trusted by 1,200 on-call teams.</p>
</Rails>

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.

Terminal

npm add @sdxc/ui remix

typescript

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

Usage

typescript

import { Rails } from "@sdxc/ui/landing";

Wraps content in a column at --ui-landing-measure whose hairline rails run its full height once the page is wider than the column, each taking 1px out of the gutter, so text inside lines up with a landingContainer() band above or below at every width.

Props

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

Prop	Type	Required	Description
`ruled`	`boolean`	No	Draws a hairline across the top of the column so stacked rails read as one grid.
`marks`	`"none" \| "corners"`	No	Registration marks at the column's corners. Defaults to `none`.
`spacing`	`Spacing`	No	Block padding inside the column. Defaults to DEFAULT_SPACING.
`children`	`RemixNode`	Yes	Content to frame.

Also accepts everything in TagProps<"div">.

Types

Name	Values	What it decides
`Marks`	`"none" \| "corners"`	`corners` draws a Crosshair where each rail meets the top and bottom edge.