Content
Content wrapper with consistent vertical spacing. Use inside container for padded, spaced content areas.
Default
First section of content with consistent spacing.
Second section automatically spaced by the gap token.
Third section follows the same rhythm.
Base
| Class | Description |
|---|---|
.ui-content | Base class |
Prose
| Class | Description |
|---|---|
.ui-content--prose | prose |
Flush
| Class | Description |
|---|---|
.ui-content--flush | flush |
Override these CSS custom properties to customize the component.
| Token | Default | Description |
|---|---|---|
--ui-content-padding-block |
var(--ui-space-4) |
Vertical padding |
--ui-content-padding-inline |
var(--ui-space-4) |
Horizontal padding |
--ui-content-gap |
var(--ui-space-3) |
Gap between children |
Prose
Prose content is constrained to a comfortable reading width. Long paragraphs stay readable without requiring the eye to travel too far across the screen.
This works well for articles, documentation, and form layouts.
<!-- Narrower max-width for readable long-form text (640px / 80 units). -->
<div class="ui-content ui-content--prose ui-bg-subtle">
<p>Prose content is constrained to a comfortable reading width. Long paragraphs stay readable without requiring the eye to travel too far across the screen.</p>
<p>This works well for articles, documentation, and form layouts.</p>
</div>Flush
Flush content has no padding.
Gap between children is preserved.
<!-- No padding, only gap between children. Useful when the parent handles padding. -->
<div class="ui-content ui-content--flush ui-bg-subtle">
<p>Flush content has no padding.</p>
<p>Gap between children is preserved.</p>
</div>With Container
Page Title
Content with consistent spacing and max-width.
<!-- Content inside a centered container for a typical page layout. -->
<div class="ui-container ui-container--center">
<div class="ui-content">
<h2 class="ui-heading ui-heading--3">Page Title</h2>
<p>Content with consistent spacing and max-width.</p>
</div>
</div>