# Split

> Two-column landing band content: prose on one side and the media it describes on the other.

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

## Examples

```tsx
<Split lean="copy">
	<Split.Copy checks>{claims}</Split.Copy>
	<Split.Media>{shot}</Split.Media>
</Split>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `lean?` | `"copy" \| "media"` | Which column is wider. Defaults to DEFAULT_LEAN so media usually leads the layout. |
| `children` | `RemixNode` | Split.Copy and Split.Media columns. |

Also accepts everything in `TagProps<"div">`.


### Split.Copy

The prose column of a Split.

| Prop | Type | Description |
| --- | --- | --- |
| `checks?` | `boolean` | When set, unordered lists inside the copy render as checked claims rather than bullets. |
| `children` | `RemixNode` | Prose, claims, and supporting copy for the column. |

Also accepts everything in `TagProps<"div">`.


### Split.Media

The 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.

| Prop | Type | Description |
| --- | --- | --- |
| `bleed?` | `"end"` | 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` | 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. |