Divide

Add 1px borders between flex or grid children using divide="x" or divide="y" — without manually placing <hr> or wrapper elements.

Horizontal dividers (divide-y)

Between stacked items

Item one
Item two
Item three
Item four
<ul surface="glass" radius="xl" divide="y" layout="stack" gap="0">
  <li style="padding:1rem;">Item one</li>
  <li style="padding:1rem;">Item two</li>
  <li style="padding:1rem;">Item three</li>
</ul>

Vertical dividers (divide-x)

Between row children

Home
About
Contact
<nav surface="glass" radius="xl" divide="x" layout="row">
  <a style="padding:1rem 1.5rem;flex:1;text-align:center;">Home</a>
  <a style="padding:1rem 1.5rem;flex:1;text-align:center;">About</a>
  <a style="padding:1rem 1.5rem;flex:1;text-align:center;">Contact</a>
</nav>

Tone colors

Primary divide
Second item
Danger divide
Second item
<ul divide="y" tone="primary">…</ul>
<ul divide="y" tone="danger">…</ul>
<ul divide="y" tone="muted">…</ul>

Style variants

Dashed
Divide
Dotted
Divide
2px wide
Divide
<ul divide="y" divide-style="dashed">…</ul>
<ul divide="y" divide-style="dotted">…</ul>
<ul divide="y" divide-width="2">…</ul>

<!-- Custom via token -->
<ul divide="y" style="--aura-divide-color:#7c6af7">…</ul>