Rules

Horizontal rules (HRs) and vertical rules (VRs) are thin lines that separate content.

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

Primary
Secondary
Avoid resizing the height of an HR
Avoid using HRs in different colors

VRs

Primary
Secondary
Avoid resizing the width of a VR
Avoid using VRs in different colors
↑ Back to top