Divider

A divider is a thin rule that separates content, in a list or between the sections of a layout. Reach for one only where whitespace is not enough on its own.

Usage#

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

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

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 is what a screen reader announces when it separates groups that belong to different topics, a list of accounts from a list of settings say.

A rule that is only there to look tidy is noise in that reading. Pass aria-hidden="true" for those, and keep the role for the ones that carry meaning.

API#

Attributes#