River
Two-column text + visual layout — alternate alignments for rhythm.
A .river is a text + visual pair side-by-side. Alternate data-align="start" and "end" between adjacent rivers for visual rhythm. Stacks below md.
Install
import "elements-kit/ui/styles.css";
import "elements-kit/ui/styles/palette/gray.css";
import "elements-kit/ui/styles/neutral/gray.css";
import "elements-kit/ui/marketing/marketing.css";API
<div class="river" data-align="start">
<div class="river-content">
<h3 class="section-heading section-heading-3">Heading</h3>
<p class="section-paragraph">Body.</p>
<a href="/learn">Learn more</a>
</div>
<div class="river-visual" data-border>
<img src="/feature.webp" alt="" />
</div>
</div>| Element | Attribute | Values |
|---|---|---|
.river | data-align | start (default, text left), end (text right), center (stacked, centered), breakout (custom grid for headline + trailing element) |
.river | data-large-visual | modifier — visual takes 7/12, content 5/12 (only with start / end) |
.river-visual | data-border | presence — adds a 1px border + rounded corners |
Children
.river-content— the text column. Use Section heading + Section paragraph + a link/button..river-visual— the visual column. Adddata-borderfor a framed treatment (screenshots, UI shots).
Tips
Do
Alternate data-align="start" and "end" between adjacent rivers for visual rhythm.
Don't
Mix data-align="center" with data-large-visual. The 5/7 grid only applies to start / end.
Do
Keep visuals at a similar aspect ratio across consecutive rivers.
Don't
Leave .river-visual empty as a spacer. Use a regular <div> if you need negative space.
Breakout
For oversized callout paragraphs that break the normal rhythm, use data-align="breakout". A visually hidden heading is required as the first child for document outline correctness.
<div class="river" data-align="breakout">
<h3 class="section-heading" style="position:absolute; …visually-hidden">
Section title for outline
</h3>
<div class="river-content">
<p class="section-paragraph"><em>Large quote-style paragraph.</em></p>
<a class="x-button" data-cta="" href="#">Learn more</a>
</div>
<div class="river-visual">…</div>
</div>