A line used on a page to separate specific elements.
Dividers should be used in between modules and information on the same page. They should also used before the end of a page where the call to action is located.
2px lines can divide content but are not widely used. In most cases, the shadow line will suffice unless otherwise authorized.
1px lines are typically placed between sub content on a page. They can also be used in a vertical sense to divide content that also may be related.
Dashed lines separate like content that is continuing with a break. This element is usually found separating flight information on a flight card with multiple flights. A location and status typically lives in the center of this break on the flight card as well.
If a divider represents a paragraph-level thematic break, e.g. a shift of topic, then the divider should reveal its semantics to assistive technologies by using the <hr> tag. If, however, a divider does not represent a paragraph-level thematic break and is simply decorative, then it should be hidden from screen readers using aria-hidden="true".
Because shadow dividers rely on a background image, it is important to remember that in certain high contrast situations the shadow image will not be rendered. So if it important that the divider be visible in high contrast situations, then the solid line version should be used instead of the shadow version.
<hr class="divider--section divider--solid">