Alert component

html

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

Top balloon component

html

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

Right balloon component

html

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

Bottom balloon component

html

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

Left balloon component

html

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

Breadcrumbs component

html

<ol class="c-breadcrumbs">
  <li class="c-breadcrumbs__item"><a href="#">Lorem</a></li>
  <li class="c-breadcrumbs__item">ipsum</li>
</ol>

Button component

html

<a class="c-btn" role="button">btn</a>

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

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

Checkbox component

html

<label>
  <span class="c-checkbox">
    <input type="checkbox" class="c-checkbox__control">
    <span class="c-checkbox__label">...</span>
  </span>
</label>

Fluid container component

html

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

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

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

Container component

html

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

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

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

Drawer component

html

<div style="min-height: 200px; position: relative; overflow: hidden">
  <nav id="my-drawer" class="c-drawer" role="navigation" aria-hidden="true">
    <div class="c-drawer__inner">
      <div class="c-drawer__focus-point" tabindex="-1"></div>
      <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 c-drawer__item--has-submenu">
          <a href="#">menu</a>
          <button class="c-drawer__toggle" aria-expanded="false">
            <span class="c-ic-angle-right" aria-hidden="true"></span>
          </button>
          <ul class="c-drawer__submenu" aria-hidden="true">
            <li class="c-drawer__subitem"><a href="#">submenu</a></li>
            <li class="c-drawer__subitem c-drawer__subitem--has-submenu">
              <a href="#">submenu</a>
              <button class="c-drawer__toggle" aria-expanded="false">
                <span class="c-ic-angle-right" aria-hidden="true"></span>
              </button>
              <ul class="c-drawer__submenu" aria-hidden="true">
                <li class="c-drawer__subitem"><a href="#">submenu</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="c-drawer__item c-drawer__item--has-submenu">
          <a href="#">menu</a>
          <button class="c-drawer__toggle" aria-expanded="false">
            <span class="c-ic-angle-right" aria-hidden="true"></span>
          </button>
          <ul class="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>
    </div>
  </nav>
  <div class="c-drawer-close-zone" aria-controls="my-drawer" aria-hidden="true"></div>

  <nav id="my-drawer-inverse" class="c-drawer c-drawer--inverse" role="navigation">
    <div class="c-drawer__inner">
      <div class="c-drawer__focus-point" tabindex="-1"></div>
      <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 c-drawer__item--has-submenu">
          <a href="#">menu</a>
          <button class="c-drawer__toggle" aria-expanded="false">
            <span class="c-ic-angle-right" aria-hidden="true"></span>
          </button>
          <ul class="c-drawer__submenu" aria-hidden="true">
            <li class="c-drawer__subitem"><a href="#">submenu</a></li>
            <li class="c-drawer__subitem c-drawer__subitem--has-submenu">
              <a href="#">submenu</a>
              <button class="c-drawer__toggle" aria-expanded="false">
                <span class="c-ic-angle-right" aria-hidden="true"></span>
              </button>
              <ul class="c-drawer__submenu" aria-hidden="true">
                <li class="c-drawer__subitem"><a href="#">submenu</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="c-drawer__item c-drawer__item--has-submenu">
          <a href="#">menu</a>
          <button class="c-drawer__toggle" aria-expanded="false">
            <span class="c-ic-angle-right" aria-hidden="true"></span>
          </button>
          <ul class="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>
    </div>
  </nav>
  <div class="c-drawer-close-zone" aria-controls="my-drawer-inverse" aria-hidden="true"></div>
</div>

<button id="my-drawer-btn" class="c-hamburger-btn" aria-expanded="false" aria-controls="my-drawer">
  <span class="c-hamburger-btn__bars">
    <span class="c-hamburger-btn__bar"></span>
    <span class="c-hamburger-btn__bar"></span>
    <span class="c-hamburger-btn__bar"></span>
  </span>
  <span class="c-hamburger-btn__label">MENU</span>
</button>

