Skip to content
MENU

Soracom

Design System

Tag

Options 

Basic usage 

div 

<div class="ds-tag">
  <span>Tag text</span>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-tag">
  <span>Tag text</span>
</div>

span (inline) 

To use a tag inline (within text content), apply ds-tag and options to a span element.

<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag"><span>consectetur</span></span>, <span class="ds-tag"><span>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag"><span>consectetur</span></span>, <span class="ds-tag"><span>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>

label and checkbox 

All text should be contained within the span element

<label class="ds-tag">
  <input type="checkbox">
  <span>First item</span>
</label>
<label class="ds-tag">
  <input type="checkbox">
  <span>Second item</span>
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label class="ds-tag">
  <input type="checkbox">
  <span>First item</span>
</label>
<label class="ds-tag">
  <input type="checkbox">
  <span>Second item</span>
</label>

label and radio 

<label class="ds-tag">
  <input type="radio" name="radio-basic" checked="checked">
  <span>First item</span>
</label>
<label class="ds-tag">
  <input type="radio" name="radio-basic">
  <span>Second item</span>
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label class="ds-tag">
  <input type="radio" name="radio-basic" checked="checked">
  <span>First item</span>
</label>
<label class="ds-tag">
  <input type="radio" name="radio-basic">
  <span>Second item</span>
</label>

Styles 

Default 

<!-- Div -->
<div class="ds-tag">
  <span>Tag text</span>
</div>
<!-- Span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag"><span>consectetur</span></span>, <span class="ds-tag">elit</span> Nulla vitae elit libero, a pharetra augue.</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- Div -->
<div class="ds-tag">
  <span>Tag text</span>
</div>
<!-- Span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag"><span>consectetur</span></span>, <span class="ds-tag">elit</span> Nulla vitae elit libero, a pharetra augue.</div>

Outline 

<!-- Div -->
<div class="ds-tag --outline">
  <span>Tag text</span>
</div>
<!-- Span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag --outline"><span>consectetur</span></span>, <span class="ds-tag --outline"><span>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- Div -->
<div class="ds-tag --outline">
  <span>Tag text</span>
</div>
<!-- Span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag --outline"><span>consectetur</span></span>, <span class="ds-tag --outline"><span>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>

Visual states 

Both tag styles (default and outline) adhere to 4x preset visual states - alert, warning, success and info.

Default style
<div class="ds-tag --alert">
  <span>Alert</span>
</div>
<div class="ds-tag --warning">
  <span>Warning</span>
</div>
<div class="ds-tag --success">
  <span>Success</span>
</div>
<div class="ds-tag --info">
  <span>Info</span>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-tag --alert">
  <span>Alert</span>
</div>
<div class="ds-tag --warning">
  <span>Warning</span>
</div>
<div class="ds-tag --success">
  <span>Success</span>
</div>
<div class="ds-tag --info">
  <span>Info</span>
</div>
Outline style
<div class="ds-tag --outline --alert">
  <span>Alert</span>
</div>
<div class="ds-tag --outline --warning">
  <span>Warning</span>
</div>
<div class="ds-tag --outline --success">
  <span>Success</span>
</div>
<div class="ds-tag --outline --info">
  <span>Info</span>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-tag --outline --alert">
  <span>Alert</span>
</div>
<div class="ds-tag --outline --warning">
  <span>Warning</span>
</div>
<div class="ds-tag --outline --success">
  <span>Success</span>
</div>
<div class="ds-tag --outline --info">
  <span>Info</span>
</div>

Component color 

Both tag styles (default and outline) support component color classes.

Default style
<div class="ds-tag --color-celeste">
  <span>Celeste</span>
</div>
<div class="ds-tag --color-celeste-light">
  <span>Celeste-light</span>
</div>
<div class="ds-tag --color-magenta">
  <span>Magenta</span>
</div>
<div class="ds-tag --color-ink-dark">
  <span>Ink-dark</span>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-tag --color-celeste">
  <span>Celeste</span>
