Browse Components
Divider
Divide related content horizontally or vertically.
Horizontal
A thematic break between related content.
Workspace settings
Manage your team and preferences.
View Code
<div class="stack">
<p>
Workspace settings
</p>
<hr class="divider">
<p class="muted">
Manage your team and preferences.
</p>
</div>Vertical
A vertical divider stretches within its flex row.
View Code
<div class="cluster">
<span>
Overview
</span>
<span class="divider" role="separator" aria-orientation="vertical">
</span>
<span>
Activity
</span>
</div>With label
Keep the text visible and meaningful.
View Code
<div class="divider-label">
Or continue with email
</div>Installation
Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/divider.css">8,999 bytes CSS including base · 0 bytes runtime JavaScript
Usage
Usage
Use hr.divider for a thematic break. For vertical layouts use a span.divider with role=separator and aria-orientation=vertical inside a flex row. Add aria-hidden=true for purely decorative dividers. A labeled divider uses .divider-label with visible text; do not give it a separator role that hides its label.
Themes and layout
Shared surface, text, border and radius tokens follow the active theme. Keep labels readable and allow content to wrap on narrow screens.
Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.