Dividers
Defines a break in content
Demo
Text
Text
API
Tag
| Name | Description |
|---|---|
<hr>
|
Standard HTML tag, no content |
<s-pipe>
|
Custom HTML tag, no content |
Guidelines
Accessibility
The horizontal rule will announce to screen readers as a separator. The vertical divider (s-pipe) will not announce to screen readers.
Often this is fine because it is an ambient image which doesn’t contain any semantic meaning. However, if it does contain semantic meaning that needs to be conveyed to the user, then add a
<span role=”separator” aria-orientation=”vertical”></span>
immediately before or after it. This will not be visible on the page but will inform a screen reader user that it is present.
Use horizontal rule only as needed
Usually layout and whitespace is enough to define separations of content, but if further delineation is needed a horizontal rule is appropriate.
Use util classes for vertical rules
When a vertical rule is needed, apply the divider-start or divider-end util class to
content or columns.
Design
Design resources can be found on the Skylab design documentation site: skylab.avalara.com