</div>
<div class="ds-tag --color-celeste-light">
  <span>Celeste-light</span>
</div>
<div class="ds-tag --color-magenta">
  <span>Magenta</span>
</div>
<div class="ds-tag --color-ink-dark">
  <span>Ink-dark</span>
</div>
Outline style
<div class="ds-tag --outline --color-celeste">
  <span>Celeste</span>
</div>
<div class="ds-tag --outline --color-celeste-light">
  <span>Celeste-light</span>
</div>
<div class="ds-tag --outline --color-magenta">
  <span>Magenta</span>
</div>
<div class="ds-tag --outline --color-ink-dark">
  <span>Ink-dark</span>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-tag --outline --color-celeste">
  <span>Celeste</span>
</div>
<div class="ds-tag --outline --color-celeste-light">
  <span>Celeste-light</span>
</div>
<div class="ds-tag --outline --color-magenta">
  <span>Magenta</span>
</div>
<div class="ds-tag --outline --color-ink-dark">
  <span>Ink-dark</span>
</div>

Icons 

Add an additional class such as --icon-basic-user from the available icon modifier list.

<!-- Div -->
<div class="ds-tag --icon-basic-user">
  <span>Tag text</span>
</div>
<!-- Span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag --icon-basic-user"><span>consectetur</span></span>, <span class="ds-tag --icon-basic-user"><span>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- Div -->
<div class="ds-tag --icon-basic-user">
  <span>Tag text</span>
</div>
<!-- Span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag --icon-basic-user"><span>consectetur</span></span>, <span class="ds-tag --icon-basic-user"><span>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>

Size 

Default 

<div class="ds-tag">
  <span>Tag text</span>
</div>
<div class="ds-tag --outline --icon-basic-user">
  <span>Tag text</span>
</div>
<div class="ds-tag --icon-basic-user">
  <span><strong>Info</strong>Tag text</span>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-tag">
  <span>Tag text</span>
</div>
<div class="ds-tag --outline --icon-basic-user">
  <span>Tag text</span>
</div>
<div class="ds-tag --icon-basic-user">
  <span><strong>Info</strong>Tag text</span>
</div>

Medium 

<div class="ds-tag --medium">
  <span>Tag text</span>
</div>
<div class="ds-tag --medium --outline --icon-basic-user">
  <span>Tag text</span>
</div>
<div class="ds-tag --medium --icon-basic-user">
  <span><strong>Info</strong>Tag text</span>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-tag --medium">
  <span>Tag text</span>
</div>
<div class="ds-tag --medium --outline --icon-basic-user">
  <span>Tag text</span>
</div>
<div class="ds-tag --medium --icon-basic-user">
  <span><strong>Info</strong>Tag text</span>
</div>

Large 

<div class="ds-tag --large">
  <span>Tag text</span>
</div>
<div class="ds-tag --large --outline --icon-basic-user">
  <span>Tag text</span>
</div>
<div class="ds-tag --large --icon-basic-user">
  <span><strong>Info</strong>Tag text</span>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-tag --large">
  <span>Tag text</span>
</div>
<div class="ds-tag --large --outline --icon-basic-user">
  <span>Tag text</span>
</div>
<div class="ds-tag --large --icon-basic-user">
  <span><strong>Info</strong>Tag text</span>
</div>

Disabled state 

When using label elements with checkbox/radio inputs, set the disabled attribute on the input.

When using div/span elements, use the class --disabled.

Default style
<!-- Class: --disabled -->
<div class="ds-tag --disabled">
  <span>Div</span>
</div>
<!-- Attribute: disabled="disabled" -->
<label class="ds-tag">
  <input type="checkbox" disabled="disabled">
  <span>Checkbox</span>
</label>
<label class="ds-tag">
  <input type="radio" name="radio-basic" disabled="disabled">
  <span>Radio</span>
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- Class: --disabled -->
<div class="ds-tag --disabled">
  <span>Div</span>
