Divider
<quiet-divider>
Dividers separate and group content visually.
<quiet-divider></quiet-divider>
Examples Jump to heading
Adding symbols Jump to heading
Add a decorative symbol or icon in the middle of the divider with the symbol slot. Symbols are
presentational content, meaning they won't be announced by screen readers.
<quiet-divider> <quiet-icon slot="symbol" name="circle"></quiet-icon> </quiet-divider> <quiet-divider> <span slot="symbol">§</span> </quiet-divider> <quiet-divider> <span slot="symbol" style="font-size: .875rem;">break</span> </quiet-divider>
Changing the orientation Jump to heading
Set the orientation attribute to vertical for a vertical orientation. This is best
used inside of flex containers.
<div style="display: flex; align-items: center; height: 2rem;"> <span>First</span> <quiet-divider orientation="vertical"></quiet-divider> <span>Second</span> <quiet-divider orientation="vertical"></quiet-divider> <span>Third</span> </div>
Styling dividers Jump to heading
Use the --color, --spacing, and --thickness CSS properties to change
the divider's appearance.
<quiet-divider style="--color: royalblue; --thickness: 4px;"></quiet-divider>
API Jump to heading
Importing Jump to heading
The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.
To manually import <quiet-divider> from the CDN, use the following code.
import 'https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.0.0/dist/components/divider/divider.js';
To manually import <quiet-divider> from npm, use the following code.
import '@quietui/quiet/dist/components/divider/divider.js';
Slots Jump to heading
Divider supports the following slots. Learn more about using slots
| Name | Description |
|---|---|
symbol
|
Optional text or a symbol to show in the center of the divider. |
Properties Jump to heading
Divider has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties
| Property / Attribute | Description | Reflects | Type | Default |
|---|---|---|---|---|
orientation
|
Sets the divider's orientation. |
|
'horizontal'
|
'horizontal'
|
CSS custom properties Jump to heading
Divider supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties
| Name | Description | Default |
|---|---|---|
--color |
The color of the divider. |
var(--quiet-neutral-stroke-soft)
|
--spacing |
The spacing around the divider. |
1rem
|
--thickness |
The thickness of the divider. |
var(--quiet-border-width)
|
CSS parts Jump to heading
Divider exposes internal elements that can be styled with CSS using the selectors shown below. Learn more about CSS parts
| Name | Description | CSS selector |
|---|---|---|
symbol |
The container that wraps the slotted symbol or icon. |
::part(symbol)
|