Horizontal rule
A horizontal rule is a thin line that is used to add visual or semantic separation between content to aid in a user being able to scan the page.
When to use
- To separate sections of content when there is no other dividing element or component
When not to use
- Above or below content with background colors or images
Anatomy
1. Styling: 1px border, decorative border gray, width and height are adjustable
2. Margin: available in 5px increments starting at 0px up to 50px