RTL

Typography

Headings

All HTML headings from h1 to h6 are available, and there is a special case for the page header with an optional subheading.
A set of alternate headings with borders is also available.

Using the .h1, .h2, .h3, .h4, .h5, .h6 classes activates an alternative typography.

Default

<h1>

A smart

<h2>

easy-to-use

<h3>

toolkit

<h4>

for creating

<h5>
rich interfaces
<h6>
in lightning speed!
<h2 class="h-sub">

in lightning speed!

Alternative

<h1 class="h-lead">

A smart

<h1 class="h1">

A smart

<h2 class="h2">

easy-to-use

<h3 class="h3">

toolkit

<h4 class="h4">

for creating

<h5 class="h5">
rich interfaces
<h6 class="h6">
in lightning speed!

Page Heading

Lorem ipsum dolor sit amet

show code hide code 
<h1>Lorem ipsum <span class="sub">dolor sit amet</span></h1>

Subheading Divider

Sodales at enim

show code hide code 
<h3 class="subh-divider mbl">Sodales at enim</h3>

From standard basic links to more specific links.

Standard default links
Links in titles or headers
Links with text style

show code hide code 
<p>
  <a href="">Standard default links</a><br />
  <a class="lnk-title" href="">Links in titles or headers</a><br />
  <a class="lnk-text" href="">Links with text style</a>
</a>

Paragraphs

A bottom margin is applied to paragraphs elements p, this can be costomized with helpers.

To activate hyphenation, use a class="hyph" on the p tags or on a container. This is now supported by Firefox, IE10, and Safari Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum laoreet dolor, vitae adipiscing quam commodo sed. Cras porta dictum sem quis aliquet. Aenean a neque sed dolor lacinia iaculis.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

show code hide code 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum laoreet dolor, vitae adipiscing quam commodo sed. Cras porta dictum sem quis aliquet. Aenean a neque sed dolor lacinia iaculis.</p>

<p class="hyph">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>

Lists

  • Lorem ipsum dolor sit amet
  • Consectetur adipisicing elit
  • Sed do eiusmod tempor incididunt ut labore
  • Lorem ipsum dolor sit amet
  • Consectetur adipisicing elit
  • Sed do eiusmod tempor incididunt ut labore
show code hide code 
<ul class="link-list mbl">
  <li><a>Lorem ipsum dolor sit amet</a></li>
  <li><a>Consectetur adipisicing elit</a></li>
  <li><a>Sed do eiusmod tempor incididunt ut labore</a></li>
</ul>

<ul class="list-square mbl">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipisicing elit</li>
  <li>Sed do eiusmod tempor incididunt ut labore</li>
</ul>

<ul class="list-disc">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipisicing elit</li>
  <li>Sed do eiusmod tempor incididunt ut labore</li>
</ul>

Panels

A panel is a simple helpful CSS class that enables to easily outline sections of the page.

A Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Another Panel

Divider before
Divider after

Lorem ipsum dolor sit amet, consectetur adipiscing elit

show code hide code 
<div class="panel mbs">
  <h3 class="mbn">A Panel</h3>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<p/>

<div class="panel">
  <h3 class="mbn">Another Panel</h3>
</div>
<div class="divider-before mbs">Divider before</div>
<div class="divider-after mbs">Divider after</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<p/></div>

Colors

Palette

Visual identity & branding colors

@orange1: #f07355;
@orange2: #f1532e;
@orange3: #f78d2d;
@orange4: #feae35;
@green1: #019875;
@green2: #0c9f9b;
@green3: #53c1af;
@green4: #c6e6d7;
@blue1: #006aa8;
@blue2: #007bc2;
@blue3: #42a2d6;
@blue4: #1f668c;
@blue5: #7dcde3;
@purple1: #471d63;
@purple2: #685985;

Using Less

Tints & Shades

  tint(@blue2, 50%)
  tint(@blue2, 40%)
  tint(@blue2, 30%)
  tint(@blue2, 20%)
  tint(@blue2, 10%)
  shade(@blue2, 10%)
  shade(@blue2, 20%)
  shade(@blue2, 30%)
  shade(@blue2, 40%)
  shade(@blue2, 50%)

Grayscale

@black: #000000;
@grayDark: #4a494d;
@gray: #87868c;
@grayLight: #c5c3c7;
@grayLighter: #d9d8dd;
@white: #ffffff;

Base

@baseFontColor: #2a2a2a
@pageBg: #e8e9eb;
@linkColor: #42a2d6;
@linkColorHover: #2479a7;
@overlayBorder: #273038;

Panel

@panelBackground: #f5f7f9;
@panelBorder: #e4eaf0;
@panelBorderDarker: #b7c8d6;
@borderColor: #d1dce5;

Context

