Divider
Sourcecomponents/Divider.astro
Horizontal
A hairline rule at --border-default — the quiet separator between stacked blocks. Renders a semantic <hr>.
spacing = md
Section one
Section two
Vertical
orientation="vertical" — a thin inline rule that sizes to the line it sits in, for separating meta.
orientation = vertical
12 min read
Updated today
Brand
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | A full-width rule, or a thin vertical rule for inline use. |
spacing | 'none' | 'sm' | 'md' | 'lg' | 'md' | Margin around the rule — block for horizontal, inline for vertical. |
Usage
Reach for the smallest spacing that reads. The vertical rule needs a flex/inline-flex parent so it can stretch to the text height.
<!-- Between stacked sections -->
<Divider />
<!-- Tight, no margin (e.g. above a footer chip) -->
<Divider spacing="none" />
<!-- Inline, between two bits of meta -->
<span>12 min read</span>
<Divider orientation="vertical" spacing="sm" />
<span>Updated today</span>Rules
Do
Use it to group — a divider says "these belong to different sets".
Keep it to the one hairline weight; let spacing do the work.
Don't
Darken or thicken it for emphasis — that's a heading's job.
Stack dividers around every item — whitespace usually reads better.