<button id="my-drawer-btn-inverse" class="c-hamburger-btn" aria-expanded="false" aria-controls="my-drawer-inverse">
  <span class="c-hamburger-btn__bars">
    <span class="c-hamburger-btn__bar"></span>
    <span class="c-hamburger-btn__bar"></span>
    <span class="c-hamburger-btn__bar"></span>
  </span>
  <span class="c-hamburger-btn__label">MENU (Inverse)</span>
</button>

Dropdown component

html

<div style="min-height: 200px; position: relative">
  <nav id="my-dropdown" class="c-dropdown" role="navigation" aria-hidden="true" aria-labelledby="my-dropdown-btn">
    <div class="c-dropdown__inner">
      <ul class="c-dropdown__menu">
        <li class="c-dropdown__item">
          <div class="c-hamburger-btn" role="button" aria-expanded="false" aria-controls="my-dropdown">
            <div class="c-hamburger-btn__bars">
              <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__label">MENU</div>
          </div>
        </li>
        <li class="c-dropdown__item"><a href="#">menu</a></li>
        <li class="c-dropdown__item"><a href="#">menu</a></li>
        <li class="c-dropdown__item c-dropdown__item--has-submenu">
          <a href="#">menu</a>
          <button class="c-dropdown__toggle" aria-expanded="false">
            <span class="c-ic-angle-right" aria-hidden="true"></span>
          </button>
          <ul class="c-dropdown__submenu" aria-hidden="true">
            <li class="c-dropdown__subitem"><a href="#">submenu</a></li>
            <li class="c-dropdown__subitem"><a href="#">submenu</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </nav>
</div>

<button id="my-dropdown-btn" class="c-hamburger-btn" aria-expanded="false" aria-controls="my-dropdown">
  <span class="c-hamburger-btn__bars">
    <span class="c-hamburger-btn__bar"></span>
    <span class="c-hamburger-btn__bar"></span>
    <span class="c-hamburger-btn__bar"></span>
  </span>
  <span class="c-hamburger-btn__label">MENU</span>
</button>

Entries component

html

<ul class="c-entries">
  <li class="c-entries__item">
    ...
  </li>
</ul>

Entry component

html

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

Form control component

html

<input type="text" class="c-form-control">

<textarea class="c-form-control"></textarea>

<div class="c-form-control c-form-control--has-icon">
  <div class="c-form-control__icon">
    ●
  </div>
  <input type="text">
</div>

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

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

Hamburger button component

html

<button id="hamburger-btn" class="c-hamburger-btn" role="button" aria-expanded="false" aria-controls="drawer">
  <span class="c-hamburger-btn__bars">
    <span class="c-hamburger-btn__bar"></span>
    <span class="c-hamburger-btn__bar"></span>
    <span class="c-hamburger-btn__bar"></span>
  </span>
  <span class="c-hamburger-btn__label">MENU</span>
</button>

<nav id="drawer" aria-labelledby="hamburger-btn">...</nav>

Hero component

html

<div class="c-hero" style="background-image: url(/basis/aigis_assets/images/dummy.jpg)">
  <div class="c-hero__header">
    ...
  </div>
  <div class="c-hero__content">
    ...
  </div>
  <div class="c-hero__footer">
    ...
  </div>
</div>

Icon (Angle Right) component

html

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

Icon (Check) component

html

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

Icon (Angle Down) component

html

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

Input group component

html

<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 component

html

...

<div class="c-media">
  <div class="c-media__figure">
    <img src="/basis/aigis_assets/images/dummy.jpg" style="width: 150px">
  </div>
  <div class="c-media__body">
    ...
  </div>
</div>

Meta component

html

<ul class="c-meta">
  <li class="c-meta__item">
    ...
  </li>
</ul>

Navbar component

html

<ul class="c-navbar">
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item">
    <a href="#">menu</a>
  </li>
</ul>

<ul class="c-navbar c-navbar--center">
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item">
    <a href="#">menu</a>
  </li>
</ul>

<ul class="c-navbar c-navbar--left">
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item">
    <a href="#">menu</a>
  </li>
</ul>

<ul class="c-navbar c-navbar--right">
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item">
    <a href="#">menu</a>
  </li>
</ul>

