Separator
Divider is a horizontal or vertical line which groups or divides content in layouts.
Breakdown
Divider is a light black 2px horizontal or vertical line which groups or divides content in layouts. It spans the full container it is placed within.
Span divider
A card divider is a fox red 3px horizontal line which is primarily used to separate main content from related content on a page. It spans the full container it is placed within.
Usage
Dividers should be used to bring structure to a layout. Dividers help to separate groups of related elements or break up dense content to make it clearer for users to read and digest content.
Padding is not set for dividers to allow for flexibility in different layouts.
Inset
Inset dividers don’t extend to the edges of a container and are used to group similar items.
Colour
Dividers can be recoloured if the background it sits on prevents legibility unless it’s colour is changed.
Span
Span dividers span the width of their container. Use them to create clear separations between content and related content.
Accessibility
Divider is classed as decorative and therefore not focusable. Screen readers on tab navigation don't announce dividers but do announce them.