@highlightColor: #f4f2ca;
@errorText: #d54243;
@premiumColor: #feae35;

Tables

Basic examples

Column header 1 Column header 2 Column header 3 Column header 4 Column header 5
Data 1 1 Data 1 2 Data 1 3 Data 1 4 Data 1 5
Data 2 1 Data 2 2 Data 2 3 Data 2 4 Data 2 5
Data 3 1 Data 3 2 Data 3 3 Data 3 4 Data 3 5
show code hide code 
<table class="table"> ... </table>

Text rows

Column header 1 Column header 2 Column header 3 Column header 4 Column header 5
Data 1 1 Data 1 2 Data 1 3 Data 1 4 Data 1 5
Data 2 1 Data 2 2 Data 2 3 Data 2 4 Data 2 5
Data 3 1 Data 3 2 Data 3 3 Data 3 4 Data 3 5
show code hide code 
<table class="table table-text"> ... </table>

Zebra rows

Column header 1 Column header 2 Column header 3 Column header 4 Column header 5
Data 1 1 Data 1 2 Data 1 3 Data 1 4 Data 1 5
Data 2 1 Data 2 2 Data 2 3 Data 2 4 Data 2 5
Data 3 1 Data 3 2 Data 3 3 Data 3 4 Data 3 5
show code hide code 
<table class="table table-text zebra"> ... </table>

hover rows

Column header 1 Column header 2 Column header 3 Column header 4 Column header 5
Data 1 1 Data 1 2 Data 1 3 Data 1 4 Data 1 5
Data 2 1 Data 2 2 Data 2 3 Data 2 4 Data 2 5
Data 3 1 Data 3 2 Data 3 3 Data 3 4 Data 3 5
show code hide code 
<table class="table table-text table-hover"> ... </table>

Boxes

Basic examples

Settings Box title

Box content

Settings Box title with subtitle

Box content

Settings Box title main

Box content
Box with close button

Box default

Box content

Box empty

Box content

Aside boxes

Box aside

show code hide code 
<div class="bx">
  <div class="bx-aside">
    <h2 class="h-bx">Box aside</h2>
    <ul class="list-bx">
      <li>
        <dl>
          <dt><a href="">Lorem ipsum dolor sit amet</a></dt>
          <dd>Consectetur adipisicing elit</dd>
        </dl>
      </li>
      <li>
        <dl>
          <dt><a href="">Sed do eiusmod tempor incididunt</a></dt>
          <dd>Ut labore et dolore magna aliqua</dd>
        </dl>
      </li>
      <li>
        <dl>
          <dt><a href="">Ut enim ad minim veniam</a></dt>
          <dd>Quis nostrud exercitation</dd>
        </dl>
      </li>
    </ul>
  </div>
</div>

Editable boxes

Box title main

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

show code hide code 
<div class="bx">
  <h2 class="h-bx h-bx-main">Box title main</h2>
  <div class="bx-editable">
    <ul class="bx-edit-btn">
      <li>
        <a class="bx-edit">
          <i class="vicon vicon-edit"></i>
          <span>Modify</span>
        </a>
      </li>
      <li>
        <a class="bx-edit bx-edit-rm">
          <i class="vicon vicon-close"></i>
          <span>Remove</span>
        </a>
      </li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
  </div>
</div>

Flippable boxes

Box title

Content on the front side

Box settings

Content on the back side content on the back side content on the back side content on the back side content on the back side content on the back side content on the back side.
show code hide code 
<div class="bx-flip">
  <div class="bx bx-flip-front">
    <h2 class="h-bx">
    <button data-comp="flipbox" data-event="click" class="h-bx-link bx-flip-turn tooltip tooltip-left bootnode">
      <i class="vicon vicon-settings"></i>
      <span class="tooltip-content">Settings</span>
    </button>
    Box title
    </h2>
    Content on the front side
  </div>
  <div class="bx bx-flip-back">
    <h2 class="h-bx">
    <button data-comp="flipbox" data-event="click" class="h-bx-link bx-flip-turn tooltip tooltip-left bootnode">
      <i class="vicon vicon-close"></i>
      <span class="tooltip-content">Close</span>
    </button>
    Box settings
    </h2>
    Content on the back side content on the back side content on the back side content on the back side content on the back side content on the back side content on the back side.
  </div>
</div>

Forms

Basic examples

Vertical: .core-form
Inline: .core-form .form-inline
Horizontal: .core-form .form-horizontal

The default form is vertical aligned. All textual input, textarea, and select elements with .core-form are set to width: 100%; by default.

Add the .core-form class to the form element.

In addition to freeform text, any HTML5 text-based input appears like so.

