logo-mark Shape arrow-right arrow-right arrow-right Group Group chevron-vertical Created with Sketch. chevron-vertical Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group Group 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.

Badges
New
<span class="o-badge">New/span>
//Tutorial is a Video Course or Screencast

<i class="o-badge o-badge-video">
  <svg><use xlink:href="#video-camera"></use></svg>
</i>
//Tutorial requires subscription

<i class="o-badge o-badge-tutorial o-badge-tutorial--locked">
  <svg><use xlink:href="#padlock"></use></svg>
</i>
//Tutorial coming soon

<i class="o-badge o-badge-tutorial o-badge-tutorial--recording">
  <svg><use xlink:href="#video-camera"></use></svg>
</i>
Buttons
<button class="o-button--green">Button</button>

// Green o-button--green
// Dark 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>
Content Layouts
//Featured layout wrapper

<div class="c-tutorial--featured">
  //Add tutorials here
</div>
//List layout wrapper

<div class="c-tutorial--list">
  //Add tutorials here
</div>
//Grid layout wrapper

<div class="c-tutorial--list c-tutorial--mason">
  //Add tutorials here
</div>
//Mini list layout l-list-item-wrapper

<div class="c-tutorial--list c-tutorial--mason c-tutorial--mason-mini">
  //Add tutorials here
</div>
Inputs
The email field must be a valid email.
//Light with label and error
<div class="l-relative">
  <label class="o-label">Email</label>
  <input type="" name="" class="o-input">
  <span class="form__validation form__validation--error">The email field must be a valid email.</span>
</div>

//Dark
<input type="" name="" class="o-input--dark">
//Light
<textarea class="o-textarea"></textarea>

//Dark
<textarea class="o-textarea o-textarea--dark"></textarea>
//Light
<label class="o-checkbox">
  <input type="checkbox" class="checkbox__input">
  <span class="checkbox__indicator">
    <svg>
      <use xlink:href="#checkmark"></use>
    </svg>
  </span>
</label>

//Dark
<label class="o-checkbox o-checkbox--dark">
  <input type="checkbox" class="checkbox__input">
  <span class="checkbox__indicator">
    <svg>
      <use xlink:href="#checkmark"></use>
    </svg>
  </span>
</label>
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>
Progress Bars
<span class="o-progress-indicator">
  <span class="o-progress-indicator__fill o-progress-indicator__fill--green"></span>
</span>
Tabs
  • Tab 1
  • Tab 2
  • Tab 3
<ul class="c-tabs">
  <li class="c-tabs--active">Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>
Tags
Tag Light
Tag Dark
//Light
<span class="o-tag">Tag Light/span>

//Dark
<span class="o-tag o-tag--dark">Tag Black/span>
Tooltips
Hover me for a tooltip
//Use the data-tooltip attribute to any element

<span data-tooltip="Hellotip</span>