Divider

Dividers separate and group content visually.

<quiet-divider></quiet-divider>

Examples Jump to heading #

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>

Customizing styles Jump to heading #

Use the --color, --spacing, and --thickness custom properties to change how the divider looks.

<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.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/divider/divider.js';

import '@quietui/quiet/dist/components/divider/divider.js';

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

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