Accessibility
Dividers are purely decorative elements and not focusable. To improve the experience for assistive technology, apply aria-hidden="true" so screen readers will ignore the element. If the element should be detected, remove the aria-hidden attribute.
<hr aria-hidden="true">
Rules
- Be careful with the usage of dividers as too many of them might clutter the design
- Use only one colour variant throughout your page content
- Be aware that the light grey divider may be hard to see on screens with low contrast or glossy screens
- By default, dividers are full-width
- There are four colour variants
- Without setting a style the divider will be set as default light grey