Divider

A divider is a thin line that separates content in a list or between sections of a layout. Use one only where whitespace is not enough.

Usage#

<script lang="ts">
	import { Divider } from 'noph-ui'
</script>

<Divider style="width:200px" />

Vertical#

orientation="vertical" makes the divider vertical, for example between text and media on a large screen. It takes the height of its flex or grid row. inset indents it at the top, and inset-middle at the top and bottom.

<script lang="ts">
	import { Divider } from 'noph-ui'
</script>

<div style="display:flex;align-items:center;gap:1rem;height:4rem">
	<span>Photos</span>
	<Divider orientation="vertical" />
	<span>Albums</span>
	<Divider orientation="vertical" variant="inset-middle" />
	<span>Shared</span>
</div>

Theming#

Example#

<script lang="ts">
	import { Divider } from 'noph-ui'
</script>

<Divider --np-divider-color="var(--np-color-tertiary)" style="width:200px" />

Accessibility#

The divider renders role="separator", which screen readers announce. This helps when it separates groups on different topics, such as a list of accounts and a list of settings.

For a purely decorative divider, pass aria-hidden="true". Keep the role on dividers that carry meaning.

API#

Attributes#