show code hide code 
<form class="core-form">
  <fieldset>
    <div class="control-group">
      <label for="input01" class="control-label">Text input</label>
      <div class="controls">
        <input type="text" id="input01" class="input-xlarge">
        <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
      </div>
    </div>
    <div class="control-group">
      <label for="optionsCheckbox" class="control-label">Checkbox</label>
      <div class="controls">
        <label class="checkbox">
          <input type="checkbox" value="option1" id="optionsCheckbox">
          Option one is this and that - be sure to include why it's great
        </label>
      </div>
    </div>
    <div class="control-group">
      <label for="select01" class="control-label">Select list</label>
      <div class="controls">
        <select id="select01">
          <option>something</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </div>
    </div>
    <div class="control-group">
      <label for="textarea" class="control-label">Textarea</label>
      <div class="controls">
        <textarea rows="3" id="textarea" class="input-xlarge"></textarea>
      </div>
    </div>
    <div class="form-actions ptm">
      <button class="btn btn-primary" type="submit">Save changes</button>
      <button class="btn btn-default">Cancel</button>
    </div>
  </fieldset>
</form>

Inline form

To set the form inline, add the .form-inline class to the .core-form element.
Inputs are inline-block with .form-inline.

show code hide code 
<form class="core-form well form-inline">
  <input type="text" placeholder="Email" class="input-small">
  <input type="password" placeholder="Password" class="input-small">
  <label class="checkbox">
    <input type="checkbox"> Remember me
  </label>
  <button class="btn btn-default" type="submit">Sign in</button>
</form>

Horizontal form

Tot set the form horizontal, add the .form-horizontal class to the .core-form element.
Inputs are inline-block with .form-horizontal.

In addition to freeform text, any HTML5 text-based input appears like so.

show code hide code 

<form class="core-form form-horizontal">
  ...
</form>

States form

Special styles are applied on top of focused and disabled states, when the browser supports it.

It also includes validation styles for errors, warnings, and success. To use, add the error class to the surrounding .control-group.

Some value here

Contextual help in disabled state

Please correct the error

Placeholders

Using the class error on the control-group mbl makes the field helper visible, otherwise it is hidden by default.

The following fields are marked as errors

Please type a valid email address
Please type a valid password
Error in flow
show code hide code 

<form class="core-form mbxl">
  <div class="bx-alert bx-alert-error-form mbl">
    <button data-event="click" data-comp="alert" class="bx-alert-close bootnode" type="button">
      <i class="vicon vicon-close"></i>
    </button>
    <i class="vicon vicon-warning bx-alert-icon"></i>
    <div class="bx-alert-content">
      <p class="mvn">The following fields are marked as errors</p>
    </div>
  </div>

  <div class="control-group mbl error">
    <div class="controls">
      <span class="placeholding field-helper field-helper-right">
        <input type="text" class="input-large mbn">
        <label class="placeholder">Error on text input (default left)</label>
        <span class="error-inline">Please type a valid email address</span>
      </span>
    </div>
  </div>

  <div class="control-group mbl error">
    <div class="controls">
      <span class="placeholding field-helper field-helper-right">
        <input type="password" class="input-large mbn">
        <label class="placeholder">Error on password input (default left)</label>
        <span class="error-inline">Please type a valid password</span>
      </span>
    </div>
  </div>

  <div class="control-group mbl error">
    <div class="controls">
      <span class="placeholding field-helper field-helper-flow">
        <input type="text" class="input-large mbn">
        <label class="placeholder">Text input</label>
        <span class="error-inline">Error in flow</span>
      </span>
    </div>
  </div>

</form>

Extending form

To add help text for your form inputs, include inline help text with <span class="help-inline"> or a help text block with <p class="help-block"> after the input element.

You may also use static classes that don't map to the grid, adapt to the responsive CSS styles, or account for varying types of controls (e.g., <input> vs. <select>).

Note: Labels surround all the options for much larger click areas and a more usable form.

Custom radio & checkbox

Only works in modern browsers, falls back to standard radio buttons in legacy browsers. These custom radio buttons are pure CSS3, no JavaScript required.

