Unicorn Design System

Molecules

Breadcrumbs

a type of secondary navigation scheme that reveals the user’s location in a website or Web application.

Item	Note
`.breadcrumb`	(Mandatory) main class.

Demo (Open in a new tab)

HTML
CSS

<div class="s-spacer">
  <ul class="breadcrumbs">
  
    <li class="breadcrumbs__item">
      <a href="/unicorn/styleguide/template-dashboard.html" class="breadcrumbs__link">Home</a>
    </li>
    <li class="breadcrumbs__item">
      <a href="/unicorn/styleguide/template-events.html" class="breadcrumbs__link">Events</a>
    </li>
    <li class="breadcrumbs__item">
      <a href="#" class="breadcrumbs__link">Readcrumbs</a>
    </li>
  
</ul>

</div>

.breadcrumbs {
  align-items: center;
  background-color: #ECEFF6;
  border-radius: 25px;
  display: inline-flex;
  justify-content: flex-start;
  padding: 10px;
  width: auto;
}

.breadcrumbs__item {
  display: flex;
}

.breadcrumbs__item:last-child .breadcrumbs__link {
  color: #959CA6;
  cursor: default;
}

.breadcrumbs__link {
  color: #6B7C93;
  margin: 0 10px;
  position: relative;
  text-transform: capitalize;
  white-space: nowrap;
}

Search

The search component consists in joining an input file and a SVG icon.

Item	Note
`.search__input`	(Mandatory) input class to achieve the animation effect.
`.search__icon`	(Mandatory) icon class to achieve the opacity toggle.

Demo (Open in a new tab)

HTML
CSS

<div class="s-spacer">
  <div class="search ">
  <input type="search" placeholder="Search Here..." class="input search__input ">
  <svg class="search__icon icon icon--tiny icon--slategray">
    <use xlink:href="/unicorn/assets/icons/icons.svg#icon-search" />
  </svg>
</div>

</div>

.search__input:focus + .search__icon {
  opacity: 0;
  transform: translateX(15px);
  visibility: hidden;
}

.search__input:focus + .search__icon {
  opacity: 0.5;
}

.search__icon {
  margin-left: -40px;
  margin-top: -2px;
  pointer-events: none;
  transition: all .175s linear;
  transform: translateX(0);
  transform-origin: right;
}

Navbar

Use this to setup “yes or no” actions.

Item	Note
`.navbar`	(Mandatory) main class.
`.navbar--tiles`	(Optional) modifier to add dividers.

Demo (Open in a new tab)

HTML
CSS

<div class="s-spacer">
  <nav class="navbar">
  <a class="navbar__link" href="#">
    <svg class="icon icon--small icon--gray navbar__icon">
      <use xlink:href="/unicorn/assets/icons/icons.svg#icon-events" />
    </svg>
    <span class="navbar__text">My Events</span>
  </a>
  <a class="navbar__link" href="#">
    <svg class="icon icon--small icon--gray navbar__icon">
      <use xlink:href="/unicorn/assets/icons/icons.svg#icon-events" />
    </svg>
    <span class="navbar__text">Create Event</span>
  </a>
  <a class="navbar__link" href="#">
    <svg class="icon icon--small icon--gray navbar__icon">
      <use xlink:href="/unicorn/assets/icons/icons.svg#icon-events" />
    </svg>
    <span class="navbar__text">Copy Event</span>
  </a>
</nav>

<nav class="navbar navbar--tiles">
  <a class="navbar__link navbar__link--tiles" href="#">
    <svg class="icon icon--medium icon--hawkes navbar__icon">
      <use xlink:href="/unicorn/assets/icons/icons.svg#icon-info" />
    </svg>
    <span class="navbar__text">Getting Started</span>
  </a>
  <a class="navbar__link navbar__link--tiles" href="#">
    <svg class="icon icon--medium icon--hawkes navbar__icon">
      <use xlink:href="/unicorn/assets/icons/icons.svg#icon-question" />
    </svg>
    <span class="navbar__text">User Guides</span>
  </a>
  <a class="navbar__link navbar__link--tiles" href="#">
    <svg class="icon icon--medium icon--hawkes navbar__icon">
      <use xlink:href="/unicorn/assets/icons/icons.svg#icon-settings" />
    </svg>
    <span class="navbar__text">Mobile</span>
  </a>
  <a class="navbar__link navbar__link--tiles" href="#">
    <svg class="icon icon--medium icon--hawkes navbar__icon">
      <use xlink:href="/unicorn/assets/icons/icons.svg#icon-warning" />
    </svg>
    <span class="navbar__text">FAQ</span>
  </a>
  <a class="navbar__link navbar__link--tiles" href="#">
    <svg class="icon icon--medium icon--hawkes navbar__icon">
      <use xlink:href="/unicorn/assets/icons/icons.svg#icon-pin" />
    </svg>
    <span class="navbar__text">Announcements</span>
  </a>
</nav>

</div>

.navbar {
  justify-content: space-around;
  min-height: 120px;
}

.navbar, .navbar__link {
  align-items: center;
  display: flex;
}

.navbar--tiles {
  height: 100%;
  justify-content: space-between;
  overflow: hidden;
}

.navbar__link {
  flex-direction: column;
  justify-content: center;
  padding: 0 25px;
  text-align: center;
}

.navbar__link--tiles {
  height: 100%;
  position: relative;
  width: 100%;
}

.navbar__link--tiles + .navbar__link--tiles::before {
  content: '';
  width: 2px;
  height: 170%;
  position: absolute;
  left: -2px;
  background-color: $lighten-sky;
  top: -25px;
}

.navbar__text {
  color: #959CA6;
  margin: 20px 0 0;
}

Tables

Tables allows to arrange data like text, images, links, other tables, etc. into rows and columns of cells.

Item	Note
`.table`	(Mandatory) Main class to `<table>` tag. Use this to make it responsive.
`.table--striped`	(Optional) It gives you an alternated color table
`.table__head`	(Mandatory) add this to `<thead>` to work properly
`.table__body`	(Mandatory) add this to `<tbody>` to work properly
`.table__header`	(Mandatory) add this to `<th>` to work properly
`.table__data`	(Mandatory) add this to `<td>` to work properly
`$table-data-names`	Update this variable if you want to add a new table row option. Also it needs to be added as a modifier on the `table__data` e.g. `table__data table__data--gender`
`.table__order`	(Optional) “Just in case you need adding an order component.”

