logo-mark Created with Sketch. Created by FontForge 20170731 at Tue Dec 2 15:06:59 2014 By Aleksey,,, Copyright (c) 2014 by Cruzine. All rights reserved.

Component Library

Engineering Team — Build faster, get the HTML for common UI components.

Buttons
<button class="o-button--green">Button</button>

// Black o-button--green
// Black o-button--dark
// Grey o-button--grey
// Red o-button--red
// Disabled o-button--disabled
<button class="o-button--dark o-button--mini">Button</button>
<button class="o-button o-button--green">
  <span class="o-button__label">Button</span>
  <i class="o-button__icon--right o-button__icon--white">
    <svg class="l-button__svg-arrow o-button__svg o-button__svg--green"><use xlink:href="#arrow-right"/></svg>
  </i>
</button>
<button class="o-button o-button--green">
  <i class="o-button__icon--left o-button__icon--white">
    <svg class="l-button__svg-arrow o-button__svg o-button__svg--green"><use xlink:href="#arrow-right"/></svg>
  </i>
  <span class="o-button__label">Button</span>
</button>
Tags
Tag WhiteTag Black
<span class="o-tag">Tag White/span>
<span class="o-tag o-tag--black">Tag Black/span>
Messages
Success message. Click here
<span class="o-alert o-alert--success l-alert-banner">
  <span>Success message. Click <a href="">here</a> </span>
  <button class="o-alert__close"><svg><use xlink:href="#cross"/></svg></button>
</span>
Error message.
<span class="o-alert o-alert--danger l-alert-banner">
  <span>Error message.</span>
  <button class="o-alert__close"><svg><use xlink:href="#cross"/></svg></button>
</span>
Warning message.
<span class="o-alert o-alert--warning l-alert-banner">
  <span>Warning message.</span>
  <button class="o-alert__close"><svg><use xlink:href="#cross"/></svg></button>
</span>
Info message.
<span class="o-alert o-alert--info l-alert-banner">
  <span>Info message.</span>
  <button class="o-alert__close"><svg><use xlink:href="#cross"/></svg></button>
</span>
Inline banner.
//Remove l-alert-banner class for inline banner

<span class="o-alert o-alert--info">
  <span>Inline banner.</span>
  <button class="o-alert__close"><svg><use xlink:href="#cross"/></svg></button>
</span>