You are using an unsupported version of Internet Explorer. Eventene supports modern browsers like Chrome, Firefox or Edge, all available within Windows 10.
Atoms
Colors

All the colors you may use when building a component.

Item Note
Primary Colors

Should be used on regular actions
Secondary Colors

Apply this to neutral elements like huge background areas and labels
Tertiary Colors

Only used to attention aspects such as warning, danger, success messages or buttons
Demo (Open in a new tab) 
<div class="s-spacer">
  <div>
  <h5>Solid Colors</h5>
  <hr>
</div>

<!-- DEMO CLASSES ONLY -->
<span class="s-color s-color--first"></span>

<span class="s-color s-color--second"></span>

<span class="s-color s-color--third"></span>

<span class="s-color s-color--fourth"></span>

<span class="s-color s-color--fifth"></span>

<span class="s-color s-color--sixth"></span>

<span class="s-color s-color--seventh"></span>

<span class="s-color s-color--eighth"></span>

<span class="s-color s-color--ninth"></span>

<div>
  <h5>Gradient Mixes</h5>
  <hr>
</div>

<!-- DEMO CLASSES ONLY -->
<span class="s-color s-color--sky-blue"></span>

<span class="s-color s-color--turquoise-green"></span>

<span class="s-color s-color--yellow-orange"></span>

<span class="s-color s-color--purple-blue"></span>

<span class="s-color s-color--red-wine"></span>

</div>
// Color List
#FFFFFF;
#FABE58;
#FBD18A;
#F5FFFF;
#F8F9FB;
#F3A090;
#EEEEEE;
#EFF1F7;
#ECEFF6;
#EC644B;
#E2E2E2;
#DDDDDD;
#DDDEEE;
#DADCE5;
#BEC8E0;
#BEC5CF;
#BDBDBD;
#959CA6;
#6EDE9C;
#6B7C93;
#5CD0C8;
#56CCF2;
#2E7FED;
#2C2F30;
#26A65B;
#1A1C1C;
#1ABC9C;
#00C1FF;
#000000;

// Misc Colors
#E05342;
#3B5999;

