Rule
Horizontal rules (HRs) and vertical rules (VRs) are thin lines that separate content.
Page sections
Types
Primary HR
Secondary HR
Primary VR
Secondary VR
Usage
Use rules to indicate a separation in content.
HRs
Use primary full-bleed HRs to separate content into sections
Use primary inset HRs to separate related content, such as a claims list
Use primary middle HRs to separate related content on a card, such as cost and payment breakdowns
VRs
Use primary VRs to separate related items, such as filters
Use secondary VRs for highlighting items, such as an active nav item
Visual style
HRs
Avoid resizing the height of an HR
Avoid using HRs in different colors
VRs
Avoid resizing the width of a VR
Avoid using VRs in different colors