# Rails

> Frames landing content in a ruled column: 1px hairline rails down both sides of the content measure, an optional top rule, and "+" marks where the rules meet.

```ts
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.

## Examples

```tsx
<Rails ruled marks="corners">
	<LandingHeader eyebrow={t("grid.eyebrow")}>{t("grid.title")}</LandingHeader>
</Rails>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `ruled?` | `boolean` | Draws a hairline across the top of the column so stacked rails read as one grid. |
| `marks?` | `"none" \| "corners"` | Registration marks at the column's corners. Defaults to `none`. |
| `spacing?` | `Spacing` | Block padding inside the column. Defaults to DEFAULT_SPACING. |
| `children` | `RemixNode` | 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. |