show code hide code 
<form class="core-form form-horizontal">
  <div class="control-group">
    <label class="control-label">Horizontal radio buttons</label>
    <div class="controls">
      <label class="radio inline custom-radio mrl">
        <input type="radio" checked="checked" name="customRadioButtons1">
        <span class="custom-radio-element"></span>
        Option one
      </label>
      <label class="radio inline custom-radio mrl">
        <input type="radio" name="customRadioButtons1">
        <span class="custom-radio-element"></span>
        Option two
      </label>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label">Vertical radio buttons</label>
    <div class="controls">
      <label class="radio custom-radio">
        <input type="radio" checked="checked" name="customRadioButtons2">
        <span class="custom-radio-element"></span>
        Option one
      </label>
      <label class="radio custom-radio">
        <input type="radio" name="customRadioButtons2">
        <span class="custom-radio-element"></span>
        Option two
      </label>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label">Horizontal checkboxes</label>
    <div class="controls">
      <label class="checkbox inline custom-checkbox mrl">
        <input type="checkbox" checked="checked">
        <span class="custom-checkbox-element"></span>
        Option one
      </label>
      <label class="checkbox inline custom-checkbox mrl">
        <input type="checkbox">
        <span class="custom-checkbox-element"></span>
        Option two
      </label>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label">Vertical checkboxes</label>
    <div class="controls">
      <label class="checkbox custom-checkbox">
        <input type="checkbox" checked="checked">
        <span class="custom-checkbox-element"></span>
        Option one
      </label>
      <label class="checkbox custom-checkbox">
        <input type="checkbox">
        <span class="custom-checkbox-element"></span>
        Option two
      </label>
    </div>
  </div>
</form>

Custom select

Displaying a custom select element while keeping the native drop down menu.

show code hide code 
<form class="core-form form-horizontal">
  <div class="control-group">
    <label class="control-label">Custom select</label>
    <div class="controls">

      <span class="custom-select input-large">
        <select>
          <option selected="selected" disabled="disabled">Choose…</option>
          <option value="1">Lorem ipsum dolor sit amet</option>
          <option value="2">Consectetur adipisicing elit</option>
          <option value="3">Sed do eiusmod tempor incididunt ut labore</option>
          <option value="4">Et dolore magna aliqua</option>
          <option value="5">Ut enim ad minim veniam</option>
        </select>

        <label>Choose…</label>
        <i class="vicon vicon-arrow-down"></i>
      </span>

    </div>
  </div>

  <div class="control-group">
    <label class="control-label">Custom select appended</label>
    <div class="controls">
      <div class="input-append">
        <input type="text"><span class="custom-select input-medium">
          <label>Choose…</label>
          <i class="vicon vicon-arrow-down"></i>

          <select>
            <option selected="selected" disabled="disabled">Choose…</option>
            <option value="1">Lorem ipsum dolor sit amet</option>
            <option value="2">Consectetur adipisicing elit</option>
            <option value="3">Sed do eiusmod tempor incididunt ut labore</option>
            <option value="4">Et dolore magna aliqua</option>
            <option value="5">Ut enim ad minim veniam</option>
          </select>
        </span>
      </div>
    </div>
  </div>
</form>

Buttons

Basic examples

Default buttons

Small Default before after Loading Disable Large Lead Button Fat Button

Alternate Default buttons

Small Default before after Loading Disable Large Lead Button Lead Button alt Fat Button
show code hide code 
<!-- Add btn-small to the btn class. -->
<a class="btn btn-default btn-small">
  Small
</a>
<!-- The default btn. -->
<a class="btn btn-default mbs mrl">
  Default
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-default mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-default mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-default btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-default btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-default btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-default btn-lead">
  Lead Button
</a>

<!-- Alternative Buttons -->
<!-- Add suffic alt to the button class for alternative buttons -->
<a class="btn btn-default-alt btn-small">
  Small
</a>
<!-- The default btn. -->
<a class="btn btn-default-alt mbs mrl">
  Default
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-default-alt mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-default-alt mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-default-alt btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-default-alt btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-default-alt btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-default-alt btn-lead">
  Lead Button
</a>

Primary buttons

Small Default before after Loading Disable Large Lead Button Fat Button

Alternate Primary buttons

Small Default before after Loading Disable Large Lead Button Lead Button alt Fat Button
show code hide code 


<!-- Add btn-small to the btn class. -->
<a class="btn btn-primary btn-small">
  Small
</a>
<!-- The primary btn. -->
<a class="btn btn-primary mbs mrl">
  primary
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-primary mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-primary mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-primary btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-primary btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-primary btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-primary btn-lead">
  Lead Button
</a>

<!-- Alternative Buttons -->
<!-- Add suffic alt to the button class for alternative buttons -->
a class="btn btn-default-alt btn-small">
  Small
</a>
<!-- The default btn. -->
<a class="btn btn-default-alt mbs mrl">
  Default
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-default-alt mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-default-alt mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-default-alt btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-default-alt btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-default-alt btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-default-alt btn-lead">
  Lead Button
</a>

Secondary buttons

Small Default before after Loading Disable Large Lead Button Fat Button

Alternate Secondary buttons

Small Default before after Loading Disable Large Lead Button Lead Button alt Fat Button
show code hide code 
<!-- Add btn-small to the btn class. -->
<a class="btn btn-secondary btn-small">
  Small
</a>
<!-- The secondary btn. -->
<a class="btn btn-secondary mbs mrl">
  secondary
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-secondary mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-secondary mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-secondary btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-secondary btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-secondary btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-secondary btn-lead">
  Lead Button
