lib components / Structure

Divider

Use this component to create a clear visual divide between content sections.

import { Divider } from "@siteimprove/fancylib";

#Examples

Sometimes, whitespace and headings aren't enough to visually separate content sections. In such cases, the divider component can help. Essentially, it's a thin full-width horizontal rule. As a result, it can only act as a border between vertically stacked sections.

#Default

Here you can see a standalone default implementation of the divider component.

CodeHTML output

<Divider />

#Container

The divider component should only be used inside visual containers, such as cards, (dead link) modals, or (dead link) sidepanels. You can see an example of that here. The card features two content sections, with topics so unrelated, that a divider is needed to emphasize this distinction. Also, note that the card header features a divider to signal that it's a distinct section of the card.

Card

First section

In molestie sem at ligula semper, at imperdiet ligula pulvinar. Fusce egestas porttitor dui. Vestibulum hendrerit sagittis neque, ut tempor nisl vestibulum eget.

Morbi nec mollis dolor. Donec porta arcu non dui efficitur, a condimentum quam cursus. Fusce non pharetra nisi. Nunc pharetra fermentum massa. Fusce nec nibh at orci mattis vehicula feugiat at elit.

Second section

Praesent cursus tortor nec faucibus ullamcorper. Ut enim leo, faucibus ut magna at, pharetra lobortis nisi. Maecenas eleifend, elit quis finibus hendrerit, neque quam tincidunt risus, eu facilisis nulla tellus vitae lectus.

Ut vitae fermentum mauris. Nunc at justo quis urna efficitur consectetur ac sit amet augue. Vivamus sagittis nunc non ultrices volutpat. Maecenas tincidunt lobortis massa, sed pulvinar diam. Proin ut scelerisque felis. Suspendisse non turpis at arcu rutrum semper at non diam.

CodeHTML output

<Card>
	<Card.Header>Card</Card.Header>
	<Content>
		<TextContainer>
			<H3>First section</H3>
			<Paragraph>
				In molestie sem at ligula semper, at imperdiet ligula pulvinar. Fusce egestas porttitor
				dui. Vestibulum hendrerit sagittis neque, ut tempor nisl vestibulum eget.
			</Paragraph>
			<Paragraph>
				Morbi nec mollis dolor. Donec porta arcu non dui efficitur, a condimentum quam cursus.
				Fusce non pharetra nisi. Nunc pharetra fermentum massa. Fusce nec nibh at orci mattis
				vehicula feugiat at elit.
			</Paragraph>
		</TextContainer>
	</Content>
	<Divider />
	<Content>
		<TextContainer>
			<H3>Second section</H3>
			<Paragraph>
				Praesent cursus tortor nec faucibus ullamcorper. Ut enim leo, faucibus ut magna at,
				pharetra lobortis nisi. Maecenas eleifend, elit quis finibus hendrerit, neque quam
				tincidunt risus, eu facilisis nulla tellus vitae lectus.
			</Paragraph>
			<Paragraph>
				Ut vitae fermentum mauris. Nunc at justo quis urna efficitur consectetur ac sit amet
				augue. Vivamus sagittis nunc non ultrices volutpat. Maecenas tincidunt lobortis massa, sed
				pulvinar diam. Proin ut scelerisque felis. Suspendisse non turpis at arcu rutrum semper at
				non diam.
			</Paragraph>
		</TextContainer>
	</Content>
</Card>

#Properties

The divider component doesn't have any properties. So, this section isn't quite as interesting as usual.

CodePropsHTML output

Property	Description	Defined	Value
classNameOptional	`string`Custom className that's applied to the outermost element (only intended for special cases)	YesNo
styleOptional	`object`Style object to apply custom inline styles (only intended for special cases)	YesNo

#Guidelines

#Best practices

Use the divider component to create a clear visual divide between content sections.
Use the divider component inside visual containers, such as cards, (dead link) modals, or (dead link) sidepanels.
Use the divider component when users need to quickly scan and find specific content.
Use the divider component in combination with headings, not instead of them.
Dividers should be the same width as their container. So, place them outside of layout or content components.

#Do not use when

Whitespace and headings create sufficient visual separation between content sections.

#Accessibility

The divider component doesn't use the <hr> tag. That's because this HTML tag carries semantic meaning, which assistive technology communicates to its users. Specifically, the <hr> tag signals a thematic break. As a result, it should not be used for presentational purposes.

However, our divider component is intended to be used for presentational purposes. Presentational components don't do much for assistive technology users. They are better served by headings that explicitly signal and label thematic breaks.

To ensure accessibility: Consider using a heading instead of a divider, or use a heading and a divider.

Explore detailed guidelines for this component: Accessibility Specifications

#Writing

There are no writing guidelines for this component.