Demo (Open in a new tab)

HTML
CSS

<table  class="table" >
  <thead class="table__head">
    <tr class="table__row">
      
        <th class="table__header table__header--tiny">
          <input name="checkall" id="checkall" data-checkall="default" type="checkbox" class="checkbox table__checkbox">
          <label for="checkall" class="no-space-out" onclick=""></label>
        </th>
      
      
      
        <th  class="table__header" >
           <div class="table__icon"></div> 
          <span class="table__label">First Name</span>
        </th>
      
        <th  class="table__header" >
           <div class="table__icon"></div> 
          <span class="table__label">Last Name</span>
        </th>
      
        <th  class="table__header" >
           <div class="table__icon"></div> 
          <span class="table__label">Email</span>
        </th>
      
        <th  class="table__header" >
           <div class="table__icon"></div> 
          <span class="table__label">Role</span>
        </th>
      
        <th  class="table__header" >
           <div class="table__icon"></div> 
          <span class="table__label">Patrol</span>
        </th>
      
    </tr>
  </thead>
  <tbody class="table__body">
    
      
        <tr class="table__row table__row--link js-sidepanel-open" data-sidepanel="edit">
  <td class="table__data table__data--tiny">
    <input name="check1" id="check1" type="checkbox" class="checkbox table__checkbox">
    <label for="check1" class="table__label no-space-out" onclick=""></label>
  </td>
  <td class="table__data">Jorge</td>
  <td class="table__data">Junior 1</td>
  <td class="table__data">jj1@mail.com</td>
  <td class="table__data">Organizer</td>
  <td class="table__data">1</td>
</tr>

      
    
      
        <tr class="table__row table__row--link js-sidepanel-open" data-sidepanel="edit">
  <td class="table__data table__data--tiny">
    <input name="check2" id="check2" type="checkbox" class="checkbox table__checkbox">
    <label for="check2" class="table__label no-space-out" onclick=""></label>
  </td>
  <td class="table__data">Jorge</td>
  <td class="table__data">Junior 2</td>
  <td class="table__data">jj2@mail.com</td>
  <td class="table__data">Organizer</td>
  <td class="table__data">2</td>
</tr>

      
    
      
        <tr class="table__row table__row--link js-sidepanel-open" data-sidepanel="edit">
  <td class="table__data table__data--tiny">
    <input name="check3" id="check3" type="checkbox" class="checkbox table__checkbox">
    <label for="check3" class="table__label no-space-out" onclick=""></label>
  </td>
  <td class="table__data">Jorge</td>
  <td class="table__data">Junior 3</td>
  <td class="table__data">jj3@mail.com</td>
  <td class="table__data">Organizer</td>
  <td class="table__data">3</td>
</tr>

      
    
      
        <tr class="table__row table__row--link js-sidepanel-open" data-sidepanel="edit">
  <td class="table__data table__data--tiny">
    <input name="check4" id="check4" type="checkbox" class="checkbox table__checkbox">
    <label for="check4" class="table__label no-space-out" onclick=""></label>
  </td>
  <td class="table__data">Jorge</td>
  <td class="table__data">Junior 4</td>
  <td class="table__data">jj4@mail.com</td>
  <td class="table__data">Organizer</td>
  <td class="table__data">4</td>
</tr>

      
    
      
        <tr class="table__row table__row--link js-sidepanel-open" data-sidepanel="edit">
  <td class="table__data table__data--tiny">
    <input name="check5" id="check5" type="checkbox" class="checkbox table__checkbox">
    <label for="check5" class="table__label no-space-out" onclick=""></label>
  </td>
  <td class="table__data">Jorge</td>
  <td class="table__data">Junior 5</td>
  <td class="table__data">jj5@mail.com</td>
  <td class="table__data">Organizer</td>
  <td class="table__data">5</td>
</tr>

      
    
      
        <tr class="table__row table__row--link js-sidepanel-open" data-sidepanel="edit">
  <td class="table__data table__data--tiny">
    <input name="check6" id="check6" type="checkbox" class="checkbox table__checkbox">
    <label for="check6" class="table__label no-space-out" onclick=""></label>
  </td>
  <td class="table__data">Jorge</td>
  <td class="table__data">Junior 6</td>
  <td class="table__data">jj6@mail.com</td>
  <td class="table__data">Organizer</td>
  <td class="table__data">6</td>
</tr>

      
    
      
        <tr class="table__row table__row--link js-sidepanel-open" data-sidepanel="edit">
  <td class="table__data table__data--tiny">
    <input name="check7" id="check7" type="checkbox" class="checkbox table__checkbox">
    <label for="check7" class="table__label no-space-out" onclick=""></label>
  </td>
  <td class="table__data">Jorge</td>
  <td class="table__data">Junior 7</td>
  <td class="table__data">jj7@mail.com</td>
  <td class="table__data">Organizer</td>
  <td class="table__data">7</td>
</tr>

      
    
      
        <tr class="table__row table__row--link js-sidepanel-open" data-sidepanel="edit">
  <td class="table__data table__data--tiny">
    <input name="check8" id="check8" type="checkbox" class="checkbox table__checkbox">
    <label for="check8" class="table__label no-space-out" onclick=""></label>
  </td>
  <td class="table__data">Jorge</td>
  <td class="table__data">Junior 8</td>
  <td class="table__data">jj8@mail.com</td>
  <td class="table__data">Organizer</td>
  <td class="table__data">8</td>
</tr>

      
    
      
        <tr class="table__row table__row--link js-sidepanel-open" data-sidepanel="edit">
  <td class="table__data table__data--tiny">
    <input name="check9" id="check9" type="checkbox" class="checkbox table__checkbox">
    <label for="check9" class="table__label no-space-out" onclick=""></label>
  </td>
  <td class="table__data">Jorge</td>
  <td class="table__data">Junior 9</td>
  <td class="table__data">jj9@mail.com</td>
  <td class="table__data">Organizer</td>
  <td class="table__data">9</td>