</a>

<!-- Alternative Buttons -->
<!-- Add suffic alt to the button class for alternative buttons -->
<a class="btn btn-default-alt btn-small">
  Small
</a>
<!-- The default btn. -->
<a class="btn btn-secondary-alt mbs mrl">
  Default
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-secondary-alt mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-secondary-alt mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-secondary-alt btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-secondary-alt btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-secondary-alt btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-secondary-alt btn-lead">
  Lead Button
</a>

Tertiary buttons

Small Default before after Loading Disable Large Lead Button Fat Button

Alternate Tertiary buttons

Small Default before after Loading Disable Large Lead Button Lead Button alt Fat Button
show code hide code 
<!-- Add btn-small to the btn class. -->
<a class="btn btn-tertiary btn-small">
  Small
</a>
<!-- The tertiary btn. -->
<a class="btn btn-tertiary">
  tertiary
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-tertiary mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-tertiary mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-tertiary btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-tertiary btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-tertiary btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-tertiary btn-lead">
  Lead Button
</a>

<!-- Alternative Buttons -->
<!-- Add suffic alt to the button class for alternative buttons -->
<a class="btn btn-tertiary-alt btn-small">
  Small
</a>
<!-- The default btn. -->
<a class="btn btn-tertiary-alt mbs mrl">
  Default
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-tertiary-alt mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-tertiary-alt mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-tertiary-alt btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-tertiary-alt btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-tertiary-alt btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-tertiary-alt btn-lead">
  Lead Button
</a>

White buttons (useful on dark background)

Small Default before after Loading Disable Large Lead Button Lead Button alt Fat Button
show code hide code 
<a class="btn btn-white-alt btn-small">
  Small
</a>
<!-- The default btn. -->
<a class="btn btn-white-alt mbs mrl">
  Default
</a>
<!-- Add classname 'btn-icon-before' to prepend the icon -->
<a class="btn btn-white-alt mbs mrl">
  <span class="vicon vicon-plus btn-icon-before"></span>
  preprend icon
</a>
<!-- Add classname 'btn-icon-after' to append the icon -->
<a class="btn btn-white-alt mbs mrl">
  append icon
  <span class="vicon vicon-plus btn-icon-after"></span>
</a>
<!-- Add <span> inside the btn-loading to preserve the width of the button -->
<a class="btn btn-white-alt btn-loading">
  <span>Loading</span>
</a>
<!-- Add btn-disabled to the btn class. -->
<a class="btn btn-white-alt btn-disabled">
  Disable
</a>
<!-- Add btn-large to the btn class. -->
<a class="btn btn-white-alt btn-large">
  Large
</a>
<!-- Add btn-lead to the btn class. -->
<a class="btn btn-white-alt btn-lead">
  Lead Button
</a>

Icons buttons

Alternative Style

show code hide code 
<a class="btn btn-icon btn-primary mrs"><span class="vicon vicon-request-add"></span></a>
<a class="btn btn-icon btn-default mrs"><span class="vicon vicon-plus"></span></a>
<a class="btn btn-icon btn-default btn-disabled mrs"><span class="vicon vicon-plus"></span></a>
<a class="btn btn-icon btn-secondary mrs"><span class="vicon vicon-close"></span></a>
<a class="btn btn-icon btn-tertiary mrs"><span class="vicon vicon-star"></span></a>

Link button

show code hide code 
<button class="btn-link">link example</button>

To show dropdown items, add the additional .open class to the .dd dropdown class

default
button default
button default
button large
button large
button lead
button lead
open
pull-right
pull-top
pull-right & pull-top
primary
button primary
button primary
button large
button large
button lead
button lead
open
pull-right
pull-top
pull-right & pull-top
secondary
button secondary
button secondary
button large
button large
button lead
button lead
open
pull-right
pull-top
pull-right & pull-top
tertiary
button tertiary
button tertiary
button large
button large
button lead
button lead
open
pull-right
pull-top
pull-right & pull-top
show code hide code 
    <div class="dd mrs open">
       <a class="dd-btn btn btn-default">default <span class="vicon vicon-arrow-down-alt"></span></a>
       <ul class="dd-menu">
           <li class="dd-item"><a href="">dd item list</a></li>
       </ul>
    </div>

    <div class="dispib mrs">
      <a class="btn btn-default">default</a>
      <div class="dd pull-right open">
        <a class="dd-btn btn btn-default btn-append"><span class="vicon vicon-arrow-down-alt"></span></a>
         <ul class="dd-menu">
             <li class="dd-item"><a href="">dd item list</a></li>
             <li class="dd-item"><a href="">dd item list</a></li>
         </ul>
      </div>
    </div>

    <div class="dd mrs open pull-top">
       <a class="dd-btn btn btn-default btn-large">default large and top <span class="vicon vicon-arrow-up-alt"></span></a>
       <ul class="dd-menu">
           <li class="dd-item"><a href="">dd item list</a></li>
       </ul>
    </div>

    <div class="dispib">
      <a class="btn btn-default btn-large">default large and top-right</a>
      <div class="dd pull-right open pull-top">
        <a class="dd-btn btn btn-default btn-large btn-append"><span class="vicon vicon-arrow-up-alt"></span></a>
         <ul class="dd-menu">
             <li class="dd-item"><a href="">dd item list</a></li>
         </ul>
      </div>
    </div>

