Alert

<div class="_c-alert" role="alert">
  ...
</div>

Balloon

Top

<div class="_c-balloon-top">
  ...
</div>
...

Right

<div class="_c-balloon-right">
  ...
</div>
...

Bottom

<div class="_c-balloon-bottom">
  ...
</div>
...

Left

<div class="_c-balloon-left">
  ...
</div>
...

Button

<a class="_c-btn" role="button">btn</a>
<input type="submit" class="_c-btn" value="btn">
<button class="_c-btn" role="button">btn</button>
btn

Ghost Button

<a class="_c-btn _c-btn--ghost" role="button">ghost</a>

Block button

<a class="_c-btn _c-btn--block" role="button">block</a>
block

Card

<div class="_c-card">
  <div class="_c-card__figure">
    <img src="...">
  </div>
  <div class="_c-card__body">
    This is a card !
  </div>
  <div class="_c-card__action">
    action
  </div>
</div>
This is a card !
action
This is a card !
action
This is a card !
action

Checkbox

<label>
  <span class="_c-checkbox">
    <input type="checkbox" name="checkbox" value="checkbox1">
    <span class="_c-checkbox__control"></span>
  </span>
  checkbox1
</label>
<label>
  <span class="_c-checkbox">
    <input type="checkbox" name="checkbox" value="checkbox2">
    <span class="_c-checkbox__control"></span>
  </span>
  checkbox2
</label>

Wrappers

container

<div class="_c-container">
  ...
</div>

Fluid container

<div class="_c-container-fluid">
  ...
</div>

Content

Each elements default margin is 0. If you use ._c-content or @include _content(), vertical rhythm is applied to elements. See more

<div class="_c-content">
  ...
</div>

Drawer JS

<div class="_c-drawer" data-c="drawer">
  <nav id="___drawer" class="_c-drawer__body" data-c="drawer__body" role="navigation" aria-hidden="true">
    <ul class="_c-drawer__menu">
      <li class="_c-drawer__item"><a href="#">menu</a></li>
      <li class="_c-drawer__item"><a href="#">menu</a></li>
      <li class="_c-drawer__item">
        <a href="#">menu</a>
        <div class="_c-drawer__toggle" data-c="drawer__toggle" aria-expanded="false">
          <span class="_ic-angle-right" aria-hidden="true"></span>
        </div>
        <ul class="_c-drawer__submenu" data-c="drawer__submenu" aria-hidden="true">
          <li class="_c-drawer__subitem"><a href="#">submenu</a></li>
          <li class="_c-drawer__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

<div class="_c-hamburger-btn" data-c="drawer-btn" aria-expanded="false" aria-controls="___drawer">
  <div class="_c-hamburger-btn__bar"></div>
  <div class="_c-hamburger-btn__bar"></div>
  <div class="_c-hamburger-btn__bar"></div>
</div>

Entries

<ul class="_c-entries">
  <li class="_c-entries__item">
    ...
  </li>
</ul>
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Entry

<article class="_c-entry">
  <header class="_c-entry__header">
    <h1 class="_c-entry__title">...</h1>
    <div class="_c-entry__content">
      ...
    </div>
  </header>
</article>

Flexible Media

Standard

<div class="_c-flex-media">
  <div class="_c-flex-media__figure">
    <img ...>
  </div>
  <div class="_c-flex-media__body">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
  </div>
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Reverse

<div class="_c-flex-media _c-flex-media--reverse">
  <div class="_c-flex-media__figure">
    <img ...>
  </div>
  <div class="_c-flex-media__body">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
  </div>
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Form Control

Text field

<input type="text" class="_c-form-control" placeholder="text">

Readonly text field

<input type="text" class="_c-form-control" placeholder="readonly" readonly>

Disabled text field

<input type="text" class="_c-form-control" placeholder="disabled" disabled>

Textarea

<textarea class="_c-form-control" placeholder="textarea"></textarea>

Hamburger Button