</tr>

      
    
      
        <tr class="table__row table__row--link js-sidepanel-open" data-sidepanel="edit">
  <td class="table__data table__data--tiny">
    <input name="check10" id="check10" type="checkbox" class="checkbox table__checkbox">
    <label for="check10" class="table__label no-space-out" onclick=""></label>
  </td>
  <td class="table__data">Jorge</td>
  <td class="table__data">Junior 10</td>
  <td class="table__data">jj10@mail.com</td>
  <td class="table__data">Organizer</td>
  <td class="table__data">10</td>
</tr>

      
    
  </tbody>
</table>

table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  width: 100%;

  * {
    transition: all .2s linear;
  }
}

tr,
td,
th {
  color: if($AdminSPA, $tuna, $cello);
  vertical-align: middle;
}

td,
th {
  padding: 15px 10px;
  text-align: left;

  &:first-child {
    padding-left: 20px;
  }

  &:last-child {
    padding-right: 20px;
  }
}

td {
  border-top: 1px solid $darken-lavender;
}

th {
  font-weight: bold;
  text-transform: uppercase;
}

.table {
  @extend table;

  &__holder {
    min-height: 50px;
    position: relative;
  }

  &__order {
    cursor: pointer;
    display: inline-block;
    max-width: 100px;
    position: relative;
    width: auto;
  }

  &__label {
    margin-right: 5px;

    &:hover ~ .table__icon:not(.is-visible) {
      opacity: .45;
      visibility: visible;
    }
  }

  &__icon {
    bottom: 0;
    height: 16px;
    margin: auto;
    right: 0;

    &,
    > * {
      position: absolute;
      top: 0;
    }

    > * {
      right: -15px;
    }
  }

  &__data {

    &--group {
      padding-top: 25px;
    }

    .table--striped & {
      border: 0;
    }

    @include media(tablet) {

      &::before {
        display: inline-block;
        font-weight: bold;
        min-width: 30%;
        padding-right: 25px;
        position: relative;
        text-transform: uppercase;
        word-wrap: nowrap;
      }

      @each $data-name in $table-data-names {
        &--#{$data-name}::before {
          content: str-replace($data-name, '-', ' ') + ':';
        }
      }
    }

    @include media(mobile) {
      &::before {
        display: block;
      }
    }
  }

  &__data,
  &__header {
    transition: width .5s, height .5s, padding .5s, transform .5s, white-space .5s, visibility .25s, opacity .25s;

    &.is-invisible {
      height: 0;
      overflow: hidden;
      padding: 0;
      transform: scale(0,0) translateX(50%);
      width: 0;
      white-space: nowrap;
    }

    &.is-visible {
      transform: scale(1,1) translateX(0);
    }

    @include media(tablet) {
      display: block;

      &,
      &:first-child,
      &:last-child {
        padding: 10px;
      }
    }
  }

  &__row {

    @include media(tablet) {
      display: table;
      width: 100%;
    }

    .table--striped .table__body & {

      &:not(.table__row--invisible):nth-of-type(2n+1) {
        background-color: $lavender;
      }
    }

    .table--darker .table__body & {
      &:not(.table__row--invisible) {
        background-color: $lavender;
      }
    }

    .table--striped .table__body &,
    .table--darker .table__body & {

      &:not(.table__row--invisible) {
        cursor: pointer;
      }

      &:not(.table__row--invisible):hover {
        background-color: lighten($blue-hex, 25.4);
      }
    }
  }

  &__head {

    @include media(tablet) {
      display: none;
    }

    .table--striped & {
      border-bottom: 1px solid $darken-lavender;
    }
  }
}

Flashes

Callback to user actions.

Item	Note
`.flash`	(Mandatory) combine with `.flash--info` `.flash--warning` `.flash--danger` or `.flash--success` to switch colors.
`.is-visible`	(Mandatory) state to see the message properly. Use `is-invisible` to hide.

Demo (Open in a new tab)

HTML
CSS

<div class="s-spacer">
  

<span class="flash flash--info is-visible">Just an info message... <a href="#" class="flash__link">Some Link</a></span>

<span class="flash flash--warning is-visible">Oh! A warning message! <a href="#" class="flash__link">Some Link</a></span>

<span class="flash flash--danger is-visible">Ouch!!! A danger message!! <a href="#" class="flash__link">Some Link</a></span>

<span class="flash flash--success is-visible">Yay! A success message! <a href="#" class="flash__link">Some Link</a></span>

<span class="flash flash--info flash--top flash--full is-visible">Huge Flash <a href="#" class="flash__link">Some Link</a></span>



</div>

.flash {
  color: #FFF;
  left: 0;
  padding: 15px;
  position: fixed;
  text-align: center;
  top: 0;
  transform-origin: top;
  transition: all .3s ease-in-out;
  width: 100%;
}

.flash--info {
  background: #2E7FED;
}

.flash--warning {
  background: #FABE58;
}

.flash--danger {
  background: #EC644B;
}

.flash--success {
  background: #26A65B;
}

Tooltips

Tooltip may be used to display help information.

Item	Note
`.tooltip`	(Mandatory) Default tooltip class
`.tooltip-inverse`	White background on black text tooltip
`data-tooltip`	Content to display

Demo (Open in a new tab)

HTML
CSS

<div class="s-spacer">
  <span class="tooltip" data-tooltip="Hello!">Hover me </span>
<span class="tooltip tooltip--inverse" data-tooltip="In Reverse!">Hover me </span>
<span class="tooltip tooltip--bottom" data-tooltip="At the bottom!">Hover me </span>
<span class="tooltip tooltip--bottom tooltip--inverse" data-tooltip="Bottom and Reverse!">Hover me </span>

</div>

.tooltip {
  opacity: 1;
  position: relative;
  text-align: center;
}

.tooltip::before {
  height: 0px;
  width: 0px;
  border-left: solid 7px transparent;
  border-right: solid 7px transparent;
  border-top: solid 7px #2C2F30;
  content: '';
  top: -16px;
  z-index: 1005;
}

.tooltip::after {
  background: #2C2F30;
  border-radius: 25px;
  box-shadow: 1px 1px 10px rgba(9, 9, 9, 0.55);
  color: #FFF;
  content: attr(data-tooltip);
  @include font-size($fs-small);
  font-weight: bold;
  min-width: 60px;
  padding: 10px;
  top: -52px;
  white-space: nowrap;
  z-index: 1004;
}