Flipswitch Buttons

When yes is selected, the container has a .flipswitch-yes class and the “yes” radio button is checked.

show code hide code 
<div id="flipswitch-sample-1" class="flipswitch flipswitch-yes">
  <label class="flipswitch-lbl-no">
    <input type="radio" name="flipswitch-sample-1"> No
  </label>

  <span class="flipswitch-sliders">
    <span class="flipswitch-outer">
      <span class="flipswitch-inner">
        <span class="flipswitch-btn-yes"><span class="flipswitch-icon vicon vicon-check"></span></span>
        <span class="flipswitch-btn-no"><span class="flipswitch-icon vicon vicon-close"></span></span>
      </span>
    </span>
    <span class="flipswitch-slider"></span>
  </span>

  <label class="flipswitch-lbl-yes">
    <input type="radio" checked="checked" name="flipswitch-sample-1"> Yes
  </label>
</div>

When no is selected, the container has a .flipswitch-no class and the “no” radio button is checked.

show code hide code 
<div id="flipswitch-sample-2" class="flipswitch flipswitch-no">
  <label class="flipswitch-lbl-no">
    <input type="radio" name="flipswitch-sample-2"> No
  </label>

  <span class="flipswitch-sliders">
    <span class="flipswitch-outer">
      <span class="flipswitch-inner">
        <span class="flipswitch-btn-yes"><span class="flipswitch-icon vicon vicon-check"></span></span>
        <span class="flipswitch-btn-no"><span class="flipswitch-icon vicon vicon-close"></span></span>
      </span>
    </span>
    <span class="flipswitch-slider"></span>
  </span>

  <label class="flipswitch-lbl-yes">
    <input type="radio" checked="checked" name="flipswitch-sample-2"> Yes
  </label>
</div>

Toggle Buttons

The toggle button maps a Tetra.js component to a native hidden checkbox.

When active, the container has a btn-toggle-checked class and the hidden checkbox is checked.
When inactive, the btn-toggle-checked class is removed and the hidden checkbox is unchecked.

show code hide code 
<label id="btn-toggle-sample-1" class="btn-toggle mrs">
  <input type="checkbox">
  <span class="btn-toggle-check"><i class="vicon vicon-check"></i></span>
  Toggle button (default off)
</label>

<label id="btn-toggle-sample-2" class="btn-toggle btn-toggle-checked mrs">
  <input type="checkbox" checked="checked">
  <span class="btn-toggle-check"><i class="vicon vicon-check"></i></span>
  Toggle button (default on)
</label>

show code hide code 
<label id="btn-toggle-sample-3" class="btn-toggle btn-toggle-alt mrs">
  <input type="checkbox">
  <span class="btn-toggle-check"><i class="vicon vicon-check"></i></span>
  Alternative style
</label>

<label id="btn-toggle-sample-4" class="btn-toggle btn-toggle-checked btn-toggle-alt">
  <input type="checkbox" checked="checked">
  <span class="btn-toggle-check"><i class="vicon vicon-check"></i></span>
  Alternative style
</label>

Navigation

Primary tab

show code hide code 
<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
  <li><a href="#">Contacts</a></li>
  <li><a href="#">Other</a></li>
  <li class="side-links"><a href="#">link</a></li>
</ul>

Secondary tab

show code hide code 
<ul class="nav nav-tabs-secondary">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
  <li><a href="#">Contacts</a></li>
  <li><a href="#">Other</a></li>
  <li class="side-links"><a href="#"><i class="vicon vicon-settings"></i></a></li>
</ul>
  1. Sed do eiusmod tempor incididunt
  2. Et dolore magna
  3. 3 Ut labore et dolore magna
  4. 4 Nostrud exercitation