<div class="_c-hamburger-btn" aria-expanded="false">
  <div class="_c-hamburger-btn__bar"></div>
  <div class="_c-hamburger-btn__bar"></div>
  <div class="_c-hamburger-btn__bar"></div>
</div>

<div class="_c-hamburger-btn" aria-expanded="true">
  <div class="_c-hamburger-btn__bar"></div>
  <div class="_c-hamburger-btn__bar"></div>
  <div class="_c-hamburger-btn__bar"></div>
</div>

Hero

Using header and footer

<div class="_c-hero" style="background-color: #00DAE6; color: #fff;">
  <div class="_c-hero__header">header</div>
  <div class="_c-hero__content _u-text-center">
    Lorem ipsum dolor sit amet
  </div>
  <div class="_c-hero__footer">footer</div>
</div>
header
Lorem ipsum dolor sit amet

Using background image

<div class="_c-hero _c-hero--cover" style="background-image: url( /path/to/image ); color: #fff;">
  <div class="_c-hero__content _u-text-center" style="padding: 5rem;">
    Lorem ipsum dolor sit amet
  </div>
</div>
Lorem ipsum dolor sit amet

Using overlay

<div class="_c-hero _c-hero--cover _c-hero--overlay" style="background-image: url( /path/to/image ); color: #fff;">
  <div class="_c-hero__content _u-text-center" style="padding: 5rem;">
    Lorem ipsum dolor sit amet
  </div>
</div>
Lorem ipsum dolor sit amet

Using fixed background image ( PC size only )

<div class="_c-hero _c-hero--cover _c-hero--fixed" style="background-image: url( /path/to/image ); color: #fff;">
  <div class="_c-hero__content _u-text-center" style="padding: 5rem;">
    Lorem ipsum dolor sit amet
  </div>
</div>
Lorem ipsum dolor sit amet

Full size

<div class="_c-hero _c-hero--full" style="background-color: #00DAE6; color: #fff;">
  <div class="_c-hero__content _u-text-center" style="padding: 5rem;">
    Lorem ipsum dolor sit amet
  </div>
</div>
Lorem ipsum dolor sit amet

Icon Font

Angle Right

<span class="_ic-angle-right" aria-hidden="true"></span>

Check

<span class="_ic-check" aria-hidden="true"></span>

Angle Down

<span class="_ic-angle-down" aria-hidden="true"></span>

Input Group

<div class="_c-input-group">
  <div class="_c-input-group__addon">@</div>
  <div class="_c-input-group__field">
    <input type="text">
  </div>
  <button class="_c-input-group__btn">Go</button>
</div>
@

Media

Standard

<div class="_c-media">
  <div class="_c-media__figure">
    <img ...>
  </div>
  <div class="_c-media__body">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
  </div>
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Reverse

<div class="_c-media _c-media--reverse">
  <div class="_c-media__figure">
    <img ...>
  </div>
  <div class="_c-media__body">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
  </div>
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Middle body

<div class="_c-media _c-media--middle">
  <div class="_c-media__figure">
    <img ...>
  </div>
  <div class="_c-media__body">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
  </div>
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Nested

<div class="_c-media">
  <div class="_c-media__figure">
    <img ...>
  </div>
  <div class="_c-media__body">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

    <div class="_c-media">
      <div class="_c-media__figure">
        <img ...>
      </div>
      <div class="_c-media__body">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
      </div>
    </div>

    <div class="_c-media">
      <div class="_c-media__figure">
        <img ...>
      </div>
      <div class="_c-media__body">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
      </div>
    </div>
  </div>
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Meta

<ul class="_c-meta">
  <li class="_c-meta__item">
    ...
  </li>
</ul>
  • Lorem
  • ipsum
  • dolor

Page Effect JS

<div class="c-page-effect" data-c="page-effect" data-page-effect="fadein" aria-hidden="false">
  <div class="c-page-effect__item">
    Loading...
  </div>
</div>

Pagination

<div class="_c-pagination">
  <span class="_c-pagination__item" aria-current="page">1</span>
  <a class="_c-pagination__item-link">2</a>
  <span class="_c-pagination__item-ellipsis" aria-hidden="true">…</span>
  <a class="_c-pagination__item-link">99</a>
  <a class="_c-pagination__item-link">100</a>
