Divider

Horizontal

Loading...

Vertical

Loading...

A divider component that provides a thin line for grouping elements.

• Tag: <flint-divider>
• Class: FlintDivider

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintDivider } from 'flint-ui';

Usage

<flint-divider></flint-divider>

Properties

Property	Attribute	Type	Default	Description
orientation	orientation	'horizontal' | 'vertical'	'horizontal'	Orientation of the divider line.
variant	variant	'full' | 'middle' | 'inset'	'full'	Inset variant controlling how far the divider extends.
weight	weight	'light' | 'medium' | 'heavy'	'light'	Thickness of the divider line.
textAlign	text-align	'left' | 'center' | 'right'	'center'	Alignment of text content within the divider.

Slots

Name	Description
(default)	Optional text or content to display within the divider.

CSS Custom Properties

Property	Default
--flint-divider-margin	—
--flint-divider-thickness	—
--flint-divider-color	—
--flint-border-color	—
--flint-font-family	—
--flint-text-color-muted	—

---