Divider

npm1.8.3

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. The divider should be used to separate content, not to create visual emphasis.

Example

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

button

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="outline">button</bp-button>
  <bp-divider orientation="vertical"></bp-divider>
  <bp-button size="sm" action="outline">button</bp-button>
  <bp-divider orientation="vertical"></bp-divider>
  <bp-button size="sm" action="outline">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'`
`role`	`string`
`ariaOrientation`	`string`

Attributes

Name	Types	Description
`orientation`	`'horizontal' \| 'vertical'`

CSS Properties

Name	Types	Description
`--background`
`--size`