show code hide code 
<dl class="gr nav-steps mbl">
  <dd class="gu gu-1of1">
  <ol class="gr">
    <li class="gu gu-1of4 gu-m-1of1 nav-steps-done">
    <a href="">
      <b class="nav-steps-item"><i class="vicon vicon-check"></i></b>
      <span class="nav-steps-text">Sed do eiusmod tempor incididunt</span>
    </a>
    </li>
    <li class="gu gu-1of4 gu-m-1of1 nav-steps-done">
    <a href="">
      <b class="nav-steps-item"><i class="vicon vicon-check"></i></b>
      <span class="nav-steps-text">Et dolore magna</span>
    </a>
    </li>
    <li class="gu gu-1of4 gu-m-1of1">
    <a href="">
      <b class="nav-steps-item">3</b>
      <span class="nav-steps-text">Ut labore et dolore magna</span>
    </a>
    </li>
    <li class="gu gu-last nav-steps-todo">
    <b class="nav-steps-item">4</b>
    <span class="nav-steps-text">Nostrud exercitation</span>
    </li>
  </ol>
  </dd>
</dl>

The standard and backward compatible way.

show code hide code 
<ul class="paginator">
  <li class="disabled"><a class="btn btn-pagination" href=""><i class="vicon vicon-prev btn-icon-before"></i> Previous</a></li>
  <li><a href="">1</a></li>
  <li class="active"><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li class="ellipsis"><span>…</span></li>
  <li><a href="">9</a></li>
  <li><a href="">10</a></li>
  <li><a class="btn btn-pagination" href="">Next <i class="vicon vicon-next btn-icon-after"></i></a></li>
</ul>
Previous Next
show code hide code 
<a class="btn btn-pagination" href="">
  <i class="vicon vicon-prev btn-icon-before"></i>
  Previous
</a>
<a href="" class="btn btn-pagination">
  Next <i class="vicon vicon-next btn-icon-after"></i>
</a>

Dialogs

Tooltips

Roll over the links to show the tooltips.
Available classes are : .tooltip-top, .tooltip-top-right, .tooltip-right, .tooltip-left, .tooltip-bottom.

Tooltip on top left (default) Tooltip on top left Tooltip on top right Tooltip on top right Tooltip on right I'm on right Tooltip on left I'm on top right Tooltip on bottom left I'm on bottom left

show code hide code 
<a class="tooltip tooltip-top btn btn-default btn-large">
  Tooltip on top left
  <span class="tooltip-content">
    Tooltip on top left
  </span>
</a>
<a class="tooltip tooltip-top-right btn btn-default btn-large">
  Tooltip on top right
  <span class="tooltip-content">
    Tooltip on top right
  </span>
</a>
<a class="tooltip tooltip-right btn btn-default btn-large">
  Tooltip on right
  <span class="tooltip-content">
    I'm on right
  </span>
</a>
<a class="tooltip tooltip-left btn btn-default btn-large">
  Tooltip on left
  <span class="tooltip-content">
    I'm on top right
  </span>
</a>
<a class="tooltip tooltip-bottom btn btn-default btn-large">
  Tooltip on bottom left
  <span class="tooltip-content">
    I'm on bottom left
  </span>
</a>

Popovers

Popovers are a kind of extended tooltips: more content to display, optionally a header, optionally a footer, what else.

Popover on top (default) Header Loremipsumdolorsitametconsecteturadipiscingelitpraesentbibendumullamcorper lectus dictum blandit. Footer

Popover on bottom Header Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ullamcorper lectus dictum blandit.

Popover on top left Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ullamcorper lectus dictum blandit. Footer

Popover on bottom left Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ullamcorper lectus dictum blandit.

Extra large Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ullamcorper lectus dictum blandit.

Large Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ullamcorper lectus dictum blandit.

Medium Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ullamcorper lectus dictum blandit.

Small (default) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum ullamcorper lectus dictum blandit.

Popins

Popins, or modal dialogs, or pop-up windows now are a common user experience design pattern. Here are some samples and the code to launch a popin.

Add the .popin-edit class to the .popin container to activate the edit mode.

Close

Popin with default style

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Submit Alternate link

Popin with edit style

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Alternate link Submit
show code hide code 
<div class="popin-container mbl"><div class="gr">
  <div class="popin gu-2of3 gu-m-1of1">

    <div class="popin-header">
      <a class="bootnode close" data-popin="close" data-event="click" data-comp="popin">
        <i class="vicon vicon-close"></i>
        <span>Close</span>
      </a>
      <h2 class="h2">Popin with default style</h2>
    </div>
    <div class="popin-body">
      <p class="mbn">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="popin-footer tac-m">
      <a class="bootnode btn btn-primary btn-large" data-target="/tetra-ui/doc/xhr/popin-edit.html" data-fake-app="fake" data-event="click" data-view="fakeApp/fakeApp">
        Submit
      </a>
      <a class="fr fno-m mts" href="">Alternate link</a>
    </div>
  </div>

  </div>
</div>

Icons

Overview

Please go to Tetra-icons to discover the Viadeo icon fonts.

show code hide code 
 <span class="vicon vicon-message"></span>

How to use

