SiteSplit
Media beside text from 1000px, stacked (media first) below. The parts of a landing feature section; with IllustrationFrame and Kicker.
Examples
An illustration beside a sub-heading and text
For server builders
Bare paragraphs in the text column get body style. Put a sub-heading, a Terminal or a CodeBlock here too.
<SiteSplit ratio="text" align="start" media={<IllustrationFrame><ABSwitchIllustration /></IllustrationFrame>}>
<Heading level={3} size="xl">Same call, two builds, one diff</Heading>
<p>…</p>
<Terminal lines={…} />
</SiteSplit>IllustrationFrame with a control under it
A CopyField of the MCP URL goes here on the landing hero.
<IllustrationFrame foot={<CopyField value={mcpUrl} label="Your agents connect here" />}>
<AggregateIllustration />
</IllustrationFrame>Usage
import { SiteSplit, IllustrationFrame, Kicker } from '@switchboard/ui'
<SiteSplit media={…} reverse? ratio?="even|media|text" align?="center|start">…</SiteSplit>Props
Every component also takes mix, for css() and mixins applied after its own style.
SiteSplit
| Prop | Type | Default | Description |
|---|---|---|---|
| media* | RemixNode | – | The visual. First on phones. |
| children | RemixNode | – | The text column, stacked with a gap. |
| reverse | boolean | – | From 1000px, put the media on the right. |
| ratio | 'even' | 'media' | 'text' | 'even' | Which column is wider (7:5) from 1000px; follows the column with reverse. |
| align | 'center' | 'start' | 'center' | Vertical alignment; use start when the text column is much taller. |
Also accepts every <div> attribute.
IllustrationFrame
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | RemixNode | – | One illustration; it names itself (role="img"). |
| caption | RemixNode | – | A sentence under it (figcaption). |
| foot | RemixNode | – | A control under the illustration. |
A <figure>.
Kicker
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | RemixNode | – | Who or what the section is for, sentence case. |
Accessibility
- DOM order is media then text; reverse only changes the visual order from 1000px, and the media is decorative or self-named.
- IllustrationFrame takes its height from the SVG viewBox, so animation never shifts layout.
Guidance
Do
- Alternate reverse between consecutive splits.
- Keep one moving illustration in view at a time.
Don’t
- Put a Kicker above every heading: only where it says who a section is for.