gog-divider

Divider

A rule between two regions — horizontal or vertical, solid, dashed or dotted, with an optional label running through it. There is no hasLabel input: the two forms are told apart by whether anything was actually projected.

Overview

Import the component and drop it into a template.

import { DividerComponent } from '@guildofgleks/ui';

@Component({
  // ...
  imports: [DividerComponent],
})

Basic usage:

Above the rule.

Below it.

<p>Above the rule.</p>
<gog-divider />
<p>Below it.</p>

Examples

Variants

solid is the default; dashed and dotted read as weaker separations.

solid

dashed

dotted

<gog-divider variant="solid" />
<gog-divider variant="dashed" />
<gog-divider variant="dotted" />

With a label

Anything projected into the divider becomes its label and the rule splits around it. Because it is content rather than a label input, it takes markup — an icon, a <gog-tag>, whatever the case needs.

Shipping details

Draft

<gog-divider>OR</gog-divider>

<!-- The label is projected content, so it takes markup, not just text. -->
<gog-divider>
  <gog-icon name="info" />
  Shipping details
</gog-divider>

<gog-divider><gog-tag variant="warning">Draft</gog-tag></gog-divider>

Vertical

Separates items along a row instead of stacking regions. It stretches to a row that has a height of its own and otherwise falls back to --gog-divider-vertical-length.

<div class="toolbar">
  <button>Cut</button>
  <gog-divider orientation="vertical" />
  <button>Copy</button>
  <gog-divider orientation="vertical" />
  <button>Paste</button>
</div>

Inset

Indents the rule from the leading edge so it starts under the text of a list whose rows begin with an icon, rather than cutting across the whole row.

Order placed

Awaiting payment

Preparing shipment

<ul class="event-list">
  <li><gog-icon name="success" /> Order placed</li>
  <gog-divider [inset]="true" />
  <li><gog-icon name="clock" /> Awaiting payment</li>
</ul>

Accessibility

The host carries role="separator" and an aria-orientation matching the orientation input, so a screen reader announces the break rather than skipping it. The two rule segments are aria-hidden; only the projected label is read.

API Reference

Inputs

Name	Type	Default	Description
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	Which way the rule runs. A vertical divider takes its length from --gog-divider-vertical-length unless its container stretches it.
`variant`	`'solid' \| 'dashed' \| 'dotted'`	`'solid'`	How the line is painted.
`inset`	`boolean`	`false`	Indents the rule from the leading edge by --gog-divider-inset-size, so it lines up with the text of a list whose rows start with an icon or avatar instead of cutting across the whole row.

Content

Default slot — the divider's label. Leave it empty for a plain rule.

Styling Tokens

Every CSS custom property the divider paints with. Override any of them — on a single instance, a subtree, or a theme — to restyle it. See the Theming guide for the full token-layering model, or the Theme Generator to tweak these live.

Token	Description
`--gog-divider-line-color / -line-thickness`	The rule itself.
`--gog-divider-solid-style / -dashed-style / -dotted-style`	The border-style each variant maps to.
`--gog-divider-block-spacing / -inline-spacing`	Margin around a horizontal and a vertical divider respectively.
`--gog-divider-vertical-length`	Fallback length for a vertical divider whose row has no height of its own.
`--gog-divider-inset-size`	How far the inset variant is indented from the leading edge.
`--gog-divider-label-color / -label-font-size / -label-font-weight / -label-gap`	The projected label and the gap punched in the rule around it.