.tooltip::after,
.tooltip::before {
  left: 50%;
  opacity: 0;
  position: absolute;
  transform: translateX(-50%) translateY(-2px);
  transition: all 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  visibility: hidden;
}

.tooltip:hover::after,
.tooltip:hover::before {
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  visibility: visible;
}

.tooltip--inverse::before {
  border-top-color: #FFF;
}

.tooltip--inverse::after {
  background-color: #FFF;
  color: #000;
}

Lists

This list element is for grouping a collection of items.

Item	Note
`.list`	(Mandatory) Main Class.

Demo (Open in a new tab)

HTML
CSS

<div class="s-spacer">
  
  <nav class="list">
  <li class="list__item">
    <a href="/unicorn/styleguide/template-account.html" class="list__link">
      <div class="list__content">
        <svg class="icon icon--tiny list__icon">
          <use xlink:href="/unicorn/assets/icons/icons.svg#icon-edit" />
        </svg>
        <span class="list__text">Update Info</span>
      </div>
      <svg class="icon icon--tiny icon--darken-sky">
        <use xlink:href="/unicorn/assets/icons/icons.svg#icon-arrow-right" />
      </svg>
    </a>
  </li>
  <li class="list__item">
    <a href="/unicorn/styleguide/template-billing.html" class="list__link">
      <div class="list__content">
        <svg class="icon icon--tiny list__icon">
          <use xlink:href="/unicorn/assets/icons/icons.svg#icon-card" />
        </svg>
        <span class="list__text">Payment</span>
      </div>
      <svg class="icon icon--tiny icon--darken-sky">
        <use xlink:href="/unicorn/assets/icons/icons.svg#icon-arrow-right" />
      </svg>
    </a>
  </li>
  <li class="list__item">
    <a href="#" class="list__link js-sidepanel-open" data-type="plans">
      <div class="list__content">
        <svg class="icon icon--tiny list__icon">
          <use xlink:href="/unicorn/assets/icons/icons.svg#icon-shuffle" />
        </svg>
        <span class="list__text">Change Plan</span>
      </div>
      <svg class="icon icon--tiny icon--darken-sky">
        <use xlink:href="/unicorn/assets/icons/icons.svg#icon-arrow-right" />
      </svg>
    </a>
  </li>
  <li class="list__item is-active">
    <a href="#" class="list__link">
      <div class="list__content">
        <svg class="icon icon--tiny list__icon">
          <use xlink:href="/unicorn/assets/icons/icons.svg#icon-plus-circle" />
        </svg>
        <span class="list__text">Add User</span>
      </div>
      <svg class="icon icon--tiny icon--darken-sky">
        <use xlink:href="/unicorn/assets/icons/icons.svg#icon-arrow-right" />
      </svg>
    </a>
  </li>
</nav> 

  <div class="list">
  <ul class="list list--bordered no-scroll">
    <li class="list__item">
      <input name="peopleSettings" id="import3rdParty" type="radio" class="list__radio" checked>
      <label for="import3rdParty" class="list__toggle no-space-out" onclick="">
        <div class="list__content">
          <div class="list__badge card__badge badge badge--medium badge--center">
            <svg class="icon icon--small icon--light-slategray">
              <use xlink:href="/unicorn/assets/icons/icons.svg#icon-import" />
            </svg>
          </div>
        </div>
        <div class="list__data list__data--fit">
          <span class="list__text">Import from 3rd Party Services</span>
          <small class="list__subtext">Get your contacts from Google, iCloud or Microsoft</small>
        </div>
      </label>
    </li>
    <li class="list__item">
      <input name="peopleSettings" id="importCsv" type="radio" class="list__radio">
      <label for="importCsv" class="list__toggle no-space-out" onclick="">
        <div class="list__content">
          <div class="list__badge card__badge badge badge--medium badge--center">
            <svg class="icon icon--small icon--light-slategray">
              <use xlink:href="/unicorn/assets/icons/icons.svg#icon-upload" />
            </svg>
          </div>
        </div>
        <div class="list__data list__data--fit">
          <span class="list__text">Upload a CSV File</span>
          <small class="list__subtext">Import from spreadsheet</small>
        </div>
      </label>
    </li>
    <li class="list__item">
      <input name="peopleSettings" id="importClipboard" type="radio" class="list__radio">
      <label for="importClipboard" class="list__toggle no-space-out" onclick="">
        <div class="list__content">
          <div class="list__badge card__badge badge badge--medium badge--center">
            <svg class="icon icon--small icon--light-slategray">
              <use xlink:href="/unicorn/assets/icons/icons.svg#icon-clipboard" />
            </svg>
          </div>
        </div>
        <div class="list__data list__data--fit">
          <span class="list__text">Paste from Clipboard</span>
          <small class="list__subtext">CTRL + V on the way</small>
        </div>
      </label>
    </li>
    <li class="list__item">
      <input name="peopleSettings" id="shareLink" type="radio" class="list__radio">
      <label for="shareLink" class="list__toggle no-space-out" onclick="">
        <div class="list__content">
          <div class="list__badge card__badge badge badge--medium badge--center">
            <svg class="icon icon--small icon--light-slategray">
              <use xlink:href="/unicorn/assets/icons/icons.svg#icon-link" />
            </svg>
          </div>
        </div>
        <div class="list__data list__data--fit">
          <span class="list__text">Share a Link</span>
          <small class="list__subtext">Just send a link and don’t add anyone</small>
        </div>
      </label>
    </li>
    <li class="list__item">
      <input name="peopleSettings" id="addManually" type="radio" class="list__radio">
      <label for="addManually" class="list__toggle no-space-out" onclick="">
        <div class="list__content">
          <div class="list__badge card__badge badge badge--medium badge--center">
            <svg class="icon icon--small icon--light-slategray">
              <use xlink:href="/unicorn/assets/icons/icons.svg#icon-user" />
            </svg>
          </div>
        </div>
        <div class="list__data list__data--fit">
          <span class="list__text">Add People Manually</span>
          <small class="list__subtext">Start typing their names</small>
        </div>
      </label>
    </li>
  </ul>
</div>


</div>

.list {
  height: auto;
  position: relative;
  width: 100%;
}

