Components

Accent Bars

Purpose

Accent bars give a component an identity consistent with one of our brands or cobrands.

Usage

Always position accent bars at the top of the component.

Specs

Height = 4px
Width = Dependent on component width
Position = Top of a component
Fill = Bright Blue
Class Name = .accent-bar

Badge Specs

Example - Accent Bar

Copy

<div class="accent-bar dls-bright-blue-bg"></div>

Example - Accent Bar on Card

Enjoy the Rewards of Dining

Earn 2x points at U.S. restaurants when you use your Premier Rewards Gold Card.

View Dining Rewards

Copy

<div class="dls-gray-02-bg pad" style="max-width: 350px">
  <div class="accent-bar dls-bright-blue-bg"></div>
  <div class="card">
    <div class="pad-responsive">
      <h2 class="heading-4">Enjoy the Rewards of Dining</h2>
    </div>
    <hr>
    <div class="pad-responsive pad-3-tb-md-up pad-2-tb-sm-down">
      <p class="body-1">Earn 2x points at U.S. restaurants when you use your Premier Rewards Gold Card.</p>
    </div>
    <hr>
    <div class="pad-responsive text-align-center">
      <a href="#example" class="btn">View Dining Rewards</a>
    </div>
  </div>
</div>