</div>
1 2 99 100

Radio

<label>
  <span class="_c-radio">
    <input type="radio" name="radio" value="radio1">
    <span class="_c-radio__control"></span>
  </span>
  radio1
</label>
<label>
  <span class="_c-radio">
    <input type="radio" name="radio" value="radio2">
    <span class="_c-radio__control"></span>
  </span>
  radio2
</label>

Grid system

Basis has 2 - 12 based grid system. For example ._c-row__col--1-2, ._c-row__col--12-12. When using responsive Grids, Adding the specific breakpoints at class names. For example ._c-row__col--md-1-2, ._c-row__col--md-12-12.

Key Applies Class name
None Always ._c-row__col--1-12
md >= 640px ._c-row__col--md-1-12
lg >= 1024px ._c-row__col--lg-1-12
1/2
1/2
1/3
2/3
1/4
3/4
1/5
4/5
1/6
5/6
1/7
6/7
1/8
7/8
1/9
8/9
1/10
9/10
1/11
10/11
1/12
11/12

Equal columns size

<div class="_c-row">
  <div class="_c-row__col">Lorem ipsum dolor sit amet</div>
  <div class="_c-row__col">Consectetur</div>
  <div class="_c-row__col">adipiscing</div>
</div>

or

<div class="_c-row">
  <div class="_c-row__col _c-row__col--justify">Lorem ipsum dolor sit amet</div>
  <div class="_c-row__col _c-row__col--justify">Consectetur</div>
  <div class="_c-row__col _c-row__col--justify">adipiscing</div>
</div>
Lorem ipsum dolor sit amet
Consectetur
adipiscing

Auto columns size

<div class="_c-row">
  <div class="_c-row__col _c-row__col--auto">Lorem ipsum dolor sit amet</div>
  <div class="_c-row__col _c-row__col--auto">Consectetur</div>
  <div class="_c-row__col _c-row__col--auto">adipiscing</div>
</div>
Lorem ipsum dolor sit amet
Consectetur
adipiscing

Shrink column

<div class="_c-row">
  <div class="_c-row__col _c-row__col--auto">Lorem ipsum dolor sit amet</div>
  <div class="_c-row__col _c-row__col--auto">Consectetur</div>
  <div class="_c-row__col _c-row__col--fit">shrink</div>
</div>
Lorem ipsum dolor sit amet
Consectetur
shrink

Reverse columns order

<div class="_c-row _c-row--reverse">
  <div class="_c-row__col">1</div>
  <div class="_c-row__col">2</div>
  <div class="_c-row__col">3</div>
</div>
1
2
3

Margin

No margin

There is this also: ._c-row--md-collapse, ._c-row--lg-collapse

<div class="_c-row _c-row--collapse">
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
</div>
1/3
1/3
1/3
1/3
1/3
1/3

Standard margin

There is this also: ._c-row--md-margin, ._c-row--lg-margin

<div class="_c-row _c-row--margin">
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
</div>
1/3
1/3
1/3
1/3
1/3
1/3

Small margin

There is this also: ._c-row--md-margin-s, ._c-row--lg-margin-s

<div class="_c-row _c-row--margin-s">
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
</div>
1/3
1/3
1/3
1/3
1/3
1/3

Large margin

There is this also: ._c-row--md-margin-l, ._c-row--lg-margin-l

<div class="_c-row _c-row--margin-l">
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
</div>
1/3
1/3
1/3
1/3
1/3
1/3

Nested

<div class="_c-row">
  <div class="_c-row__col _c-row__col--1-5">
    <div class="_c-row">
      <div class="_c-row__col _c-row__col--1-2">1/2</div>
      <div class="_c-row__col _c-row__col--1-2">1/2</div>
    </div>
  </div>
  <div class="_c-row__col _c-row__col--1-5">1/5</div>
  <div class="_c-row__col _c-row__col--1-5">1/5</div>
  <div class="_c-row__col _c-row__col--1-5">1/5</div>
  <div class="_c-row__col _c-row__col--1-5">1/5</div>