</div>
<!-- Attribute: disabled="disabled" -->
<label class="ds-tag">
  <input type="checkbox" disabled="disabled">
  <span>Checkbox</span>
</label>
<label class="ds-tag">
  <input type="radio" name="radio-basic" disabled="disabled">
  <span>Radio</span>
</label>
Outline style
<!-- Class: --disabled -->
<div class="ds-tag --outline --disabled">
  <span>Div</span>
</div>
<!-- Attribute: disabled="disabled" -->
<label class="ds-tag --outline">
  <input type="checkbox" disabled="disabled">
  <span>Checkbox</span>
</label>
<label class="ds-tag --outline">
  <input type="radio" name="radio-basic" disabled="disabled">
  <span>Radio</span>
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- Class: --disabled -->
<div class="ds-tag --outline --disabled">
  <span>Div</span>
</div>
<!-- Attribute: disabled="disabled" -->
<label class="ds-tag --outline">
  <input type="checkbox" disabled="disabled">
  <span>Checkbox</span>
</label>
<label class="ds-tag --outline">
  <input type="radio" name="radio-basic" disabled="disabled">
  <span>Radio</span>
</label>

Strong content 

If a tag contains a strong element, it will be styled differently.

Default style
<!-- Div -->
<div class="ds-tag">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag"><span><strong>Info</strong>consectetur</span></span>, <span class="ds-tag"><span><strong>Info</strong>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>
<!-- Label/checkbox -->
<label class="ds-tag">
  <input type="checkbox">
  <span><strong>Info</strong>Tag text</span>
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- Div -->
<div class="ds-tag">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag"><span><strong>Info</strong>consectetur</span></span>, <span class="ds-tag"><span><strong>Info</strong>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>
<!-- Label/checkbox -->
<label class="ds-tag">
  <input type="checkbox">
  <span><strong>Info</strong>Tag text</span>
</label>
Outline style
<!-- Div -->
<div class="ds-tag --outline">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag --outline"><span><strong>Info</strong>consectetur</span></span>, <span class="ds-tag --outline"><span><strong>Info</strong>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>
<!-- Label/checkbox -->
<label class="ds-tag --outline">
  <input type="checkbox">
  <span><strong>Info</strong>Tag text</span>
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- Div -->
<div class="ds-tag --outline">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag --outline"><span><strong>Info</strong>consectetur</span></span>, <span class="ds-tag --outline"><span><strong>Info</strong>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>
<!-- Label/checkbox -->
<label class="ds-tag --outline">
  <input type="checkbox">
  <span><strong>Info</strong>Tag text</span>
</label>

No case 

This option will prevent displaying the text content as all upper-case.

It’s generally recommended to use this option only if essential. In addition it’s recommended when using this option, that the text in the strong element is entered in upper-case if possible.

<div class="ds-tag --no-case">
  <span><strong>INFO</strong>Tag text</span>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-tag --no-case">
  <span><strong>INFO</strong>Tag text</span>
</div>

Animation 

Animation states for tags should only be used sparingly to indicate temporary states (such as sending/receiving data or waiting for a server side process to complete).

--pulse
<div class="ds-tag --pulse">
  <span>Pulse</span>
</div>
<div class="ds-tag --success --pulse">
  <span>Pulse</span>
</div>
<div class="ds-tag --outline --pulse">
  <span>Pulse</span>
</div>
<div class="ds-tag --outline --success --pulse">
  <span>Pulse</span>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-tag --pulse">
  <span>Pulse</span>
</div>
<div class="ds-tag --success --pulse">
  <span>Pulse</span>
</div>
<div class="ds-tag --outline --pulse">
  <span>Pulse</span>
</div>
<div class="ds-tag --outline --success --pulse">
  <span>Pulse</span>
</div>
--glow
<div class="ds-tag --glow">
  <span>Glow</span>
</div>
<div class="ds-tag --success --glow">
  <span>Glow</span>
</div>
<div class="ds-tag --outline --glow">
  <span>Glow</span>
