The divider component is used to visually separate content into distinct sections. It can be used to separate a group of related items or to indicate a change in content or context.
Example
Visually separates content sections with a horizontal or vertical line.
some text content
some text content
code
<script type="module">
import '@blueprintui/components/include/divider.js';
</script>
<div bp-layout="block gap:sm">
<p bp-text="content">some text content</p>
<bp-divider></bp-divider>
<p bp-text="content">some text content</p>
</div>Vertical
Demonstrates vertical divider orientation between inline elements.
code
<script type="module">
import '@blueprintui/components/include/divider.js';
import '@blueprintui/components/include/button.js';
</script>
<div bp-layout="inline gap:md align:vertical-center p-x:md">
<bp-button size="sm" action="secondary">button</bp-button>
<bp-divider orientation="vertical"></bp-divider>
<bp-button size="sm" action="secondary">button</bp-button>
<bp-divider orientation="vertical"></bp-divider>
<bp-button size="sm" action="secondary">button</bp-button>
<bp-divider orientation="vertical"></bp-divider>
</div>Install
NPM
// npm package
import '@blueprintui/components/include/divider.js';CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/divider.js/+esm';
</script>Accessibility
- Avoid using divider as the only way to indicate a change in content or context.
bp-divider
Properties
| Name | Types | Description |
|---|---|---|
orientation | 'horizontal' | 'vertical' | Controls the layout direction of the divider, either horizontal or vertical |
role | string | |
ariaOrientation | string |
Attributes
| Name | Types | Description |
|---|---|---|
orientation | 'horizontal' | 'vertical' | Controls the layout direction of the divider, either horizontal or vertical |
CSS Properties
| Name | Types | Description |
|---|---|---|
--background | ||
--size |