This is the simple tag to display an icon, where c is the character (icon) you want to display. Then you can use your own styles on top of this.

show code hide code 
<i class="vicon vicon-settings"></i>

Download

For desktop use you can download and install the OpenType font file:

Download Viadeoicons

Components

Badges

Badges are used as notification indicators (new messages, new requests).

Primary badge
show code hide code 
<span class="ui-badge">123</span>
Secondary badge
show code hide code 
<span class="ui-badge ui-badge-alt">123</span>/span>

Labels

Labels are essentially used for clickable keywords.

Lorem Ipsum
show code hide code 
<span class="ui-label mbn">
  <a href="">Lorem</a>
</span>
<span class="ui-label mbn">
  <a href="">Ipsum</a>
  <a href=""><i class="vicon vicon-close"></i></a>
</span>
lorem ipsum
show code hide code 
<span class="ui-label ui-label-premium">
  <a href="">lorem ipsum</a>
</span>

Tags

Tags are not clickable, they only have a remove button.

Consectetur Sed do
show code hide code 
<span class="ui-tag">
  Consectetur
  <a class="remove" href="">
    <i class="vicon vicon-close"></i>
  </a>
</span>

Alerts

Alerts have an optional close button and icon.
Several kinds of alert: info, success, error, form-error, notification, premium

DEFAULT Message...

OK Message...

WARNING Message...

ERROR Message...

ERROR-FORM Message...

NOTIFICATION Message...

PREMIUM Message...

show code hide code 
<div class="bx-alert bx-alert-ok mbs">
  <button data-event="click" data-comp="alert" class="bx-alert-close bootnode">
    <i class="vicon vicon-close"></i>
  </button>

  <i class="vicon vicon-information bx-alert-icon"></i>

  <div class="bx-alert-content">
    <p class="mbn">Success message...</p>
  </div>
</div>

Cards

This is not really a component but rather a style guide to make your own card components using the right typography, colors, alignments. Feel free to use it as a skeleton!

Firstname Lastname

Job, Company

City, Country | Industry

Since 2011:
Job, Company
From 2008 to 2011:
Job, Company
Other information Button
show code hide code 
<div class="rc-card rc-card-l">
  <div class="rc-card-header">
  <h2 class="name">
    <a href="">Firstname Lastname</a>
    <i class="vicon vicon-star"></i>
  </h2>
  </div>
  <div class="rc-card-content rc rcss">
  <a href="" class="avatar img-left">
    <img src="…/avatar-m-107x145.png">
  </a>
  <div class="bd">
    <h3 class="job">Job, Company</h3>
    <h4 class="where">City, Country |
    Industry
    </h4>
    <dl class="previously">
    <dt>Since 2011:</dt>
    <dd>Job, Company</dd>
    <dt>From 2008 to 2011:</dt>
    <dd>Job, Company</dd>
    </dl>
  </div>
  </div>
  <div class="rc-card-footer">
  <span class="fl mtxs">Other information</span>
  <a class="btn btn-primary fr">Button</a>
  </div>
</div>

Firstname Lastname

Job, Company

City, Country | Industry

Since 2011:
Job, Company
From 2008 to 2011:
Job, Company
show code hide code 
<div class="rc-card rc-card-m">
  <div class="rc-card-header rc rcss">
  <a href="" class="avatar img-left">
    <img src="…/avatar-m-60x60.png">
  </a>
  <div class="bd">
    <h2 class="name">
    <a href="">Firstname Lastname</a>
    </h2>
    <h3 class="job">Job, Company</h3>
  </div>
  </div>
  <div class="rc-card-content">
  <h4 class="where">City, Country |
    Industry
  </h4>
  <dl class="previously">
    <dt>Since 2011:</dt>
    <dd>Job, Company</dd>
    <dt>From 2008 to 2011:</dt>
    <dd>Job, Company</dd>
  </dl>
  </div>
</div>

Growl

Growl is a live notification, usualy fixed on top of the page.
Several kinds of growl: info, success, error, notification, premium

info growl with dismiss
info growl
success growl
error growl
notification growl
premium growl
show code hide code 
<div class="growl growl-type-info growl-position-center mbs growl-active">
  <button class="growl-close">
    <i class="vicon vicon-close"></i>
  </button>
  <i class="vicon vicon-information growl-icon"></i>
  <div class="growl-content">
  info growl with dismiss
  </div>
</div>

Highlights

Progress Bar

To change how much the progress bar is filled, you need to modify the width of the element with the classname .pb-fill

show code hide code 
<div class="progressbar">
  <div class="pb-mask">
    <div class="pb-fill" style="width:33%"></div>
  </div>
</div>
show code hide code 
<div class="progressbar pb-large">
  <div class="pb-mask">
    <div class="pb-fill" style="width:33%"></div>
  </div>
</div>