// Gradient Mixes
linear-gradient( 135deg, #ABDCFF 10%, #0396FF 100%);
linear-gradient( -135deg, #03FADA 10%, #736EFE 100%);
linear-gradient( 135deg, #FFD3A5 10%, #FD6585 100%);
linear-gradient( 135deg, #97ABFF 10%, #123597 100%);
linear-gradient( 135deg, #F05F57 10%, #360940 100%);
Headings

The <h1> to <h6> tags are used to define HTML headings.

Item Note
h1

defines the most important heading
h6

defines the least important heading
Demo (Open in a new tab) 
<div class="s-spacer">
  

<h1>Heading Tag 1</h1>

<h2>Heading Tag 2</h2>

<h3>Heading Tag 3</h3>

<h4>Heading Tag 4</h4>

<h5>Heading Tag 5</h5>

<h6>Heading Tag 6</h6>

</div>
h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", Arial, sans-serif;
  font-weight: normal;
  line-height: 1.1;
  margin: 20px 0 10px;
  text-transform: capitalize;
}

h1 {
  font-size: 60px;
}

h2 {
  font-size: 48px;
}

h3 {
  font-size: 36px;
}

h4 {
  font-size: 30px;
}

h5 {
  font-size: 24px;
}

h6 {
  font-size: 18px;
}
Texts

Body texts of the site.

Item Note
paragraph

Regular size
label

Must be block and bold
Demo (Open in a new tab) 
<div class="s-spacer">
  <p>Hey I'm a paragraph! The quick brown fox jumps over the <strong>lazy</strong> dog. Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. <a href="#">Click here</a> for more info.</p>

<label>Label:</label>

<p class="is-danger">Red Text</p>

<p class="is-success">Green Text</p>

<p class="is-warning">Yellow Text</p>
</div>
body {
  color: #6B7C93;
  font-family: "Open Sans", Verdana, sans-serif;
  @include font-size($fs-body);
  line-height: 1.4;
}

label {
  font-weight: bold;
  display: block;
  margin: 0 0 8px 13px;
  text-transform: uppercase;
}

strong {
  font-weight: bold;
}

a {
  color: #2E7FED;
  cursor: pointer;
  transition: all .2s linear;
}
Buttons

The button component should be used as the call-to-action in a form, or as a user interaction mechanism. Generally speaking, a button should not be used when a link would do the trick.

Item Note
content

(mandatory) the content of the button
type

(optional) either button or submit for the type HTML attribute (default to button)
class

(mandatory) to specify which modifier you need
Demo (Open in a new tab) 
<div class="s-spacer">
  <button class="button" type="button">Button</button>

<button class="button button--outline" type="button">Outline</button>

<button class="button button--turquoise" type="button">Turquoise</button>

<button class="button button--green" type="button">Green</button>

<button class="button button--red" type="button">Red</button>

<button class="button button--yellow" type="button">Yellow</button>

<a href="#" class="button button--black button--dark" type="button">Black</a>

<a href="#" class="button button--white button--light" type="button">White</a>

<a href="#" class="button button--sky button--light" type="button">Sky</a>

<a href="#" class="button button--gray" type="button">Gray</a>

<button class="button" type="button" disabled="">Disabled</button>

<a href="#" class="button" type="button">Link</a>

<a href="#" class="button button--sky-blue" type="button">Sky Blue</a>

<a href="#" class="button button--turquoise-green" type="button">Turquoise Green</a>

<a href="#" class="button button--yellow-orange" type="button">Yellow Orange</a>

<a href="#" class="button button--purple-blue" type="button">Purple Blue</a>

<a href="#" class="button button--red-wine" type="button">Red Wine</a>

<button class="button button--full" type="button">Full Size</button>

<button class="button button--circle button--green" type="button">
  <svg class="icon icon--white button__icon">
    <use xlink:href="/unicorn/assets/icons/icons.svg#icon-plus" />
  </svg>
</button>

<button class="button button--circle button--turquoise" type="button">
  <svg class="icon icon--white button__icon">
    <use xlink:href="/unicorn/assets/icons/icons.svg#icon-filters" />
  </svg>
</button>

<button class="button button--circle button--red" type="button" disabled="">
  <svg class="icon icon--red button__icon">
    <use xlink:href="/unicorn/assets/icons/icons.svg#icon-block" />
  </svg>
</button>

<button class="button button--facebook">
  <div class="button__holder">
    <svg class="icon icon--white button__icon">
      <use xlink:href="/unicorn/assets/icons/icons.svg#icon-facebook" />
    </svg>
    <span class="button__text">Link Facebook</span>
  </div>
</button>

<button class="button button--square" type="button">Square
</button>

<button class="button button--square button--outline" type="button">Outline Square
</button>



</div>
.button {
  position: relative;
}

.button--full {
  margin: 15px 0;
  width: 100%;
}

.button--outline,
.button--stroke {
  background-color: transparent;
  border: solid 2px;
  padding: 5px 8px;
}

.button--outline {
  border-color: #2E7FED;
  color: #2E7FED;
}

.button--outline:hover,
.button--outline:active,
.button--outline:focus {
  color: #FFF;
}

.button--outline:hover {
  background-color: #2E7FED;
}

.button--outline:active,
.button--outline:focus {
  background-color: #1265d6;
  border-color: #1265d6;
}

.button--stroke,
.button--circle {
  border-radius: 50%;
}

.button--stroke {
  height: 27px;
  width: 27px;
  border-color: #2C2F30;
}

.button--stroke:hover,
.button--stroke:active,
.button--stroke:focus {
  background-color: transparent;
  border-color: #515658;
}

.button--light,
.button--light:hover,
.button--light:active,
.button--light:focus {
  color: #2C2F30;
}

.button--circle {
  height: 42px;
  width: 42px;
  min-width: 42px;
}

.button--square {
  border-radius: 2px;
}

.button--turquoise {
  background-color: #1ABC9C;
}

.button--turquoise:hover {
  background-color: #17a689;
}

.button--turquoise:active,
.button--turquoise:focus {
  background-color: #117964;
}

.button--gray {
  background-color: #959CA6;
}

.button--gray:hover {
  background-color: #878f9a;
}

.button--gray:active,
.button--gray:focus {
  background-color: #6d7582;
}

.button--green {
  background-color: #26A65B;
}

.button--green:hover {
  background-color: #219150;
}

.button--green:active,
.button--green:focus {
  background-color: #186839;
}

.button--red {
  background-color: #EC644B;
}

.button--red:hover {
  background-color: #ea5034;
}

.button--red:active,
.button--red:focus {
  background-color: #d43416;
}

.button--yellow {
  background-color: #FABE58;
}

.button--yellow:hover {
  background-color: #f9b43f;
}

.button--yellow:active,
.button--yellow:focus {
  background-color: #f8a10e;
}

.button--black {
  background-color: #2C2F30;
}

.button--black:hover {
  background-color: #202223;
}

.button--black:active,
.button--black:focus {
  background-color: #070808;
}

.button--white {
  background-color: #FFF;
}

.button--white:hover {
  background-color: #f2f2f2;
}

.button--white:active,
.button--white:focus {
  background-color: #d9d9d9;
}

.button--sky {
  background-color: #ECEFF6;
}

.button--sky:hover {
  background-color: #dbe0ee;
}

.button--sky:active,
.button--sky:focus {
  background-color: #b8c3dd;
}

.button--transparent,
.button--transparent:hover,
.button--transparent:active,
.button--transparent:focus {
  background-color: transparent;
  box-shadow: none;
}

.button--sky-blue,
.button--sky-blue:hover,
.button--sky-blue:active,
.button--sky-blue:focus {
  background-image: linear-gradient(135deg, #ABDCFF 10%, #0396FF 100%);
}

.button--turquoise-green,
.button--turquoise-green:hover,
.button--turquoise-green:active,
.button--turquoise-green:focus {
  background-image: linear-gradient(-135deg, #03FADA 10%, #736EFE 100%);
}

.button--yellow-orange,
.button--yellow-orange:hover,
.button--yellow-orange:active,
.button--yellow-orange:focus {
  background-image: linear-gradient(135deg, #FFD3A5 10%, #FD6585 100%);
}

.button--purple-blue,
.button--purple-blue:hover,
.button--purple-blue:active,
.button--purple-blue:focus {
  background-image: linear-gradient(135deg, #97ABFF 10%, #123597 100%);
}

.button--red-wine,
.button--red-wine:hover,
.button--red-wine:active,
.button--red-wine:focus {
  background-image: linear-gradient(135deg, #F05F57 10%, #360940 100%);
}
Inputs

Form inputs to entry text information.

Item Note
fieldset

(mandatory) to limit the error / success messages area
placeholder

(optional)
Demo (Open in a new tab) 
<div class="s-spacer">
  <fieldset>
  <input type="email" value="john@doe.com" />
</fieldset>

<fieldset>
  <input type="password" value="*****" disabled/>
</fieldset>

<fieldset>
  <input type="text" placeholder="Full width" class="input input--full" />
</fieldset>

<fieldset>
  <input type="search" placeholder="Invisible" class="input input--invisible" />
</fieldset>

<fieldset>
  <textarea name="desc" id="desc" cols="100" rows="10"></textarea>
</fieldset>

</div>
[type="email"], [type="number"], [type="password"],
[type="search"], [type="tel"], [type="text"], [type="url"],
[type="color"], [type="date"], [type="datetime"],
[type="datetime-local"], [type="month"],
[type="time"], [type="week"], textarea {
  border: 0;
  border-radius: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.275);
  margin: 0 0 15px;
  padding: 7px 13px;
  transition: all .2s linear;
}

[type="email"], [type="number"], [type="password"],
[type="search"], [type="tel"], [type="text"], [type="url"],
[type="color"], [type="date"], [type="datetime"],
[type="datetime-local"], [type="month"],
[type="time"], [type="week"] {
  height: 33px;
}

.input:invalid:not(.is-empty):not(:focus),
.input:invalid.is-submitted.is-required.is-empty {
  border-color: #EC644B;
  color: #EC644B;
}

.input--invisible, .input--editable,
.input--invisible:hover, .input--editable:hover,
.input--invisible:focus, .input--editable:focus {
  background-color: transparent;
  box-shadow: none;
}

.input--editable {
  border-bottom: 1px solid #bec8e0;
  outline: none;
  width: 100%;
}

.input--editable.is-actived,
.input--editable:focus {
  border-bottom-color: #2C2F30;
}

.input--full {
  width: 100%;
}
Selects

Select represents a control that presents a menu of options. The options within the menu are represented by <option> elements, which can be grouped by <optgroup> elements. Options can be pre-selected for the user.

Item Note
ID

(mandatory)
name

(mandatory)
.select--invisible

Gives you a select with no background color
.select--full

Makes the select fully width
Demo (Open in a new tab) 
<div class="s-spacer">
  <select name="devices" id="devices">
  <option value="" disabled selected>Select Default</option>
  <option value="iphone">iPhone</option>
  <option value="android">Android</option>
  <option value="wp">Windows Phone</option>
</select>

<br/>

<select class="select select--rounded" name="fruits" id="fruits">
  <option value="" disabled selected>Select Rounded</option>
  <option value="apple">Apple</option>
  <option value="lemon">Lemon</option>
  <option value="orange">Orange</option>
</select>

<br/>

<select class="select select--invisible" name="colors" id="colors">
  <option value="" disabled selected>Select Invisible</option>
  <option value="black">Black</option>
  <option value="blue">Blue</option>
  <option value="white">White</option>
</select>

<br/>

<select class="select select--full" name="frameworks" id="frameworks">
  <option value="" disabled selected>Select Full</option>
  <option value="vue">Vue js</option>
  <option value="angular">Angular js</option>
  <option value="react">React</option>
</select>

</div>
select, .select {
  appearance: none;
  background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg…052%201.805L13.916%2014.14c-.24.256-.573.4-.922.4z%22%2F%3E%3C%2Fsvg%3E%0A) right/15px no-repeat #FFF;
  border: 0;
  border-right: 10px solid #FFF;
  border-radius: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.275);
  cursor: pointer;
  height: 40px;
  margin-bottom: 20px;
  max-width: 100%;
  padding: 7px 25px 7px 15px;
  transition: all .2s linear;
  width: auto;
}

.select--light {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224.124%22%20height%3D%2214.06%22%20viewBox%3D%220%200%2024.124%2014.06%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%20id%3D%22_-e-down%22%20data-name%3D%22-e-down%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M468%2C8515.54a1.246%2C1.246%2C0%2C0%2C1-.922-0.4l-10.782-11.5a1.271%2C1.271%2C0%2C0%2C1%2C1.845-1.75L468%2C8512.4l9.859-10.51a1.271%2C1.271%2C0%2C0%2C1%2C1.845%2C1.75l-10.782%2C11.5A1.246%2C1.246%2C0%2C0%2C1%2C468%2C8515.54Z%22%20transform%3D%22translate(-455.938%20-8501.47)%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  color: #FFF;
}

.select--invisible,
.select--invisible:focus,
.select--invisible:hover {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

.select--full {
  width: 100%;
}
Checkboxes

A check box allowing single values to be selected / unselected.

Item Note
.checkbox

(mandatory) to make custom styles appearing
onclick=""

(mandatory) required for older iOS and Opera Mini support.
Demo (Open in a new tab) 
<div class="s-spacer">
  <fieldset>
  <input name="vegetables" id="vegetables" type="checkbox" class="checkbox" checked>
  <label for="vegetables" class="" onclick="">Vegetables</label>
</fieldset>

<fieldset>
  <input name="fruits" id="fruits" type="checkbox" class="checkbox">
  <label for="fruits" class="" onclick="">Fruits</label>
</fieldset>

</div>
.checkbox + label {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  margin-right: 10px;
  min-height: 40px;
  position: relative;
  outline: none;
}

.checkbox + label::before {
  background-color: #DDD;
  background-image: url("data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNjExLjk5IDYxMS45OSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjExLjk5IDYxMS45OTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnIGlkPSJfeDM5X18zNF8iPgoJCTxnPgoJCQk8cGF0aCBkPSJNNTg5LjEwNSw4MC42M2MtMzAuNTEzLTMxLjEyNS03OS45NjUtMzEuMTI1LTExMC40NzgsMEwyMDIuNDIyLDM2Mi4zNDRsLTY5LjA2MS03MC40MzggICAgIGMtMzAuNTEzLTMxLjEyNS03OS45NjUtMzEuMTI1LTExMC40NzgsMGMtMzAuNTEzLDMxLjEyNS0zMC41MTMsODEuNTcyLDAsMTEyLjY3OGwxMjQuMjksMTI2Ljc3NiAgICAgYzMwLjUxMywzMS4xMjUsNzkuOTY1LDMxLjEyNSwxMTAuNDc4LDBsMzMxLjQ1My0zMzguMDMzQzYxOS42MTksMTYyLjIwMiw2MTkuNjE5LDExMS43NTUsNTg5LjEwNSw4MC42M3oiIGZpbGw9IiNGRkZGRkYiLz4KCQk8L2c+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==");
  border: 2px solid #FFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.275);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0;
  border-radius: 20px;
  content: '';
  display: inline-block;
  height: 20px;
  margin-right: 15px;
  position: relative;
  transition: all .175s linear;
  vertical-align: bottom;
  width: 30px;
}

.checkbox:checked + label::before {
  background-color: #26A65B;
  background-size: 12px;
}
Radios

A radio button, allowing a single value to be selected out of multiple choices.

Item Note
.radio

(mandatory) to make custom styles appearing
onclick=""

(mandatory) required for older iOS and Opera Mini support.
Demo (Open in a new tab) 
<div class="s-spacer">
  <form action="" method="post" id="weather" name="weather">
  <fieldset>
    <input class="radio" id="small" name="view" type="radio" checked>
    <label for="small" onclick="">Small</label>
    <input class="radio" id="big" name="view" type="radio">
    <label for="big" onclick="">Big</label>
  </fieldset>
</form>

<form action="" method="post" id="periods" name="periods">
  <fieldset>
    <input class="radio" id="month" name="view" type="radio" checked>
    <label for="month" onclick="">Month</label>

    <input class="radio" id="week" name="view" type="radio">
    <label for="week" onclick="">Week</label>

    <input class="radio" id="day" name="view" type="radio">
    <label for="day" onclick="">Day</label>
  </fieldset>
</form>

<form action="" method="post" id="sections" name="sections">
  <fieldset >

    <input class="radio" id="left" name="view" type="radio">
    <label for="left" onclick="">Left</label>

    <input class="radio" id="top" name="view" type="radio">
    <label for="top" onclick="">Top</label>

    <input class="radio" id="center" name="view" type="radio" checked>
    <label for="center" onclick="">Center</label>

    <input class="radio" id="bottom" name="view" type="radio">
    <label for="bottom" onclick="">Bottom</label>

    <input class="radio" id="right" name="view" type="radio">
    <label for="right" onclick="">Right</label>

  </fieldset>
</form>

</div>
.radio + label {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  margin-right: 10px;
  min-height: 40px;
  position: relative;
  outline: none;
}

.radio + label::before,
.radio + label::after {
  border-radius: 50%;
  transition: all .2s linear;
}

.radio + label::before {
  background-color: #DDD;
  border: 2px solid #FFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.275);
  content: '';
  display: inline-block;
  height: 20px;
  margin-right: 15px;
  position: relative;
  vertical-align: bottom;
}

.radio + label::after {
  background-color: #DDD;
  height: 10px;
  content: '';
  left: 7px;
  position: absolute;
  top: 15px;
  transform: scale(0);
  width: 10px;
}

.radio:checked + label::before {
  background-color: #26A65B;
}

.radio:checked + label::after {
  background-color: #FFF;
  transform: scale(1);
}
Tags

Small count and labeling component.

Item Note
.tag

(mandatory) to set the styles properly
Demo (Open in a new tab) 
<div class="s-spacer">
  <div>
  <h5>States</h5>
  <hr>
</div>

<span class="tag tag--success">Success</span>

<span class="tag tag--warning">Warning</span>

<span class="tag tag--info">Info</span>

<span class="tag tag--danger">Danger</span>

<div>
  <h5>Sizes</h5>
  <hr>
</div>

<span class="tag">Default</span>

<span class="tag tag--tighter">Tighter</span>

<div>
  <h5>Colors</h5>
  <hr>
</div>

<span class="tag tag--concrete">Concrete</span>

<span class="tag tag--dark-gray">Dark Gray</span>

<span class="tag tag--gray">Gray</span>

<span class="tag tag--silver-sand">Silver Sand</span>

<span class="tag tag--light-blue">Light Blue</span>

<span class="tag tag--malibu-blue">Malibu Blue</span>

<span class="tag tag--blue">Blue</span>

<span class="tag tag--green">Green</span>

<span class="tag tag--java-green">Java Green</span>

<span class="tag tag--wisteria-purple">Wisteria Purple</span>

<span class="tag tag--shocking-pink">Shocking Pink</span>

<span class="tag tag--red">Red</span>

<span class="tag tag--cranberry">Cranberry</span>

<span class="tag tag--vivid-tangerine">Vivid Tangerine</span>

<span class="tag tag--wewak-salmon">Wewak Salmon</span>

<span class="tag tag--cream-can-yellow">Cream Can Yellow</span>

<span class="tag tag--transparent">Transparent</span>

</div>
.tag {
  background-color: #FFF;
  border-radius: 6px;
  border: 1px solid #BEC8E0;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.275);
  color: #6B7C93;
  display: inline-block;
  line-height: 1;
  padding: 8px;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
Badges

Small icon and text representation component.

Item Note
.badge

(Mandatory) main class that you should combine with one of the modifiers below.
sizes

.badge--small (39), .badge--medium (48), .badge--big (96)
Demo (Open in a new tab) 
<div class="s-spacer">
  <div>
  <h5>Icon Badges</h5>
  <hr>
</div>

<span class="badge badge--small badge--info"></span>

<span class="badge badge--small badge--text"></span>

<span class="badge badge--small badge--number"></span>

<span class="badge badge--small badge--multiple"></span>

<span class="badge badge--small badge--single"></span>

<span class="badge badge--small badge--rank"></span>

<span class="badge badge--small badge--email"></span>

<span class="badge badge--small badge--datetime"></span>

<span class="badge badge--small badge--phone"></span>

<span class="badge badge--small badge--address"></span>

<span class="badge badge--small badge--comment"></span>

<span class="badge badge--small badge--yes-no"></span>

<span class="badge badge--small badge--true-false"></span>

<span class="badge badge--small badge--category"></span>

<span class="badge badge--small badge--choices"></span>

<span class="badge badge--small badge--custom"></span>

<span class="badge badge--small badge--payment"></span>

<span class="badge badge--small badge--tag"></span>

<div>
  <h5>Initials Badge</h5>
  <hr>
</div>

<span class="badge badge--medium badge--initials">DC</span>

<div>
  <h5>Date Stamp Badge</h5>
  <hr>
</div>

<span class="badge badge--medium badge--square badge--calendar">
  <small class="list__subtext">AUG</small>
  <span><strong>11</strong></span>
  <small class="list__subtext">9:00 PM</small>
</span>

</div>
.badge {
  display: inline-block; overflow: hidden;
}

.badge:not(.badge--calendar) {
  border-radius: 50%;
}

.badge:not(.badge--initials):not(.badge--calendar) {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
}

.badge--small {
  height: 39px;
  width: 39px;
}

.badge--medium {
  height: 48px;
  width: 48px;
}

.badge--big {
  height: 96px;
  width: 96px;
}

.badge--info {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2045.999%2045.999%22%3E%3Cpath%20d%3D%22M39.264%206.736c-8.982-8.98-23.545-8.982-32.528%200-8.982%208.982-8.98%2023.545%200%2032.528%208.982%208.98%2023.545%208.98%2032.528%200%208.98-8.983%208.98-23.545%200-32.528zM26%2033a3%203%200%200%201-6%200V21a3%203%200%201%201%206%200v12zm-3.054-17.128c-1.728%200-2.88-1.224-2.844-2.735-.036-1.584%201.116-2.77%202.88-2.77%201.763%200%202.88%201.187%202.916%202.77%200%201.51-1.152%202.735-2.952%202.735z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-color: #56b0f2;
}

.badge--text {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2011%22%3E%3Cpath%20d%3D%22M6.343.87A1.246%201.246%200%200%200%205.15%200H3.797c-.549%200-1.033.355-1.194.874L.053%209.137c-.112.359-.044.748.182%201.05a1.2%201.2%200%200%200%20.961.48c.538%200%201.01-.355%201.153-.867l.524-1.871H5.96l.565%201.859a1.252%201.252%200%201%200%202.199.376c.235-.316.305-.724.187-1.098L6.343.87zM3.225%206.125l.639-2.264c.176-.617.336-1.424.496-2.057h.03c.161.633.354%201.425.545%202.057l.672%202.264H3.225zm12.74%202.856V6.778c0-1.49-.682-2.734-2.816-2.734a5.86%205.86%200%200%200-1.932.313.634.634%200%200%200-.403.773l.007.021c.049.17.166.313.324.395a.658.658%200%200%200%20.512.04c.35-.117.751-.194%201.139-.194.982%200%201.165.48%201.165.816V6.3c-2.265-.013-3.757.777-3.757%202.423%200%201.011.772%201.944%202.069%201.944.759%200%201.413-.272%201.832-.778h.039l.051.277a.441.441%200%200%200%20.435.359h.928c.123%200%20.24-.051.324-.14a.434.434%200%200%200%20.117-.331%2014.492%2014.492%200%200%201-.034-1.072zm-1.939-.764c0%20.116-.013.233-.04.337-.13.401-.536.725-1.033.725-.445%200-.786-.246-.786-.751%200-.765.812-1.01%201.859-.998v.687z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-color: #eb8181;
}

.badge--number {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%208%22%3E%3Cpath%20d%3D%22M2.286%207.62a.762.762%200%200%201-.762-.762V1.995l-.421.21A.762.762%200%201%201%20.422.842L1.946.081a.76.76%200%200%201%201.102.681v6.096c0%20.42-.341.761-.762.761zm6.857-.001h-3.81a.763.763%200%200%201-.538-1.3L7.843%203.27a1.02%201.02%200%200%200%200-1.447%201.047%201.047%200%200%200-1.448%200c-.193.193-.3.45-.3.723a.762.762%200%200%201-1.523%200c0-.681.265-1.32.747-1.801.963-.962%202.639-.962%203.601%200%20.481.482.746%201.122.746%201.801%200%20.68-.265%201.32-.746%201.801L7.173%206.095h1.97a.762.762%200%200%201%200%201.524zm6.06-4.283c.258-.348.416-.774.416-1.24a2.097%202.097%200%200%200-3.955-.965.762.762%200%201%200%201.354.702.572.572%200%201%201%20.506.835.762.762%200%200%200%200%201.523.954.954%200%200%201%200%201.905.954.954%200%200%201-.953-.952.762.762%200%200%200-1.524%200%202.479%202.479%200%200%200%202.477%202.476A2.479%202.479%200%200%200%2016%205.144a2.46%202.46%200%200%200-.797-1.808z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-color: #f5ab35;
}

.badge--multiple {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2022%22%3E%3Cpath%20d%3D%22M2.917%2022h16.605c1.609%200%202.917-1.282%202.917-2.86V8.006l-2.917%202.86v8.274H2.917V2.86h13.304L18.56.565c.222-.217.465-.405.725-.565H2.917C1.307%200%200%201.282%200%202.86v16.282C0%2020.718%201.308%2022%202.917%2022z%22%20fill%3D%22%23FFF%22%2F%3E%3Cpath%20d%3D%22M23.292%201.604a2.605%202.605%200%200%200-1.714-.77%202.612%202.612%200%200%200-1.986.741l-8.118%207.961a255.195%20255.195%200%200%200-1.972-1.964%202.619%202.619%200%200%200-1.835-.746c-.664%200-1.327.248-1.835.746a2.51%202.51%200%200%200%200%203.6L7.82%2013.12l1.835%201.8a2.625%202.625%200%200%200%201.836.746c.687%200%201.349-.267%201.835-.746L23.2%205.239c1.01-.994%201.089-2.627.092-3.635z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-color: #947cb0;
}

.badge--single {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M8%204C5.76%204%204%205.76%204%208s1.76%204%204%204%204-1.76%204-4-1.76-4-4-4zm0-4C3.6%200%200%203.6%200%208s3.6%208%208%208%208-3.6%208-8-3.6-8-8-8zm0%2014.4c-3.52%200-6.4-2.88-6.4-6.4%200-3.52%202.88-6.4%206.4-6.4%203.52%200%206.4%202.88%206.4%206.4%200%203.52-2.88%206.4-6.4%206.4z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-color: #4898b3;
}

.badge--rank {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2015%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M5.333%200a.666.666%200%200%200-.666.667v6h-4A.666.666%200%200%200%200%207.333V14c0%20.368.299.667.667.667h14.666A.667.667%200%200%200%2016%2014V7.333a.666.666%200%200%200-.667-.666h-4v-6A.666.666%200%200%200%2010.667%200H5.333zm2.324%205.791a.495.495%200%200%200%20.99%200V1.829a.497.497%200%200%200-.716-.443l-.99.495a.496.496%200%200%200%20.443.886l.273-.137v3.16zM4.142%2013H1.8a.468.468%200%200%201-.33-.8l1.872-1.872a.626.626%200%200%200%200-.89.644.644%200%200%200-.89.001.623.623%200%200%200-.183.444.469.469%200%200%201-.937%200c0-.418.163-.81.459-1.107.592-.59%201.622-.59%202.213.001.296.295.458.689.458%201.106%200%20.418-.163.811-.458%201.107l-1.073%201.073h1.21a.469.469%200%201%201%200%20.937zm9.802-2.624a1.26%201.26%200%200%200%20.261-.76c0-.708-.59-1.283-1.316-1.283-.493%200-.942.266-1.168.692a.46.46%200%200%200%20.205.63.484.484%200%200%200%20.644-.2.358.358%200%200%201%20.319-.188c.198%200%20.358.156.358.35%200%20.193-.16.35-.358.35a.472.472%200%200%200-.479.466c0%20.257.214.466.479.466.33%200%20.598.262.598.584a.592.592%200%200%201-.598.583.592.592%200%200%201-.599-.583.472.472%200%200%200-.478-.466.473.473%200%200%200-.479.466c0%20.836.698%201.517%201.556%201.517.857%200%201.555-.68%201.555-1.517a1.49%201.49%200%200%200-.5-1.107z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-color: #f2784b;
}

.badge--email {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M10.62%204h1.227l-.842%204.754c-.093.55-.096.948-.009%201.194.088.245.284.368.588.368.303%200%20.601-.07.893-.21.292-.141.555-.357.789-.65.234-.292.423-.66.57-1.104.145-.445.219-.971.219-1.58%200-.877-.147-1.626-.439-2.245a4.229%204.229%200%200%200-1.2-1.535%204.92%204.92%200%200%200-1.796-.886%208.464%208.464%200%200%200-2.226-.282%206.51%206.51%200%200%200-2.541.492%206.37%206.37%200%200%200-2.042%201.35%206.16%206.16%200%200%200-1.358%202.045%206.64%206.64%200%200%200-.49%202.57c0%20.912.137%201.73.411%202.456a5.003%205.003%200%200%200%201.2%201.851c.526.509%201.178.9%201.954%201.175.777.275%201.668.412%202.673.412.339%200%20.724-.04%201.157-.122a4.954%204.954%200%200%200%201.174-.369l.543%201.684a5.75%205.75%200%200%201-1.463.491A9.287%209.287%200%200%201%207.903%2016c-1.133%200-2.182-.164-3.145-.491a7.044%207.044%200%200%201-2.506-1.456c-.707-.644-1.26-1.442-1.657-2.395C.198%2010.705%200%209.602%200%208.35c0-1.275.228-2.427.684-3.456a8.031%208.031%200%200%201%201.84-2.632A8.168%208.168%200%200%201%205.204.587%208.893%208.893%200%200%201%208.43%200c1.075%200%202.074.155%202.997.465.922.31%201.723.754%202.4%201.333a6.132%206.132%200%200%201%201.596%202.124c.385.835.578%201.786.578%202.85%200%20.749-.131%201.45-.394%202.105a5.24%205.24%200%200%201-1.086%201.702c-.463.48-1%20.86-1.613%201.14-.613.28-1.27.421-1.971.421-.293%200-.564-.032-.815-.096a1.476%201.476%200%200%201-.63-.325%201.36%201.36%200%200%201-.378-.596c-.082-.246-.105-.55-.07-.912h-.07a9.291%209.291%200%200%201-.57.719%204.266%204.266%200%200%201-.674.623%203.133%203.133%200%200%201-.806.43%202.838%202.838%200%200%201-.964.157c-.28%200-.549-.061-.806-.184a1.975%201.975%200%200%201-.666-.517%202.537%202.537%200%200%201-.447-.807%203.147%203.147%200%200%201-.166-1.053c0-.725.116-1.43.35-2.114.233-.684.552-1.29.955-1.816.403-.526.87-.95%201.402-1.272a3.217%203.217%200%200%201%201.69-.482c.41%200%20.754.061%201.035.184.28.123.537.284.77.483L10.62%204zM9.515%206.123a1.87%201.87%200%200%200-.473-.298%201.557%201.557%200%200%200-.613-.105c-.35%200-.675.1-.972.298a2.836%202.836%200%200%200-.771.772c-.217.316-.383.67-.5%201.06A4.025%204.025%200%200%200%206.01%209c0%20.386.08.702.237.948.158.245.43.368.815.368.163%200%20.339-.05.525-.148.188-.1.368-.232.544-.395a5.101%205.101%200%200%200%20.946-1.228l.438-2.422z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-color: #e876c8;
}

.badge--datetime {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20123%20125%22%3E%3Cpath%20d%3D%22M110.59%20125H12.41A12.426%2012.426%200%200%201%200%20112.587V25.7a12.424%2012.424%200%200%201%2012.41-12.41h12.927V6.033A6.03%206.03%200%200%201%2031.364%200h.957a6.03%206.03%200%200%201%206.03%206.03v7.26H84.5V6.033A6.03%206.03%200%200%201%2090.527%200h.956a6.03%206.03%200%200%201%206.028%206.03v7.26h13.08A12.424%2012.424%200%200%201%20123%2025.7v86.885A12.426%2012.426%200%200%201%20110.59%20125zm-1.618-81.665H14.028v67.634h94.944V43.33zM46.254%2084.4a2.29%202.29%200%200%200%201.953.915%202.71%202.71%200%200%200%202.04-.793%202.87%202.87%200%200%200%20.768-2.087%202.84%202.84%200%200%200-.9-2.27%203.842%203.842%200%200%200-2.588-.78q-.366%200-.562.01c-.13.01-.244.013-.342.013v-7.223h.537a4.138%204.138%200%200%200%202.478-.623%202.146%202.146%200%200%200%20.842-1.843%202.1%202.1%200%200%200-.562-1.517%201.908%201.908%200%200%200-1.44-.586%201.666%201.666%200%200%200-1.416.646%203.058%203.058%200%200%200-.488%201.868H34.78q.1-5.86%203.65-8.886t10.34-3.027q6.053%200%209.728%202.77a8.653%208.653%200%200%201%203.674%207.24%206.97%206.97%200%200%201-5.1%207.2%208.03%208.03%200%200%201%204.8%202.844%208.757%208.757%200%200%201%201.648%205.506%2010.078%2010.078%200%200%201-4%208.373q-4%203.124-10.79%203.124-7.277%200-11.39-3.59t-4.114-9.91v-.1H45.5a4.86%204.86%200%200%200%20.754%202.722zm44.214%209.924H77.626V69.768H72.28v-10.84h18.188v35.4z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-color: #446cb3;
}

.badge--phone {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20401.998%20401.998%22%3E%3Cpath%20d%3D%22M401.13%20311.475c-1.138-3.426-8.372-8.473-21.698-15.13-3.61-2.097-8.754-4.948-15.41-8.565-6.662-3.617-12.71-6.95-18.13-9.996a607.39%20607.39%200%200%201-15.276-8.846c-.76-.57-3.14-2.234-7.136-5-4-2.758-7.375-4.805-10.14-6.14-2.76-1.327-5.473-1.995-8.138-1.995-3.806%200-8.56%202.714-14.268%208.135a139.01%20139.01%200%200%200-15.7%2017.706c-4.757%206.38-9.802%2012.275-15.126%2017.7-5.332%205.427-9.713%208.138-13.135%208.138-1.718%200-3.86-.48-6.427-1.424-2.566-.95-4.518-1.766-5.858-2.423-1.328-.67-3.607-2-6.845-4.004-3.244-1.99-5.048-3.09-5.428-3.28-26.075-14.47-48.438-31.03-67.093-49.67-18.65-18.65-35.21-41.02-49.676-67.09-.19-.38-1.287-2.19-3.284-5.42-2-3.24-3.333-5.52-4-6.853-.665-1.33-1.474-3.283-2.424-5.852s-1.427-4.71-1.427-6.422c0-3.426%202.72-7.806%208.14-13.136%205.43-5.327%2011.33-10.373%2017.7-15.13%206.38-4.754%2012.28-9.99%2017.7-15.7%205.43-5.71%208.14-10.465%208.14-14.27%200-2.66-.66-5.377-1.99-8.136-1.33-2.763-3.38-6.14-6.14-10.136s-4.42-6.373-5-7.14a631.895%20631.895%200%200%201-8.84-15.27c-3.05-5.423-6.372-11.47-9.99-18.13-3.615-6.66-6.47-11.8-8.564-15.415C98.986%209.237%2093.946%202%2090.516.86%2089.185.287%2087.185%200%2084.52%200c-5.14%200-11.85.95-20.128%202.856-8.282%201.903-14.8%203.9-19.558%205.996-9.517%203.995-19.604%2015.605-30.264%2034.826C4.863%2061.566.01%2079.27.01%2096.78c0%205.135.333%2010.13%201%2014.99.665%204.852%201.855%2010.325%203.57%2016.417%201.712%206.09%203.093%2010.614%204.137%2013.56%201.045%202.948%202.996%208.23%205.852%2015.845%202.85%207.614%204.56%2012.275%205.13%2013.988%206.66%2018.654%2014.56%2035.307%2023.69%2049.964%2015.03%2024.362%2035.54%2049.54%2061.52%2075.52%2025.98%2025.98%2051.15%2046.49%2075.52%2061.527%2014.65%209.14%2031.31%2017.04%2049.96%2023.7%201.71.57%206.37%202.28%2013.98%205.14%207.613%202.86%2012.896%204.81%2015.844%205.86%202.95%201.05%207.474%202.43%2013.56%204.15%206.097%201.72%2011.565%202.91%2016.42%203.58%204.854.66%209.85%201%2014.99%201%2017.505%200%2035.21-4.854%2053.102-14.56%2019.22-10.656%2030.824-20.745%2034.82-30.27%202.105-4.753%204.096-11.272%206-19.554%201.91-8.28%202.856-14.985%202.856-20.126.006-2.674-.28-4.67-.855-6.013z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-color: #4ecdc4;
}

.badge--address {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2016%22%3E%3Cpath%20d%3D%22M5.599%200A5.594%205.594%200%200%200%200%205.599C0%209.799%205.599%2016%205.599%2016s5.598-6.2%205.598-10.401A5.594%205.594%200%200%200%205.6%200zm0%207.599a2%202%200%201%201%200-4%202%202%200%200%201%200%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-color: #946f52;
}

.badge--comment {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2014%22%3E%3Cpath%20d%3D%22M5.12%206.056a4.24%204.24%200%200%200-1.17-.171%203.7%203.7%200%200%200-1.47.3c.37-1.351%201.257-3.684%203.024-3.946a.42.42%200%200%200%20.342-.302L6.232.556a.42.42%200%200%200-.347-.53A2.933%202.933%200%200%200%205.49%200C3.37%200%201.27%202.214.382%205.383c-.52%201.86-.672%204.656.61%206.416.716.984%201.763%201.51%203.109%201.563h.016a3.734%203.734%200%200%200%203.583-2.72%203.698%203.698%200%200%200-.341-2.829A3.731%203.731%200%200%200%205.12%206.056zm10.4%201.758a3.731%203.731%200%200%200-2.239-1.758%204.239%204.239%200%200%200-1.17-.171c-.593%200-1.087.135-1.47.3.37-1.351%201.256-3.684%203.023-3.946a.42.42%200%200%200%20.343-.302l.386-1.381a.42.42%200%200%200-.347-.53A2.93%202.93%200%200%200%2013.65%200c-2.12%200-4.221%202.214-5.107%205.383-.52%201.86-.673%204.656.609%206.416.717.984%201.763%201.51%203.11%201.563h.016a3.734%203.734%200%200%200%203.583-2.72%203.7%203.7%200%200%200-.342-2.828z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-color: #91b496;
}

.badge--yes-no {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2030%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M5%207.7c0-.5.2-.9.5-1.3l4.4-5.1c.2-.3.6-.4%201-.3s.6.3.8.7l.2.5c.2.5.1%201.1-.1%201.5L10%207h5.5c.3%200%20.6.2.8.4.2.3.2.6.1.9l-2.9%207.4c-.3.8-1%201.3-1.9%201.3H6c-.6%200-1-.4-1-1V7.7zM3%208c0-.6-.4-1-1-1H0v10h2c.6%200%201-.4%201-1V8zM25%2022.3c0%20.5-.2.9-.5%201.3l-4.4%205.1c-.2.3-.6.4-1%20.3s-.6-.3-.8-.7l-.2-.5c-.2-.5-.1-1.1.1-1.5L20%2023h-5.5c-.3%200-.6-.2-.8-.4s-.2-.6-.1-.9l2.9-7.4c.3-.8%201-1.3%201.9-1.3H24c.6%200%201%20.4%201%201v8.3zM27%2022c0%20.6.4%201%201%201h2V13h-2c-.6%200-1%20.4-1%201v8z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-color: #5e5eff;
}

.badge--true-false {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M395.13%200c-31.72%200-60.453%2012.8-81.532%2033.39H83.478C37.435%2033.39%200%2070.827%200%20116.87s37.435%2083.478%2083.478%2083.478h230.12c21.08%2020.59%2049.813%2033.39%2081.533%2033.39%2064.44%200%20116.87-52.433%20116.87-116.87S459.57%200%20395.13%200zm0%20200.348c-46.043%200-83.478-37.435-83.478-83.478s37.435-83.478%2083.478-83.478%2083.478%2037.435%2083.478%2083.478-37.434%2083.478-83.478%2083.478zm33.392%20111.304h-230.12c-21.08-20.59-49.813-33.39-81.533-33.39C52.43%20278.26%200%20330.694%200%20395.13S52.434%20512%20116.87%20512c31.72%200%2060.453-12.8%2081.532-33.39h230.12c46.044%200%2083.48-37.436%2083.48-83.48s-37.437-83.478-83.48-83.478zM116.87%20478.61c-46.043%200-83.478-37.436-83.478-83.48s37.435-83.477%2083.478-83.477%2083.478%2037.435%2083.478%2083.478-37.435%2083.48-83.478%2083.48z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-color: #DB2E2E;
}

.badge--category {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2014%2016%22%3E%3Cpath%20d%3D%22M13.13.529a1.177%201.177%200%200%200-.546-.434A1.138%201.138%200%200%200%2012.125%200H1.208C1.048%200%20.896.032.75.095A1.176%201.176%200%200%200%200%201.185v13.63a1.177%201.177%200%200%200%20.75%201.09c.146.063.299.095.458.095.327%200%20.615-.116.865-.349l4.594-4.484%204.594%204.484c.243.226.53.338.864.338.174%200%20.326-.028.459-.084a1.176%201.176%200%200%200%20.75-1.09V1.186c0-.24-.068-.459-.204-.656z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-color: #828282;
}

.badge--choices {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M29.158%2018.089l-3.906%203.906-3.906-3.906-2.843%202.842%203.906%203.906-3.906%203.907%202.843%202.842%203.906-3.906%203.906%203.906L32%2028.744l-3.906-3.907L32%2020.931l-2.842-2.842zM10.654%2018.089l-3.906%203.906-3.906-3.906L0%2020.931l3.906%203.906L0%2028.744l2.842%202.842%203.906-3.906%203.906%203.906%202.843-2.842-3.907-3.907%203.907-3.906-2.843-2.842zM29.158.414L25.252%204.32%2021.346.414l-2.843%202.842%203.906%203.907-3.906%203.906%202.843%202.842%203.906-3.906%203.906%203.906L32%2011.069l-3.906-3.907L32%203.256%2029.158.414zM7.255%2013.51a6.255%206.255%200%201%200%200-12.51%206.255%206.255%200%200%200%200%2012.51z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-color: #9dac31;
}

.badge--payment {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2010%2016%22%3E%3Cpath%20d%3D%22M7.232%204.304c-.25-.762-.928-1.15-2.036-1.161v4c.096.024.244.06.447.107.928.214%201.571.41%201.928.59.358.178.69.47%201%20.874.37.488.554%201.066.554%201.732%200%20.631-.173%201.22-.518%201.768a3.186%203.186%200%200%201-1.375%201.197c-.524.25-1.202.452-2.036.607v1.518c0%20.31-.166.464-.5.464-.333%200-.5-.155-.5-.464v-1.518c-.88-.06-1.625-.214-2.232-.464-.607-.262-1.089-.631-1.446-1.108-.345-.476-.518-1-.518-1.571%200-.488.119-.881.357-1.179.238-.297.554-.446.947-.446.261%200%20.482.09.66.268a.84.84%200%200%201%20.268.643c0%20.512-.31.785-.928.821.06.56.345%201.006.857%201.34.524.333%201.202.505%202.035.517v-4.5l-.267-.071c-.965-.262-1.62-.47-1.965-.625a2.33%202.33%200%200%201-1-.804c-.274-.393-.41-.893-.41-1.5%200-.619.172-1.196.517-1.732a2.995%202.995%200%200%201%201.34-1.16c.464-.203%201.06-.364%201.785-.483V.536c0-.357.167-.536.5-.536.334%200%20.5.179.5.536v1.428c1.072.12%201.923.417%202.554.893.631.476.946%201.06.946%201.75%200%20.31-.095.572-.285.786a.94.94%200%200%201-.715.303.86.86%200%200%201-.607-.232.73.73%200%200%201-.25-.553c0-.238.131-.44.393-.607zM4.196%206.929V3.143c-.666.024-1.214.214-1.642.571a1.71%201.71%200%200%200-.625%201.357c0%20.477.142.846.428%201.108.286.25.792.47%201.518.66.06.012.167.042.321.09zm1%201.625v4.285c.727-.012%201.328-.226%201.804-.643.488-.416.732-.94.732-1.571%200-.583-.172-1.03-.518-1.34-.345-.309-.916-.535-1.714-.678a4.284%204.284%200%200%200-.304-.053z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-color: #27AE60;
}

.badge--tag {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20525.153%20525.153%22%3E%3Cpath%20d%3D%22M509.682%20251.504L273.342%2015.25C263.932%205.778%20250.76%200%20236.342%200H52.47C23.63%200%200%2023.632%200%2052.47v183.85c0%2014.42%205.777%2027.592%2015.47%2037.308L251.81%20509.88c9.41%209.496%2022.582%2015.272%2037%2015.272%2014.42%200%2027.593-5.777%2037.002-15.47L509.66%20325.835c9.714-9.43%2015.49-22.603%2015.49-37.023s-6.06-27.81-15.468-37.308zM91.88%20131.288c-21.75%200-39.408-17.57-39.408-39.408%200-21.75%2017.658-39.408%2039.408-39.408%2021.838%200%2039.408%2017.658%2039.408%2039.408%200%2021.837-17.57%2039.408-39.408%2039.408z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-color: #F2D35B;
}

.badge--custom {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M5273.1%202400.1v-2c0-2.8-5-4-9.7-4s-9.7%201.3-9.7%204v2c0%201.8.7%203.6%202%204.9l5%204.9c.3.3.4.6.4%201v6.4c0%20.4.2.7.6.8l2.9.9c.5.1%201-.2%201-.8v-7.2c0-.4.2-.7.4-1l5.1-5c1.3-1.3%202-3.1%202-4.9zm-9.7-.1c-4.8%200-7.4-1.3-7.5-1.8.1-.5%202.7-1.8%207.5-1.8s7.3%201.3%207.5%201.8c-.2.5-2.7%201.8-7.5%201.8z%20M5268.4%202410.3c-.6%200-1%20.4-1%201s.4%201%201%201h4.3c.6%200%201-.4%201-1s-.4-1-1-1h-4.3zM5272.7%202413.7h-4.3c-.6%200-1%20.4-1%201s.4%201%201%201h4.3c.6%200%201-.4%201-1s-.4-1-1-1zM5272.7%202417h-4.3c-.6%200-1%20.4-1%201s.4%201%201%201h4.3c.6%200%201-.4%201-1%200-.5-.4-1-1-1z%20M24.2%2039.6c0-7.4%206-13.4%2013.4-13.4%205.8%200%2010.8%203.8%2012.6%209l16.3-16.3-7.8-7.8c-.9-.9-2.4-.9-3.3%200l-3.8%203.8c-2-1.1-4.1-2-6.4-2.6V6.9c0-1.4-1.1-2.4-2.4-2.4H32.4c-1.4%200-2.4%201-2.4%202.4v5.4c-2.3.6-4.4%201.5-6.4%202.6l-3.8-3.8c-.9-.9-2.4-.9-3.3%200l-7.3%207.3c-.9.9-.9%202.4%200%203.3l3.8%203.8c-1.1%202-2%204.1-2.6%206.4H4.9c-1.4%200-2.4%201.1-2.4%202.4v10.3c0%201.4%201%202.4%202.4%202.4h5.4c.6%202.3%201.5%204.4%202.6%206.4l-3.8%203.8c-1%20.9-.9%202.4%200%203.3l7.8%207.8L33.2%2052c-5.3-1.6-9-6.6-9-12.4zM32.773%2066.238L68.411%2030.6l15.344%2015.344-35.638%2035.638zM96.5%2028.7L85.8%2017.9c-1.3-1.3-3.3-1.3-4.6%200l-7%207%2015.4%2015.4%207-7c1.2-1.3%201.2-3.4-.1-4.6zM23.1%2076c-.4.4-.7%201-.9%201.6L19%2091.5c-.5%202.3%201.6%204.4%203.9%203.9l13.9-3.2c.6-.1%201.1-.4%201.6-.9l4-4L27.1%2072l-4%204z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
  background-color: #C9CBD1;
}

.badge--initials {
  background-color: #8A99AE;
}

.badge--calendar {
  background-color: var(--hover-highlight-color);
}

.badge--initials,
.badge--center,
.badge--calendar {
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
}

.badge--initials {
  color: #fff;
  font-size: 10px;
  font-size: 1rem;
  font-weight: bold;
}

.badge--calendar {
  border-radius: 10px;
  flex-direction: column;
  min-height: 60px;
  min-width: 60px;
}
Icons

The icon family from the project containing all the sizes and color variations.

Item Note
.icon

(Mandatory) main class that you should combine with one of the sizes and / or colors below
sizes

.icon--gigantic (256), .icon--huge (128), .icon--big (64), .icon--large (48), .icon--medium (32), .icon--small (24), .icon--tiny (16)
colors

same as Buttons
Demo (Open in a new tab) 
<div class="icons s-iconography">

  <div class="s-iconography__headline">
    <h5>Glyphs</h5>
    <hr>
  </div>

  <div class="s-iconography__container">
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-apple" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-apple</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-arrow-down" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-arrow-down</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-arrow-left" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-arrow-left</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-arrow-right" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-arrow-right</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-arrow-up" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-arrow-up</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-at" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-at</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-automatic" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-automatic</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-balloon" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-balloon</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-block" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-block</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-board" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-board</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-book" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-book</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-bookmark" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-bookmark</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-brush" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-brush</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-brush-alt" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-brush-alt</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-buildings" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-buildings</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-bus" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-bus</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-calendar" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-calendar</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-card" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-card</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-caret-down" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-caret-down</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-caret-left" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-caret-left</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-caret-right" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-caret-right</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-caret-up" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-caret-up</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-cart" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-cart</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-chart" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-chart</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-chart-pie" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-chart-pie</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-checkmark" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-checkmark</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-checkmark-circle" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-checkmark-circle</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-checkmark-ribbon" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-checkmark-ribbon</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-checkbox" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-checkbox</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-clipboard" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-clipboard</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-clock" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-clock</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-close" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-close</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-close-circle" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-close-circle</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-columns" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-columns</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-combine" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-combine</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-confetti" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-confetti</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-copy" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-copy</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-currency" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-currency</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-cursor" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-cursor</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-dashboard" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-dashboard</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-date" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-date</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-dot" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-dot</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-dots-horizontal" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-dots-horizontal</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-dots-vertical" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-dots-vertical</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-download" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-download</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-duplicate" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-duplicate</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-edit" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-edit</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-embed" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-embed</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-events" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-events</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-eye" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-eye</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-eye-off" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-eye-off</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-facebook" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-facebook</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-file" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-file</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-filters" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-filters</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-fundraiser" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-fundraiser</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-gathering" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-gathering</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-globe" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-globe</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-graduation" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-graduation</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-group" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-group</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-heart" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-heart</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-house" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-house</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-image" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-image</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-import" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-import</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-info" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-info</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-items" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-items</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-key" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-key</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-layout-default" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-layout-default</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-layout-email-default" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-layout-email-default</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-layout-equal" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-layout-equal</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-layout-full" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-layout-full</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-layout-inverse" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-layout-inverse</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-layout-no-footer" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-layout-no-footer</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-layout-no-header" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-layout-no-header</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-lifesaver" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-lifesaver</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-link" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-link</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-list" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-list</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-mail" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-mail</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-map" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-map</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-megaphone" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-megaphone</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-menu" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-menu</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-minus" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-minus</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-move" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-move</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-navigation" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-navigation</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-notification" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-notification</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-numbers" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-numbers</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-padlock" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-padlock</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-paint" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-paint</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-paper-plane" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-paper-plane</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-password" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-password</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-people" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-people</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-people-places" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-people-places</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-person" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-person</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-pin" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-pin</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-plane" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-plane</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-play" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-play</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-plus" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-plus</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-plus-circle" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-plus-circle</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-popout" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-popout</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-power" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-power</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-printer" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-printer</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-question</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question-balloon" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-question-balloon</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question-bubble" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-question-bubble</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-quotes" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-quotes</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-rank" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-rank</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-radio" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-radio</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-receipt" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-receipt</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-refresh" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-refresh</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-retreat" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-retreat</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-reunion" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-reunion</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-rocket" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-rocket</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-rocket-launch" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-rocket-launch</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-rows" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-rows</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-search" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-search</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-segment" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-segment</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-send-mail" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-send-mail</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-settings" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-settings</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-shuffle" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-shuffle</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-smartphone" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-smartphone</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-sort" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-sort</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-spots" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-spots</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-stripe" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-stripe</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-tag" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-tag</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-tags" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-tags</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-telephone" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-telephone</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-template" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-template</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-tent" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-tent</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-text" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-text</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-ticket" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-ticket</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-tickets" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-tickets</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-trash" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-trash</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-twitter" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-twitter</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-undo" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-undo</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-upload" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-upload</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-user" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-user</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-waitlist" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-waitlist</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-warning" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-warning</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-wedding-ring" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-wedding-ring</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-workshop" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-workshop</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-yes-no" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-yes-no</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-yahoo" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-yahoo</span>
      </div>
    
  </div>

  <div class="s-iconography__headline">
    <h5>Colors</h5>
    <hr>
  </div>

  <div class="s-iconography__container">
    
      <div class="s-iconography__item">
        <div class="s-iconography__block  ">
          <svg class="icon icon--medium icon--">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question" />
          </svg>
        </div>
        <span class="s-iconography__label">icon</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block  ">
          <svg class="icon icon--medium icon--blue">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--blue</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block  ">
          <svg class="icon icon--medium icon--turquoise">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--turquoise</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block  ">
          <svg class="icon icon--medium icon--green">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--green</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block  ">
          <svg class="icon icon--medium icon--red">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--red</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block  ">
          <svg class="icon icon--medium icon--yellow">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--yellow</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block  ">
          <svg class="icon icon--medium icon--black">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--black</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block  ">
          <svg class="icon icon--medium icon--slategray">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--slategray</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block  ">
          <svg class="icon icon--medium icon--hawkes">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--hawkes</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block  ">
          <svg class="icon icon--medium icon--white">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--white</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block  ">
          <svg class="icon icon--medium icon--quartz">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--quartz</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block  ">
          <svg class="icon icon--medium icon--gray">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--gray</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block  ">
          <svg class="icon icon--medium icon--darken-sky">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--darken-sky</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block  s-iconography__block--dark  ">
          <svg class="icon icon--medium icon--sky">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--sky</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block  s-iconography__block--dark  ">
          <svg class="icon icon--medium icon--whisper">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--whisper</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block  s-iconography__block--dark  ">
          <svg class="icon icon--medium icon--gainsboro">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--gainsboro</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block  s-iconography__block--dark  ">
          <svg class="icon icon--medium icon--ghost">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--ghost</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block  s-iconography__block--dark  ">
          <svg class="icon icon--medium icon--lighten-sky">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--lighten-sky</span>
      </div>
    
  </div>

  <div class="s-iconography__headline">
    <h5>Colorful</h5>
    <hr>
  </div>

  <div class="s-iconography__container">
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--large">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-google" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-google</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--large">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-microsoft" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-microsoft</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--large">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-outlook" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-outlook</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--large">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-flag-us" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-flag-us</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--large">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-flag-br" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-flag-br</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--large">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-flag-fr" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-flag-fr</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--large">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-flag-ge" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-flag-ge</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--large">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-flag-es" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-flag-es</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--large">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-flag-it" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-flag-it</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--large">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-flag-nl" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-flag-nl</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--large">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-card-amex" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-card-amex</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--large">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-card-diners" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-card-diners</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--large">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-card-discover" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-card-discover</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--large">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-card-jcb" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-card-jcb</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--large">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-card-mastercard" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-card-mastercard</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--large">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-card-visa" />
          </svg>
        </div>
        <span class="s-iconography__label">icon-card-visa</span>
      </div>
    
  </div>

  <div class="s-iconography__headline">
    <h5>Sizes</h5>
    <hr>
  </div>

  <div class="s-iconography__container">
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--gigantic">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-heart" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--gigantic</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--huge">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-heart" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--huge</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--big">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-heart" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--big</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--large">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-heart" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--large</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--medium">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-heart" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--medium</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--small">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-heart" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--small</span>
      </div>
    
      <div class="s-iconography__item">
        <div class="s-iconography__block">
          <svg class="icon icon--tiny">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-heart" />
          </svg>
        </div>
        <span class="s-iconography__label">icon--tiny</span>
      </div>
    
  </div>
</div>
.icon {
  fill: #2C2F30;
  vertical-align: middle;
}

.icon--blue {
  fill: #2E7FED;
}

.icon--turquoise {
  fill: #1ABC9C;
}

.icon--slategray {
  fill: #6B7C93;
}

.icon--hawkes {
  fill: #DADCE5;
}

.icon--sky {
  fill: #ECEFF6;
}

.icon--green {
  fill: #26A65B;
}

.icon--red {
  fill: #EC644B;
}

.icon--yellow {
  fill: #FABE58;
}

.icon--black {
  fill: #000;
}

.icon--white {
  fill: #FFF;
}

.icon--whisper {
  fill: #EEE;
}

.icon--gainsboro {
  fill: #DDD;
}

.icon--quartz {
  fill: #DDDEEE;
}

.icon--gray {
  fill: #959CA6;
}

.icon--ghost {
  fill: #F8F9FB;
}

.icon--darken-sky {
  fill: #bec8e0;
}

.icon--lighten-sky {
  fill: #eff1f7;
}

.icon--gigantic {
  height: 256px;
  width: 256px;
}

.icon--huge {
  height: 128px;
  width: 128px;
}

.icon--big {
  height: 32px;
  width: 32px;
}

.icon--large {
  height: 48px;
  width: 48px;
}

.icon--medium {
  height: 32px;
  width: 32px;
}

.icon--small {
  height: 24px;
  width: 24px;
}

.icon--tiny {
  height: 16px;
  width: 16px;
}
Ribbons

Used to assign and organize tabs distinctively.

Item Note
.ribbon

(mandatory) to set the styles properly
Demo (Open in a new tab) 
<div class="s-spacer">
  <div class="ribbon ribbon--java-green has-full-width"></div>

<div class="ribbon ribbon--malibu-blue has-full-width"></div>

<div class="ribbon ribbon--shocking-pink has-full-width"></div>

<div class="ribbon ribbon--vivid-tangerine has-full-width"></div>

<div class="ribbon ribbon--concrete has-full-width"></div>

<div class="ribbon ribbon--wisteria-purple has-full-width"></div>

<div class="ribbon ribbon--cranberry has-full-width"></div>

<div class="ribbon ribbon--wewak-salmon has-full-width"></div>

<div class="ribbon ribbon--cream-can-yellow has-full-width"></div>

<div class="ribbon ribbon--silver-sand has-full-width"></div>

</div>
.ribbon {
  align-items: center;
  display: flex;
  border-radius: 4px;
  justify-content: space-between;
  min-height: 40px;
  }

.ribbon:not(.ribbon--short) {
  padding: 10px;
  }

.ribbon--short {
  padding: 5px 10px;
  }

.ribbon__text {
  color: $white-hex;
  }

.ribbon--java-green {
  background-color: #1FDFB;
  }

.ribbon--malibu-blue {
  background-color: #6BB9F0;
  }

.ribbon--shocking-pink {
  background-color:  #E57EC9;
  }

.ribbon--vivid-tangerine {
  background-color:  #FF9478;
  }

.ribbon--concrete {
  background-color: #6C7A89;
  }

.ribbon--wisteria-purple {
  background-color: #A96DAD;
  }

.ribbon--cranberry {
  background-color: #D2527F;
  }

.ribbon--wewak-salmon {
  background-color: #F1A9A0;
  }

.ribbon--cream-can-yellow {
  background-color: #F5D76E;
  }

.ribbon--silver-sand {
  background-color: #BDC3C7;
  }