.list__item {
  border-bottom: 1px solid #eff1f7;
  display: block;
  height: 70px;
}

.list__link {
  align-items: center;
  color: #bdbdbd;
  display: flex;
  flex-direction: row;
  height: 100%;
  padding: 0 30px;
}

.list__icon {
  fill: #6B7C93;
}

.list__text {
  color: #6B7C93;
  margin: 0 0 0 15px;
}

Pagination

Consecutive page numbering to indicate the proper order of the pages.

Item	Note
`.pagination`	(Mandatory) Main class.

Demo (Open in a new tab)

HTML
CSS

<div class="s-spacer">
  <div class="pagination">
  <div class="pagination__holder">
    <a href="#" class="pagination__button is-disabled">First</a>
    <a href="#" class="pagination__button pagination__button--previous"></a>
    <nav class="pagination__nav">
      <a href="#" class="pagination__link">1</a>
      <a href="#" class="pagination__link is-active">2</a>
      <a href="#" class="pagination__link">3</a>
      <span class="pagination__link is-disabled">...</span>
      <a href="#" class="pagination__link">10</a>
    </nav>
    <a href="#" class="pagination__button pagination__button--next"></a>
    <a href="#" class="pagination__button">Last</a>
  </div>
</div>

</div>

.pagination {
  align-items: center;
  display: flex;
  margin: auto;
  justify-content: center;
  padding: 15px;
}

.pagination__nav,
.pagination__button {
  background-color: #FFF;
  border: 1px solid #EEE;
  border-radius: 4px;
}

.pagination__button,
.pagination__link {
  padding: 8px 12px;
}

.pagination__button.is-active,
.pagination__button:hover,
.pagination__link.is-active,
.pagination__link:hover {
  background-color: #2E7FED;
  border-color: #2E7FED;
  color: #FFF;
}

.pagination__nav {
  display: flex;
  margin: 0 5px;
  overflow: hidden;
}

.pagination__link:not(:first-of-type):not(.is-active) {
  border-left: 1px solid #EEE;
}

.pagination__link.is-active {
  cursor: default;
}

@media (max-width: 480px) {
  .pagination__link:not(.is-active) {
    display: none;
  }
}
.pagination__button.is-disabled,
.pagination__button.is-disabled:hover {
  background-color: #FFF;
  border-color: #EEE;
  color: #BEC5CF;
  cursor: default;
}

Dropdowns

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list.

Item	Note
`.dropdown`	(Mandatory) Main class.
`.dropdown__list`	Menu area.
`sizes`	`.dropdown__list--small` (102), `.dropdown__list--medium` (170), `.dropdown__list--big` (250)

Demo (Open in a new tab)

HTML
CSS

<div class="s-spacer">
  
  <div class="dropdown dropdown--header">
  <div class="dropdown__holder">
    <a href="#" class="dropdown__button">
      <div class="dropdown__content dropdown__content--auto">
        <div class="dropdown__avatar">
          <svg class="icon  icon--small  icon--gray">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-buildings" />
          </svg>
        </div>
        <span class="dropdown__text is-mobile-hidden"> Eventene </span>
      </div>
      <svg class="icon icon--tiny icon--darken-sky dropdown__icon no-space-out">
        <use xlink:href="/unicorn/assets/icons/icons.svg#icon-arrow-down" />
      </svg>
    </a>
    <ul class="dropdown__list dropdown__list--big">
      <li class="dropdown__item">
        <div class="dropdown__row dropdown__row--first">
          <svg class="icon icon--tiny icon--light-slategray">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-person" />
          </svg>
          <span class="dropdown__subtitle">Participant</span>
        </div>
      </li>
      <li class="dropdown__item ">
        <a href="/unicorn/styleguide/template-participant-events.html" class="dropdown__link">
          <span class="dropdown__legend dropdown__legend--break">Josh Lion</span>
        </a>
      </li>
      <li class="dropdown__item">
        <div class="dropdown__row dropdown__row--tighter">
          <svg class="icon icon--tiny icon--light-slategray">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-buildings" />
          </svg>
          <span class="dropdown__subtitle">Organizations</span>
        </div>
      </li>
      <li class="dropdown__item  is-selected ">
        <a href="/unicorn/styleguide/template-dashboard.html" class="dropdown__link">
          <span class="dropdown__legend dropdown__legend--break">Eventene</span>
        </a>
      </li>
      <li class="dropdown__item">
        <a href="/unicorn/styleguide/template-dashboard.html" class="dropdown__link">
          <span class="dropdown__legend dropdown__legend--break">Facebook</span>
        </a>
      </li>
      <li class="dropdown__item">
        <a href="/unicorn/styleguide/template-dashboard.html" class="dropdown__link">
          <span class="dropdown__legend dropdown__legend--break">Meetup</span>
        </a>
      </li>
    </ul>
  </div>
</div>


</div>

.dropdown {
  height: 60px;
  width: 200px;
  z-index: auto;
}

.dropdown__holder {
  height: 100%;
  position: relative;
  width: 100%;
}

.dropdown__button {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 100%;
  justify-content: space-between;
  margin: 0;
  min-width: 100%;
  padding: 0 20px;
  position: relative;
  right: 0;
  top: 0;
}

.dropdown__content {
  align-items: center;
  display: flex;
  width: calc(100% - 16px);
}

.dropdown__text {
  display: inline;
  padding: 0 5px 0 0;
  text-align: left;
  text-transform: capitalize;
  transition: color .3s linear;
  vertical-align: middle;

}

.dropdown__icon {
  margin: auto;
  transform: rotate(0deg);
  transition: transform .3s linear;
}

.dropdown__list {
  background-color: #FFF;
  opacity: 0;
  overflow: auto;
  padding: 0;
  transition: all .375s ease-in-out 0s;
  visibility: hidden;
  z-index: 978;
}

.dropdown__link {
  display: flex;
  overflow: hidden;
  padding: 20px;
  width: 100%;
}

.dropdown__link:hover {
  background-color: #F8F9FB;
}

.dropdown__legend {
  color: #959CA6;
}

Loaders

Loader animations for application usage.

Item	Note
`.loader`	(mandatory) main area.
`.loader__holder`	(mandatory) use this to keep the loader centered.
`.loader__item--outline`	loader using stroke animation.
`.loader__item--fade`	loader using fade animation.