</div>
<div class="ds-tag --outline --success --glow">
  <span>Glow</span>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-tag --glow">
  <span>Glow</span>
</div>
<div class="ds-tag --success --glow">
  <span>Glow</span>
</div>
<div class="ds-tag --outline --glow">
  <span>Glow</span>
</div>
<div class="ds-tag --outline --success --glow">
  <span>Glow</span>
</div>
<div class="ds-tag --blink">
  <span>Blink</span>
</div>
<div class="ds-tag --success --blink">
  <span>Blink</span>
</div>
<div class="ds-tag --outline --blink">
  <span>Blink</span>
</div>
<div class="ds-tag --outline --success --blink">
  <span>Blink</span>
</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<div class="ds-tag --blink">
  <span>Blink</span>
</div>
<div class="ds-tag --success --blink">
  <span>Blink</span>
</div>
<div class="ds-tag --outline --blink">
  <span>Blink</span>
</div>
<div class="ds-tag --outline --success --blink">
  <span>Blink</span>
</div>

Examples 

Styled content 

<!-- Default style div -->
<div class="ds-tag">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Default style span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag"><span><strong>Info</strong>consectetur</span></span>, <span class="ds-tag"><span><strong>Info</strong>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>
<!-- Outline style div -->
<div class="ds-tag --outline">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Outline style span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag --outline"><span><strong>Info</strong>consectetur</span></span>, <span class="ds-tag --outline"><span><strong>Info</strong>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- Default style div -->
<div class="ds-tag">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Default style span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag"><span><strong>Info</strong>consectetur</span></span>, <span class="ds-tag"><span><strong>Info</strong>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>
<!-- Outline style div -->
<div class="ds-tag --outline">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Outline style span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag --outline"><span><strong>Info</strong>consectetur</span></span>, <span class="ds-tag --outline"><span><strong>Info</strong>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>

Styled content with icons 

<!-- Default style div -->
<div class="ds-tag --icon-basic-user">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Default style span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag --icon-basic-user"><span><strong>Info</strong>consectetur</span></span>, <span class="ds-tag --icon-basic-user"><span><strong>Info</strong>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>

<!-- Outline style div -->
<div class="ds-tag --outline --icon-basic-user">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Outline style span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag --outline --icon-basic-user"><span><strong>Info</strong>consectetur</span></span>, <span class="ds-tag --outline --icon-basic-user"><span><strong>Info</strong>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- Default style div -->
<div class="ds-tag --icon-basic-user">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Default style span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag --icon-basic-user"><span><strong>Info</strong>consectetur</span></span>, <span class="ds-tag --icon-basic-user"><span><strong>Info</strong>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>

<!-- Outline style div -->
<div class="ds-tag --outline --icon-basic-user">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Outline style span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag --outline --icon-basic-user"><span><strong>Info</strong>consectetur</span></span>, <span class="ds-tag --outline --icon-basic-user"><span><strong>Info</strong>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>

Styled content with icons and visual state 

<!-- Default style div -->
<div class="ds-tag --alert --icon-basic-user">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Default style span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag --alert --icon-basic-user"><span><strong>Info</strong>consectetur</span></span>, <span class="ds-tag --alert --icon-basic-user"><span><strong>Info</strong>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>

<!-- Outline style div -->
<div class="ds-tag --outline --alert --icon-basic-user">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Outline style span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag --outline --alert --icon-basic-user"><span><strong>Info</strong>consectetur</span></span>, <span class="ds-tag --outline --alert --icon-basic-user"><span><strong>Info</strong>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- Default style div -->
<div class="ds-tag --alert --icon-basic-user">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Default style span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag --alert --icon-basic-user"><span><strong>Info</strong>consectetur</span></span>, <span class="ds-tag --alert --icon-basic-user"><span><strong>Info</strong>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>

