Components

Divider

It's just an <hr>.

Default

This text is placed over

This text is placed under

HTML

This text is placed over
<hr>
This text is placed under

Variants

Tonal

Filled

Primary

HTML

Tonal
<hr class="border-tonal">

Filled
<hr class="border-filled">

Primary
<hr class="border-primary">

API

Type	Modifiers	Default	Description
Variant	`.border-tonal`, `.border-filled`, `.border-primary`	-	Visual variant modifiers.

Installation

divider.css

@layer components.root {
  :where(hr) {
    background-color: var(--border-color);
    block-size: var(--border-size-1);
    margin-block: var(--size-fluid-3);

    /* Border color */
    &.border-filled {
      background-color: var(--surface-filled);
    }

    &.border-primary {
      background-color: var(--primary);
    }

    &.border-tonal {
      background-color: var(--surface-tonal);
    }
  }
}