Horizontal Rule

Intended to serve as a visual separate between visual elements. Visual elements can be any variety of content types including but not excluded to text, imagery, cards, or any additional regions that can benefit the experience through separation.

• 1

  Line

  Solid, dotted, or dashed colored visual separator between blocks of visual elements.

The rule should occupy 100% width of the containing element.

The height of the component will be fixed at 1px/pts.

Controls the color of the line rendered for the horizontal rule. Use gray text or gray-300 as fill colors

This component should be used to build a visual separation between two visual element that would otherwise be difficult to distinguish from one another.

It should not be paired with other components, sections, or areas of content that are already separated via borders.

The solid variation should be considered the default behavior. To soften the level of separation, the dashed or dotted approach can be used.

Do

Use to provide strengthen visual separation between blocks of text.

Don't

Don't description

Do

Opt for the background variation that provides the most subtle level of separation. For example, use the gray-300 option on a white background.

Don't

Avoid variations that introduce stark levels of contrast between the component and it’s background placement.