<!-- Outline style div -->
<div class="ds-tag --outline --alert --icon-basic-user">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Outline style span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag --outline --alert --icon-basic-user"><span><strong>Info</strong>consectetur</span></span>, <span class="ds-tag --outline --alert --icon-basic-user"><span><strong>Info</strong>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>

Styled content with icons and component colors 

<!-- Default style div -->
<div class="ds-tag --color-celeste-light --icon-basic-user">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Default style span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag --color-celeste-light --icon-basic-user"><span><strong>Info</strong>consectetur</span></span>, <span class="ds-tag --color-celeste-light --icon-basic-user"><span><strong>Info</strong>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>

<!-- Outline style div -->
<div class="ds-tag --outline --color-celeste --icon-basic-user">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Outline style span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag --outline --color-celeste --icon-basic-user"><span><strong>Info</strong>consectetur</span></span>, <span class="ds-tag --outline --color-celeste --icon-basic-user"><span><strong>Info</strong>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- Default style div -->
<div class="ds-tag --color-celeste-light --icon-basic-user">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Default style span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag --color-celeste-light --icon-basic-user"><span><strong>Info</strong>consectetur</span></span>, <span class="ds-tag --color-celeste-light --icon-basic-user"><span><strong>Info</strong>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>

<!-- Outline style div -->
<div class="ds-tag --outline --color-celeste --icon-basic-user">
  <span><strong>Info</strong>Tag text</span>