Demo (Open in a new tab)

HTML
CSS

<div class="loader loader--full">
  <div class="loader__holder">
    <svg class="loader__item loader__item--outline" viewBox="0 0 1203 193" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <path id="path_e1" fill-rule="evenodd" d="M126.501 142.452H27.43l5.073-16.35h86.063L89.791 66.863H50.897l5.086-16.35h25.873L57.323 0 44.644 40.843l-.017-.013-34.238 110.26.018.013L0 184.652c.867 3.511 3.096 6.48 6.114 8.344h144.911l-24.524-50.54"/>
      <path id="path_e2" fill-rule="evenodd" d="M148.259.004H0l24.109 49.647-.044.035.412.832 53.134 109.436.044-.035 16.043 33.055 1.821-5.873 7.133-22.938 6.738-21.707H83.478l-7.948-16.35h38.938l18.385-59.238h-86.08l-7.935-16.35h99.101l13.876-44.675c-.694-2.237-1.9-4.248-3.547-5.843" transform="translate(67.56)"/>
      <path id="path_event" fill-rule="evenodd" d="M0 131.546L35.924.026h93.907l-8.542 31.355H66.073l-3.88 14.157H113.4l-8.628 31.355H53.607l-6.374 23.293h55.111l-8.429 31.36H0zm144.747 0L134.817.026h39.207l4.31 79 46.266-79h41.964l-81.839 131.52h-39.991.013zm92.718 0L273.381.026h93.906l-8.529 31.355h-55.224l-3.881 14.157h51.209l-8.637 31.355h-51.166l-6.387 23.293h55.098l-8.425 31.36h-93.88zm192.032 0l-26.979-76.399-20.87 76.373h-36.271L381.301 0h39.905l22.712 62.529L460.924 0h36.367l-35.924 131.529h-31.87v.017zm78.916-.017l27.252-99.744h-36.874L507.42.013h112.565l-8.629 31.771h-36.857l-27.252 99.754h-38.808" transform="translate(217.81 46.02)"/>
      <path id="path_ene" fill-rule="evenodd" d="M125.789 0l-6.729 24.737H60.956L54.605 47.89h53.876l-6.808 24.733H47.827L38.834 105.4H96.85l-6.642 24.732H0L35.538 0h90.256-.005zm104.678 130.133h-27.448L171.193 40.02l-24.603 90.113h-29.603L152.53 0h35.946l27.361 75.333L236.329 0h29.685l-35.547 130.133zM387.758 0l-6.721 24.737h-58.13l-6.352 23.154h53.876l-6.808 24.733h-53.854l-8.984 32.777h58.016l-6.643 24.732h-90.216L297.489 0h90.256" transform="translate(815.24 46.23)"/>
    </svg>
    <svg class="loader__item loader__item--fade" viewBox="0 0 1203 193" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <path id="path_e1" fill-rule="evenodd" d="M126.501 142.452H27.43l5.073-16.35h86.063L89.791 66.863H50.897l5.086-16.35h25.873L57.323 0 44.644 40.843l-.017-.013-34.238 110.26.018.013L0 184.652c.867 3.511 3.096 6.48 6.114 8.344h144.911l-24.524-50.54"/>
      <path id="path_e2" fill-rule="evenodd" d="M148.259.004H0l24.109 49.647-.044.035.412.832 53.134 109.436.044-.035 16.043 33.055 1.821-5.873 7.133-22.938 6.738-21.707H83.478l-7.948-16.35h38.938l18.385-59.238h-86.08l-7.935-16.35h99.101l13.876-44.675c-.694-2.237-1.9-4.248-3.547-5.843" transform="translate(67.56)"/>
      <path id="path_event" fill-rule="evenodd" d="M0 131.546L35.924.026h93.907l-8.542 31.355H66.073l-3.88 14.157H113.4l-8.628 31.355H53.607l-6.374 23.293h55.111l-8.429 31.36H0zm144.747 0L134.817.026h39.207l4.31 79 46.266-79h41.964l-81.839 131.52h-39.991.013zm92.718 0L273.381.026h93.906l-8.529 31.355h-55.224l-3.881 14.157h51.209l-8.637 31.355h-51.166l-6.387 23.293h55.098l-8.425 31.36h-93.88zm192.032 0l-26.979-76.399-20.87 76.373h-36.271L381.301 0h39.905l22.712 62.529L460.924 0h36.367l-35.924 131.529h-31.87v.017zm78.916-.017l27.252-99.744h-36.874L507.42.013h112.565l-8.629 31.771h-36.857l-27.252 99.754h-38.808" transform="translate(217.81 46.02)"/>
      <path id="path_ene" fill-rule="evenodd" d="M125.789 0l-6.729 24.737H60.956L54.605 47.89h53.876l-6.808 24.733H47.827L38.834 105.4H96.85l-6.642 24.732H0L35.538 0h90.256-.005zm104.678 130.133h-27.448L171.193 40.02l-24.603 90.113h-29.603L152.53 0h35.946l27.361 75.333L236.329 0h29.685l-35.547 130.133zM387.758 0l-6.721 24.737h-58.13l-6.352 23.154h53.876l-6.808 24.733h-53.854l-8.984 32.777h58.016l-6.643 24.732h-90.216L297.489 0h90.256" transform="translate(815.24 46.23)"/>
    </svg>
  </div>
</div>

.loader__holder {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
}

.loader__item {
  width: 50%;
}

.loader__item--outline * {
  -webkit-animation: lineFill 4s infinite;
  animation: lineFill 4s infinite;
  fill: transparent;
  stroke: #000;
  -webkit-transition: stroke-dasharray 5s;
  transition: stroke-dasharray 5s;
}

.loader__item--fade * {
  fill: #DADCE5;
  -webkit-animation: svgFade 3s infinite alternate-reverse;
  animation: svgFade 3s infinite alternate-reverse;
  -webkit-transition: fill-opacity 1s linear;
  transition: fill-opacity 1s linear;
}

.loader__item--fade path:nth-child(1) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.loader__item--fade path:nth-child(2) {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
}

