Tags

Purpose

Tags show categories for a piece of content. They can be actionable to allow them to be used in-line or as a component level control.

Requirements

Dismissible tag components require both dls.css and dls.js for functionality.

In-line Tags

Usage

In-line tags show customer or content-generated keywords used to label or categorize the content they accompany. They can be static or dismissible.

Specs - In-line Tags

Height = 18px
Width = Variable. The width is dependent on the character count.
Tag Fill = Gray 02 (light background) or White (dark background)
Tag Radius = 4px
Tag Text = Helvetica Neue Regular 12px, Line Height 18px, Gray 05
Glyph = Close (small), Gray 05
Class Name = .tag-inline

Tag Specs

Example - In-line Tags

In-line tag

Copy

<div class="row">
  <div class="col-xs-6 pad-tb flex flex-justify-center">
    <span class="tag-inline">In-line tag</span>
  </div>
  <div class="col-xs-6 pad-tb dls-gray-02-bg flex flex-justify-center">
    <span class="tag-inline dls-white-bg">In-line tag</span>
  </div>
</div>

Example - Dismissible In-line Tags

Copy

<div class="row">
  <div class="tag-container col-xs-6 flex flex-justify-center">
    <button class="close-tag-inline" data-toggle="dismissible" data-dismiss aria-label="Remove In-line tag">
      <span class="close-tag-inline-styles anim-fade in">
        In-line tag<i class="glyph glyph-sm" data-dls-glyph="close" title="Close icon"></i>
      </span>
    </button>
  </div>
  <div class="tag-container col-xs-6 dls-gray-02-bg flex flex-justify-center">
    <button class="close-tag-inline" data-toggle="dismissible" data-dismiss aria-label="Remove In-line tag">
      <span class="close-tag-inline-styles dls-white-bg anim-fade in">
        In-line tag<i class="glyph glyph-sm" data-dls-glyph="close" title="Close icon"></i>
      </span>
    </button>
  </div>
</div>

General Tags

Usage

These tags are used primarily in combination with functionality (e.g. displaying applied filters). Don’t use them in place of in-line tags.

Specs - General Tags

Height = 28px
Width = Variable. The width is dependent on the character count.
Tag Border = 1px, Bright Blue
Tag Radius = 4px
Tag Text = Helvetica Neue Regular 12px, Line Height 18px, Bright Blue
Glyph = Close (small), Bright Blue
Class Name = .tag-general

Tag Specs

Example - General Tag

Tag

Copy

<span class="tag-general">Tag</span>

Example - Dismissible General Tag

Copy

<button class="close-tag-general" data-toggle="dismissible" data-dismiss aria-label="Remove Tag">
  <span class="close-tag-general-styles anim-fade in">
    Tag <i class="glyph glyph-sm" data-dls-glyph="close" title="Close icon"></i>
  </span>
</button>

Functionality

If you are using dls.js, reference the attributes below for functionality.

Attribute Name	Options	Description	Required
`data-toggle`	`dismissible`	Creates a dismissible object; required for dls.js functionality.	yes
`data-dismiss`	`none`	Removes the component specified by data-toggle on click. Placed on the element that triggers the dismissible function.	no