<ul class="c-navbar" data-popup-mode="click">
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
    <button class="c-navbar__toggle" aria-expanded="false">
      <span class="c-ic-angle-right" aria-hidden="true"></span>
    </button>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <button class="c-navbar__toggle" aria-expanded="false">
          <span class="c-ic-angle-right" aria-hidden="true"></span>
        </button>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <button class="c-navbar__toggle" aria-expanded="false">
          <span class="c-ic-angle-right" aria-hidden="true"></span>
        </button>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
    <button class="c-navbar__toggle" aria-expanded="false">
      <span class="c-ic-angle-right" aria-hidden="true"></span>
    </button>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <button class="c-navbar__toggle" aria-expanded="false">
          <span class="c-ic-angle-right" aria-hidden="true"></span>
        </button>
        <ul class="c-navbar__submenu" aria-hidden="true">
          <li class="c-navbar__subitem"><a href="#">submenu</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item">
    <a href="#">menu</a>
  </li>
</ul>

Page effect component

html

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

Page header component

html

<header class="c-page-header">
  <h1 class="c-page-header__title">...</h1>
</header>

Paginatiion component

html

<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>

Radio button component

html

<label>
  <span class="c-radio">
    <input type="radio" class="c-radio__control">
    <span class="c-radio__label">...</span>
  </span>
</label>

Responsive container component

html

<div class="c-responsive-container-16-9">
  <iframe></iframe>
</div>

Responsive container component

html

<div class="c-responsive-container-4-3">
  <iframe></iframe>
</div>

Responsive table component

html

<div class="c-responsive-table">
  <table style="width: 1000px">
    <tr>
      <th>th</th>
      <td>td</td>
      <td>td</td>
    </tr>
    <tr>
      <th>th</th>
      <td>td</td>
      <td>td</td>
    </tr>
  </table>
</div>

Row component of flexbox based grid system

html

<div class="c-row">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--reverse">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--nowrap">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--left">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

<div class="c-row c-row--right">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

<div class="c-row c-row--center">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

<div class="c-row c-row--between">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

<div class="c-row c-row--around">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
</div>

<div class="c-row c-row--top">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--bottom">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--middle">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--baseline">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--collapse">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--margin">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--margin-s">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--margin-l">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--fill">
  <div class="c-row__col c-row__col--1-3">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="c-row__col c-row__col--1-3">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cill.
  </div>
</div>

<div class="c-row c-row--margin">
  <div class="c-row__col c-row__col--auto">
    1
  </div>
  <div class="c-row__col c-row__col--auto">
    22
  </div>
  <div class="c-row__col c-row__col--auto">
    333
  </div>
</div>

<div class="c-row c-row--margin">
  <div class="c-row__col c-row__col--justify">
    1
  </div>
  <div class="c-row__col c-row__col--justify">
    22
  </div>
  <div class="c-row__col c-row__col--justify">
    333
  </div>
</div>

<div class="c-row c-row--margin">
  <div class="c-row__col c-row__col--fit">
    1
  </div>
  <div class="c-row__col c-row__col--fit">
    22
  </div>
  <div class="c-row__col c-row__col--fit">
    333
  </div>
</div>

Section component

html

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

Select box component

html

<div class="c-select">
  <select class="c-select__control">
    <option value="1">label-1</option>
    <option value="2">label-2</option>
    <option value="3">label-3</option>
  </select>
  <span class="c-select__toggle"></span>
</div>

<div class="c-select c-select--block">
  <select class="c-select__control">
    <option value="1">label-1</option>
    <option value="2">label-2</option>
    <option value="3">label-3</option>
  </select>
  <span class="c-select__toggle"></span>
</div>

Site branding component

html

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

Circle spinner component

html

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

Dots spinner component

html

<div class="c-dots-spinner">
  <div class="c-dots-spinner__dot"></div>
  <div class="c-dots-spinner__dot"></div>
  <div class="c-dots-spinner__dot"></div>
</div>

Pulse spinner component

html

<div class="c-pulse-spinner">
  <div class="c-pulse-spinner__bar"></div>
  <div class="c-pulse-spinner__bar"></div>
  <div class="c-pulse-spinner__bar"></div>
</div>