.loader__item--fade path:nth-child(3) {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

.loader__item--fade path:nth-child(4) {
  -webkit-animation-delay: 2.1s;
  animation-delay: 2.1s;
}

@-webkit-keyframes lineFill {
  from { stroke-dasharray: 250; }
  to { stroke-dasharray: 1000; }
}

@keyframes lineFill {
  from { stroke-dasharray: 250; }
  to { stroke-dasharray: 1000; }
}

@-webkit-keyframes svgFade {
  from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}

@keyframes svgFade {
  from { fill-opacity: 0; }
  to { fill-opacity: 1; }
}

Actions

Main filter bar for tables.

Item	Note
`.actionbar`	(mandatory) main area.

Demo (Open in a new tab)

HTML
CSS

<div class="s-spacer">
  <ul class="card__actions actionbar">
  
    
  
  <li class="card__action">
    <div class="search">
      <input type="search" placeholder="Search Here..." class="input input--invisible search__input">
      <svg class="search__icon icon icon--tiny icon--slategray">
        <use xlink:href="/unicorn/assets/icons/icons.svg#icon-search" />
      </svg>
    </div>
  </li>
  
    <li class="card__action">
      <div class="dropdown dropdown--floating">
        <div class="dropdown__holder">
          <a href="#" class="dropdown__button">
            <div class="dropdown__content">
              <span class="dropdown__label">Show</span>
              <strong class="dropdown__selection">10</strong>
            </div>
            <svg class="icon icon--tiny icon--slategray dropdown__icon">
              <use xlink:href="/unicorn/assets/icons/icons.svg#icon-arrow-down"></use>
            </svg>
          </a>
          <ul class="dropdown__list dropdown__list--floating dropdown__list--small">
            <li class="dropdown__item">
              <a href="#" class="dropdown__link">
                <span class="dropdown__legend">10</span>
              </a>
            </li>
            <li class="dropdown__item">
              <a href="#" class="dropdown__link">
                <span class="dropdown__legend">20</span>
              </a>
            </li>
            <li class="dropdown__item">
              <a href="#" class="dropdown__link">
                <span class="dropdown__legend">50</span>
              </a>
            </li>
            <li class="dropdown__item">
              <a href="#" class="dropdown__link">
                <span class="dropdown__legend">100</span>
              </a>
            </li>
            
          </ul>
        </div>
      </div>
    </li>
  
  
</ul>

</div>

Alerts

Fixed alerts.

Item	Note
`.alert`	(Mandatory) combine with `.alert--info` `.alert--warning` `.alert--error` or `.alert--success` to switch colors.

Demo (Open in a new tab)

HTML
CSS

<div class="s-spacer">
  <span class="alert" role="alert">Default Alert.</span>

<span class="alert alert--info" role="alert">Don't forget to verify your account.</span>

<span class="alert alert--warning" role="alert">Be careful on this!</span>

<span class="alert alert--danger" role="alert">Please fix the fields below!</span>

<span class="alert alert--success" role="alert">You're good to go!</span>

</div>

.alert {
  border: 1px solid transparent;
  border-radius: .25rem;
  display: block;
  margin-bottom: 1rem;
  padding: .75rem 1.25rem;
  position: relative;
}

.alert--info {
  background-color: #eaf2fd;
  border-color: #d2e4fb;
  color: #0a3978;
}

.alert--warning {
  background-color: #fef8ed;
  border-color: #feeed4;
  color: #b47305;
}

.alert--danger {
  background-color: #fdefec;
  border-color: #fbdbd5;
  color: #8f230f;
}

.alert--success {
  background-color: #eafaf1;
  border-color: #d6f6e3;
  color: #13532e;
}

Toggles

Custom Radio Button.

Item	Note

Demo (Open in a new tab)

HTML
CSS

<div class="s-spacer">
  <div class="toggle ">
  
    <div class="toggle__item">
  <input class="toggle__el" id="Create" name="view" type="radio" checked>
  <label class="toggle__button" for="Create" onclick="">
    <svg class="icon icon--small icon--darken-sky">
      <use xlink:href="/unicorn/assets/icons/icons.svg#icon-file" />
    </svg>
    <strong class="toggle__text">Create from Scratch</strong>
    <small class="toggle__desc">Start with a blank Event</small>
  </label>
</div>
<div class="toggle__item">
  <input class="toggle__el" id="Copy" name="view" type="radio" disabled>
  <label class="toggle__button" for="Copy" onclick="">
    <svg class="icon icon--small icon--darken-sky">
      <use xlink:href="/unicorn/assets/icons/icons.svg#icon-copy" />
    </svg>
    <strong class="toggle__text">Copy an Existing Event</strong>
    <small class="toggle__desc">Build from previous Event</small>
  </label>
</div>

  
</div>

</div>

Switches

Custom Checkbox Controls.

Item	Note

Demo (Open in a new tab)

HTML
CSS

<div class="s-spacer">
  <label onclick="" for="billingPeriod" class="switch switch--reverse">
  <input id="billingPeriod" type="checkbox" class="switch__el">
  <span class="switch__text switch__text--reverse switch__text--siblings">Billed Annually</span>
  <span class="switch__holder switch__holder--reverse">
    <a class="switch__button switch__button--reverse"></a>
  </span>
  <span class="switch__text switch__text--reverse switch__text--siblings">Billed Monthly</span>
</label>
</div>

Panes

Custom labeled elements.

Item	Note
`.pane`	(mandatory) main area.
`.pane--tighter`	(Optional) In case you need adding padding.

Demo (Open in a new tab)

HTML
CSS

<div class="s-spacer">
  <article class="pane pane--signed pane--draggable no-space-out has-full-width">
  <span class="pane__sign pane__sign--brown"></span>
  <div class="pane__content pane__content--unbreak">
    <div class="pane__info has-full-width">
      <p class="no-space-out pane__text pane__text--truncate">
        <span class="has-truncate-text">User </span>
        <small class="has-truncate-text">item 1 • item 2 • item
          3</small>
      </p>
    </div>
  </div>
  <div class="pane__actions pane__actions--start">
    <div class="dropdown dropdown--floating dropdown--table">
      <div class="dropdown__holder">
        <a href="#" class="button button--circle button--transparent no-space-out">
          <svg class="icon icon--tiny">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-dots-vertical" />
          </svg>
        </a>
        <ul class="dropdown__list dropdown__list--floating dropdown__list--small dropdown__list--last">
          <li class="dropdown__item">
            <a href="#" class="dropdown__link">
              <span class="dropdown__legend">Action 1</span>
            </a>
          </li>
          <li class="dropdown__item">
            <a href="#" class="dropdown__link">
              <span class="dropdown__legend">Action 2</span>
            </a>
          </li>
          <li class="dropdown__item">
            <a href="#" class="dropdown__link">
              <span class="dropdown__legend">Action 3</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</article>

<article class="pane pane--tighter">
  <div class="pane__content">
    <span class="pane__badge badge badge--medium badge--text"></span>
    <div class="pane__info pane__info--center">
      <strong>First Name</strong>
    </div>
  </div>
  <div class="pane__actions pane__actions--start">
    <div class="dropdown dropdown--floating dropdown--table">
      <div class="dropdown__holder">
        <a href="#" class="button button--circle button--transparent no-space-out">
          <svg class="icon icon--tiny">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-dots-vertical" />
          </svg>
        </a>
        <ul class="dropdown__list dropdown__list--floating dropdown__list--small dropdown__list--last">
          <li class="dropdown__item">
            <a href="#" class="dropdown__link">
              <span class="dropdown__legend">Edit</span>
            </a>
          </li>
          <li class="dropdown__item">
            <a href="#" class="dropdown__link">
              <span class="dropdown__legend">Move</span>
            </a>
          </li>
          <li class="dropdown__item">
            <a href="#" class="dropdown__link">
              <span class="dropdown__legend is-danger">Delete</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</article>

<article class="pane">
  <div class="pane__content">
    <span class="pane__badge badge badge--medium badge--comment"></span>
    <div class="pane__info">
      <strong class="has-long-text">Baggage Question</strong>
      <div class="pane__info">
        <p class="has-long-text">Which kind of bags will you be bringing?</p>
      </div>
      <div class="pane__info">
        <span class="tag tag--gray">People</span>
        <span class="tag tag--gray">Required</span>
      </div>
    </div>
  </div>
  <div class="pane__actions pane__actions--start">
    <div class="dropdown dropdown--floating dropdown--table">
      <div class="dropdown__holder">
        <a href="#" class="button button--circle button--transparent no-space-out">
          <svg class="icon icon--tiny">
            <use xlink:href="/unicorn/assets/icons/icons.svg#icon-dots-vertical" />
          </svg>
        </a>
        <ul class="dropdown__list dropdown__list--floating dropdown__list--small dropdown__list--last">
          <li class="dropdown__item">
            <a href="#" class="dropdown__link">
              <span class="dropdown__legend">Move</span>
            </a>
          </li>
          <li class="dropdown__item">
            <a href="#" class="dropdown__link">
              <span class="dropdown__legend is-danger">Delete</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</article>

</div>

Charts

graphical representation for data visualization.

Item	Note
`.chart`	(mandatory) main class.

Demo (Open in a new tab)

HTML
CSS

<div class="s-spacer">
  

  <div class="chart chart--donut">
    <div class="chart__slice chart__slice--donut chart__slice--completed"></div>
    <div class="chart__slice chart__slice--donut chart__slice--incomplete"></div>
  </div>



  

  <div class="chart chart--doughnut">
    <div class="chart__slice chart__slice--doughnut chart__slice--sections-master"></div>
    <div class="chart__slice chart__slice--doughnut chart__slice--sections-segmented"></div>
  </div>



</div>

Color-picker

Custom selector for theming.

Item	Note
`.color-picker`	(Mandatory) main class.
`.color-picker__item`	Wraps the component with on-click selection border
`.color-picker__dot`	Round shape default setting

Demo (Open in a new tab)

HTML
CSS

<div class="s-spacer">
  <div class="color-picker">
  
    <label class="color-picker__item  is-selected " for="color-1">
      <input class="input color-picker__input" name="color" id="color-1" type="radio" onclick=""></input>
      <div class="color-picker__dot color-picker__dot--blue" data-dot></div>
    </label>
  
    <label class="color-picker__item " for="color-2">
      <input class="input color-picker__input" name="color" id="color-2" type="radio" onclick=""></input>
      <div class="color-picker__dot color-picker__dot--flamingo" data-dot></div>
    </label>
  
    <label class="color-picker__item " for="color-3">
      <input class="input color-picker__input" name="color" id="color-3" type="radio" onclick=""></input>
      <div class="color-picker__dot color-picker__dot--lavender" data-dot></div>
    </label>
  
    <label class="color-picker__item " for="color-4">
      <input class="input color-picker__input" name="color" id="color-4" type="radio" onclick=""></input>
      <div class="color-picker__dot color-picker__dot--yellow" data-dot></div>
    </label>
  
    <label class="color-picker__item " for="color-5">
      <input class="input color-picker__input" name="color" id="color-5" type="radio" onclick=""></input>
      <div class="color-picker__dot color-picker__dot--green" data-dot></div>
    </label>
  
    <label class="color-picker__item " for="color-6">
      <input class="input color-picker__input" name="color" id="color-6" type="radio" onclick=""></input>
      <div class="color-picker__dot color-picker__dot--lavender-magenta" data-dot></div>
    </label>
  
    <label class="color-picker__item " for="color-7">
      <input class="input color-picker__input" name="color" id="color-7" type="radio" onclick=""></input>
      <div class="color-picker__dot color-picker__dot--selective-yellow" data-dot></div>
    </label>
  
    <label class="color-picker__item " for="color-8">
      <input class="input color-picker__input" name="color" id="color-8" type="radio" onclick=""></input>
      <div class="color-picker__dot color-picker__dot--viking-blue" data-dot></div>
    </label>
  
    <label class="color-picker__item " for="color-9">
      <input class="input color-picker__input" name="color" id="color-9" type="radio" onclick=""></input>
      <div class="color-picker__dot color-picker__dot--copper" data-dot></div>
    </label>
  
    <label class="color-picker__item " for="color-10">
      <input class="input color-picker__input" name="color" id="color-10" type="radio" onclick=""></input>
      <div class="color-picker__dot color-picker__dot--picton-blue" data-dot></div>
    </label>
  
</div>

</div>