Components

Separator

A line that divides content or groups of controls.

Usage

Basic

Above the line

Below the line

HTML

<bs:bsui-stack direction="column" gap="3">
  <bs:bsui-text content="Above the line" />
  <bs:bsui-separator orientation="horizontal" />
  <bs:bsui-text content="Below the line" />
</bs:bsui-stack>

Vertical rule

A stretched row gives the rule its height, which suits a byline.

14 March 2026

Dennis Kastrup

6 minute read

HTML

<bs:bsui-stack direction="row" gap="2" align="stretch" justify="center">
  <bs:bsui-text content="14 March 2026" variant="muted" tag="span" />
  <bs:bsui-separator orientation="vertical" />
  <bs:bsui-text content="Dennis Kastrup" variant="muted" tag="span" />
  <bs:bsui-separator orientation="vertical" />
  <bs:bsui-text content="6 minute read" variant="muted" tag="span" />
</bs:bsui-stack>

Rows in a card

Splitting settings into groups without a heading for each one.

Notifications

Choose what lands in your inbox.

A deploy finished

A build failed

Weekly usage summary

HTML

<bs:bsui-card>
  <bs:bsui-card-header>
    <bs:bsui-card-title label="Notifications" />
    <bs:bsui-card-description label="Choose what lands in your inbox." />
  </bs:bsui-card-header>
  <bs:bsui-card-content>
    <bs:bsui-switch label="A deploy finished" defaultChecked="true" />
    <bs:bsui-separator />
    <bs:bsui-switch label="A build failed" defaultChecked="true" />
    <bs:bsui-separator />
    <bs:bsui-switch label="Weekly usage summary" />
  </bs:bsui-card-content>
</bs:bsui-card>

Attributes

Attribute	Type	Default
`orientation`	`horizontal` `vertical`	`horizontal`