</div>
1/2
1/2
1/5
1/5
1/5
1/5

Justify height

There is this also: ._c-row--md-fill, ._c-row--lg-fill

<div class="_c-row _c-row--fill">
  <div class="_c-row__col _c-row__col--1-3"><div>1/3<br />1/3<br />1/3</div></div>
  <div class="_c-row__col _c-row__col--1-3"><div>1/3</div></div>
  <div class="_c-row__col _c-row__col--1-3"><div>1/3</div></div>
</div>
1/3
1/3
1/3
1/3
1/3

Offsets

There is this also: ._c-row__col--md-offset-x-x, ._c-row__col--lg-offset-x-x

<div class="_c-row">
  <div class="_c-row__col _c-row__col--1-4">1/4</div>
  <div class="_c-row__col _c-row__col--1-4">1/4</div>
  <div class="_c-row__col _c-row__col--1-4 _c-row__col--offset-1-4">1/4</div>
</div>
1/4
1/4
1/4

Devided in mobile, full in Desktop

<div class="_c-row">
  <div class="_col _c-row__col--1-2 _c-row__col--md-2-2">1</div>
  <div class="_col _c-row__col--1-2 _c-row__col--md-2-2">1</div>
</div>
1
1

Alignment

Align left

<div class="_c-row _c-row--left">
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
</div>
1/3
1/3

Align right

<div class="_c-row _c-row--right">
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
</div>
1/3
1/3

Centering

<div class="_c-row _c-row--center">
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
</div>
1/3
1/3

Between

<div class="_c-row _c-row--between">
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
</div>
1/3
1/3

Around

<div class="_c-row _c-row--around">
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
</div>
1/3
1/3

Vertial alignment

Top

<div class="_c-row _c-row--top">
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3<br />1/3</br />1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3<br />1/3</div>
</div>
1/3
1/3
1/3
1/3
1/3
1/3

Bottom

<div class="_c-row _c-row--bottom">
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3<br />1/3</br />1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3<br />1/3</div>
</div>
1/3
1/3
1/3
1/3
1/3
1/3

Middle

<div class="_c-row _c-row--middle">
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3<br />1/3</br />1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3<br />1/3</div>
</div>
1/3
1/3
1/3
1/3
1/3
1/3

Baseline

<div class="_c-row _c-row--baseline">
  <div class="_c-row__col _c-row__col--1-3">1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3<br />1/3</br />1/3</div>
  <div class="_c-row__col _c-row__col--1-3">1/3<br />1/3</div>
</div>
1/3
1/3
1/3
1/3
1/3
1/3

Section

<section class="_c-section">
  <h2 class="_c-section__title">...</h2>
  <div class="_c-section__content">
    ...
  </div>
</section>

Select JS

Standard

<span class="_c-select" data-c="select" aria-selected="false">
  <select>
    <option value="1">label-1</option>
    <option value="2">label-2</option>
    <option value="3">label-3</option>
  </select>
  <span class="_c-select__label" data-c="select__label"></span>
</span>

Block

<span class="_c-select _c-select--block" data-c="select" aria-selected="false">
  <select>
    <option value="1">label-1</option>
    <option value="2">label-2</option>
    <option value="3">label-3</option>
  </select>
  <span class="_c-select__label" data-c="select__label"></span>
</span>

Site Branding

<div class="_c-site-branding">
  <h1 class="_c-site-branding__title">...</h1>
</div>

...

Spinner

Dots

<div class="_c-spinner-dots">
  <div class="_c-spinner-dots__dot"></div>
  <div class="_c-spinner-dots__dot"></div>
  <div class="_c-spinner-dots__dot"></div>
</div>

Pulse

<div class="_c-spinner-pulse">
  <div class="_c-spinner-pulse__bar"></div>
  <div class="_c-spinner-pulse__bar"></div>
  <div class="_c-spinner-pulse__bar"></div>
</div>

Circle

<div class="_c-spinner-circle"></div>