Divider | Brio

Examples

Basic usage

Content above the divider.

Content below the divider.

<div class="flow">
                <p>Content above the divider.</p>
                <hr class="divider" />
                <p>Content below the divider.</p>
            </div>

Labeled

<div class="flow">
                <button class="button is-block" type="button">Continue with email</button>
                <div class="divider">or</div>
                <button class="button is-outlined is-block" type="button">
                    Continue with passkey
                </button>
            </div>

Spacing

The space around a divider is margin, split by axis: --divider-margin-block sets the space above and below a horizontal divider, and --divider-margin-inline sets the space beside a vertical one. To help with that, there are a couple of variants included, and you can adjust either custom property directly.

Content above the divider.

Default divider spacing

Content between default and snug

Snug divider spacing

Content between snug and tight

Tight divider spacing

Content between tight and custom

Custom --divider-margin-block

Content between custom and no-margin

No margin divider

Content below the divider.

<div class="flow">
                <p class="text-subtle" style="margin: 0">Content above the divider.</p>
                <div class="divider">Default divider spacing</div>
                <p class="text-subtle" style="margin: 0">Content between default and snug</p>
                <div class="divider is-snug">Snug divider spacing</div>
                <p class="text-subtle" style="margin: 0">Content between snug and tight</p>
                <div class="divider is-tight">Tight divider spacing</div>
                <p class="text-subtle" style="margin: 0">Content between tight and custom</p>
                <div class="divider" style="--divider-margin-block: var(--space-xl)">
                    Custom --divider-margin-block
                </div>
                <p class="text-subtle" style="margin: 0">Content between custom and no-margin</p>
                <div class="divider no-margin">No margin divider</div>
                <p class="text-subtle" style="margin: 0">Content below the divider.</p>
            </div>

Vertical

Home

Projects

Settings

A long paragraph of text, that is wrapped to the next line, and shows how the vertical divider works when set between relatively longer.

<div class="cluster">
                    <a href="#" class="link-plain">Home</a>
                    <div class="divider is-vertical no-margin"></div>
                    <a href="#" class="link-plain">Projects</a>
                    <div class="divider is-vertical no-margin"></div>
                    <a href="#" class="link-plain">Settings</a>
                </div>

                <div class="cluster cq-inline">
                    <div class="measure-slim">
                        A long paragraph of text, that is wrapped to the next line, and shows how
                        the vertical divider works when set between relatively longer.
                    </div>
                    <hr class="divider is-vertical no-margin" />
                    <div class="measure-slim">
                        A long paragraph of text, that is wrapped to the next line, and shows how
                        the vertical divider works when set between relatively longer.
                    </div>
                </div>
            </div>

Source comments

Divider -- horizontal or vertical rule with optional label

Markup:
  <hr class="divider">

  <div class="divider">or</div>

  <div class="divider is-vertical"></div>

Reference

Source: src/css/divider.css

Applies to

.divider

Classes

Class	Kind	Description
`.is-vertical`	variant	Vertical orientation for use inside flex rows
`.is-snug`	variant	Snug margins for the divider
`.is-tight`	variant	Tight margins for the divider
`.no-margin`	opt-out	Remove margins around a divider

Selectors

Selector	Description
`hr.divider`	Plain rule form; renders a single horizontal line
`div.divider`	Labeled form; the text sits between ::before and ::after lines

Tokens

Token	Default	Description
`--divider-color`	`var(--color-border)`	Line color for the divider
`--divider-margin-block`	`var(--space-md)`	Block-axis margin around a horizontal divider
`--divider-margin-inline`	`var(--space-md)`	Inline-axis margin around a vertical divider
`--divider-label-gap`	`var(--ui-gutter-relaxed)`	Gap between the label text and the lines
`--divider-font-size`	`var(--ui-font-size-sm)`	Font size for the label text