Horizontal Rules

Usage

A horizontal rule, also known as HR, is an element that visually separates one sub-section from another.

Default

From an AXP component perspective, all sub-sections will have a bottom rule except for the last sub-section. An exception is the component header, which will not have a bottom HR by default. The decision to apply a bottom HR to a header will be at the designer’s discretion.

By default, an HR is fluid and therefore its width is dependent on the component’s width, unless otherwise stated by the designer. For example, an AXP component may span across 12 columns, but the HR may only span across 10 columns.

Specs

Size = 1px
Color = #ECEDEE (light background), #C8C9C7 (dark background)
Width = dependent on the AXP Component

Example - Light Background

Header

Sub-section 1

Sub-section 2

Sub-section 3

Copy

<div class="dls-gray-02-bg pad">
    <div class="card">
        <h2 class="heading-4 pad">Header</h2>
        <h3 class="heading-2 pad">Sub-section 1</h3>
        <hr>
        <h3 class="heading-2 pad">Sub-section 2</h3>
        <hr>
        <h3 class="heading-2 pad">Sub-section 3</h3>
    </div>
</div>

Example - Dark Background

Header

Sub-section 1

Sub-section 2

Sub-section 3

Copy

<div class="dls-black-bg pad">
    <div class="card dls-gray-02-bg">
        <h2 class="heading-4 pad">Header</h2>
        <h3 class="heading-2 pad">Sub-section 1</h3>
        <hr class="hr-secondary">
        <h3 class="heading-2 pad">Sub-section 2</h3>
        <hr class="hr-secondary">
        <h3 class="heading-2 pad">Sub-section 3</h3>
    </div>
</div>

Example - Light & Dark Background

Header

Sub-section 1

Sub-section 2

Sub-section 3

Copy

<div class="dls-gray-02-bg pad">
    <div class="card">
        <h2 class="heading-4 pad">Header</h2>
        <h3 class="heading-2 pad">Sub-section 1</h3>
        <hr>
        <h3 class="heading-2 pad dls-gray-01-bg">Sub-section 2</h3>
        <hr>
        <h3 class="heading-2 pad">Sub-section 3</h3>
    </div>
</div>