</div>
<!-- Outline style span (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <span class="ds-tag --outline --color-celeste --icon-basic-user"><span><strong>Info</strong>consectetur</span></span>, <span class="ds-tag --outline --color-celeste --icon-basic-user"><span><strong>Info</strong>elit</span></span> Nulla vitae elit libero, a pharetra augue.</div>

Styled content with checkboxes 

<!-- Default style label -->
<label class="ds-tag">
  <input type="checkbox">
  <span><strong>Info</strong>Tag text</span>
</label>
<!-- Default style label (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <label class="ds-tag"><input type="checkbox"><span><strong>Info</strong>Tag text</span></label>, <label class="ds-tag"><input type="checkbox"><span><strong>Info</strong>Tag text</span></label>
 Nulla vitae elit libero, a pharetra augue.</div>
<!-- Outline style label -->
<label class="ds-tag --outline">
  <input type="checkbox">
  <span><strong>Info</strong>Tag text</span>
</label>
<!-- Outline style label (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <label class="ds-tag --outline"><input type="checkbox"><span><strong>Info</strong>Tag text</span></label>, <label class="ds-tag --outline"><input type="checkbox"><span><strong>Info</strong>Tag text</span></label> Nulla vitae elit libero, a pharetra augue.</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- Default style label -->
<label class="ds-tag">
  <input type="checkbox">
  <span><strong>Info</strong>Tag text</span>
</label>
<!-- Default style label (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <label class="ds-tag"><input type="checkbox"><span><strong>Info</strong>Tag text</span></label>, <label class="ds-tag"><input type="checkbox"><span><strong>Info</strong>Tag text</span></label>
 Nulla vitae elit libero, a pharetra augue.</div>
<!-- Outline style label -->
<label class="ds-tag --outline">
  <input type="checkbox">
  <span><strong>Info</strong>Tag text</span>
</label>
<!-- Outline style label (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <label class="ds-tag --outline"><input type="checkbox"><span><strong>Info</strong>Tag text</span></label>, <label class="ds-tag --outline"><input type="checkbox"><span><strong>Info</strong>Tag text</span></label> Nulla vitae elit libero, a pharetra augue.</div>

Styled content with radio 

<!-- Default style label -->
<label class="ds-tag">
  <input type="radio" name="example-radio-1" checked="checked">
  <span><strong>Info</strong>Tag text</span>
</label>
<!-- Default style label (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <label class="ds-tag"><input type="radio" name="example-radio-1"><span><strong>Info</strong>Tag text</span></label>, <label class="ds-tag"><input type="radio" name="example-radio-1"><span><strong>Info</strong>Tag text</span></label>
 Nulla vitae elit libero, a pharetra augue.</div>
<!-- Outline style label -->
<label class="ds-tag --outline">
  <input type="radio" name="example-radio-1">
  <span><strong>Info</strong>Tag text</span>
</label>
<!-- Outline style label (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <label class="ds-tag --outline"><input type="radio" name="example-radio-1"><span><strong>Info</strong>Tag text</span></label>, <label class="ds-tag --outline"><input type="radio" name="example-radio-1"><span><strong>Info</strong>Tag text</span></label> Nulla vitae elit libero, a pharetra augue.</div>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<!-- Default style label -->
<label class="ds-tag">
  <input type="radio" name="example-radio-1" checked="checked">
  <span><strong>Info</strong>Tag text</span>
</label>
<!-- Default style label (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <label class="ds-tag"><input type="radio" name="example-radio-1"><span><strong>Info</strong>Tag text</span></label>, <label class="ds-tag"><input type="radio" name="example-radio-1"><span><strong>Info</strong>Tag text</span></label>
 Nulla vitae elit libero, a pharetra augue.</div>
<!-- Outline style label -->
<label class="ds-tag --outline">
  <input type="radio" name="example-radio-1">
  <span><strong>Info</strong>Tag text</span>
</label>
<!-- Outline style label (inline) -->
<div class="ds-text">Lorem ipsum dolor sit amet, <label class="ds-tag --outline"><input type="radio" name="example-radio-1"><span><strong>Info</strong>Tag text</span></label>, <label class="ds-tag --outline"><input type="radio" name="example-radio-1"><span><strong>Info</strong>Tag text</span></label> Nulla vitae elit libero, a pharetra augue.</div>

Checkbox large outline style 

This combination mirrors the previously available ds-checkbox--tags. Additional features and options are shown above.

<label class="ds-tag --large --outline --no-case">
  <input type="checkbox">
  <span>Tag text</span>
</label>
<label class="ds-tag --large --outline --no-case">
  <input type="checkbox">
  <span>Tag text</span>
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label class="ds-tag --large --outline --no-case">
  <input type="checkbox">
  <span>Tag text</span>
</label>
<label class="ds-tag --large --outline --no-case">
  <input type="checkbox">
  <span>Tag text</span>
</label>

Radio large outline style 

<label class="ds-tag --large --outline --no-case">
  <input type="radio" name="example-radio-2" checked="checked">
  <span>Tag text</span>
</label>
<label class="ds-tag --large --outline --no-case">
  <input type="radio" name="example-radio-2">
  <span>Tag text</span>
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label class="ds-tag --large --outline --no-case">
  <input type="radio" name="example-radio-2" checked="checked">
  <span>Tag text</span>
</label>
<label class="ds-tag --large --outline --no-case">
  <input type="radio" name="example-radio-2">
  <span>Tag text</span>
</label>

Checkbox medium outline style 

<label class="ds-tag --medium --outline --no-case">
  <input type="checkbox">
  <span>Tag text</span>
</label>
<label class="ds-tag --medium --outline --no-case">
  <input type="checkbox">
  <span>Tag text</span>
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label class="ds-tag --medium --outline --no-case">
  <input type="checkbox">
  <span>Tag text</span>
</label>
<label class="ds-tag --medium --outline --no-case">
  <input type="checkbox">
  <span>Tag text</span>
</label>

Radio medium outline style 

<label class="ds-tag --medium --outline --no-case">
  <input type="radio" name="example-radio-3" checked="checked">
  <span>Tag text</span>
</label>
<label class="ds-tag --medium --outline --no-case">
  <input type="radio" name="example-radio-3">
  <span>Tag text</span>
</label>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px
<label class="ds-tag --medium --outline --no-case">
  <input type="radio" name="example-radio-3" checked="checked">
  <span>Tag text</span>
</label>
<label class="ds-tag --medium --outline --no-case">
  <input type="radio" name="example-radio-3">
  <span>Tag text</span>
</label>