.c-alert

  • /src/css/object/component/_alert.scss

Alert component

html

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

.c-top-balloon

  • /src/css/object/component/_balloon.scss

Top balloon component

html

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

.c-right-balloon

  • /src/css/object/component/_balloon.scss

Right balloon component

html

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

.c-bottom-balloon

  • /src/css/object/component/_balloon.scss

Bottom balloon component

html

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

.c-left-balloon

  • /src/css/object/component/_balloon.scss

Left balloon component

html

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

.c-breadcrumbs

  • /src/css/object/component/_breadcrumbs.scss

Breadcrumbs component

html

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

.c-btn

  • /src/css/object/component/_btn.scss

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>

.c-checkbox

  • /src/css/object/component/_checkbox.scss

Checkbox component

html

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

.c-fluid-container

  • /src/css/object/component/_container.scss

Fluid container component

html

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

.c-container

  • /src/css/object/component/_container.scss

Container component

html

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

.c-drawer

  • /src/css/object/component/_drawer.scss

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">
          <a href="#">menu</a>
          <div class="c-drawer__toggle" aria-expanded="false">
            <span class="c-ic-angle-right" aria-hidden="true"></span>
          </div>
          <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>
              <div class="c-drawer__toggle" aria-expanded="false">
                <span class="c-ic-angle-right" aria-hidden="true"></span>
              </div>
              <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">
          <a href="#">menu</a>
          <div class="c-drawer__toggle" aria-expanded="false">
            <span class="c-ic-angle-right" aria-hidden="true"></span>
          </div>
          <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">
          <a href="#">menu</a>
          <div class="c-drawer__toggle" aria-expanded="false">
            <span class="c-ic-angle-right" aria-hidden="true"></span>
          </div>
          <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>
              <div class="c-drawer__toggle" aria-expanded="false">
                <span class="c-ic-angle-right" aria-hidden="true"></span>
              </div>
              <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">
          <a href="#">menu</a>
          <div class="c-drawer__toggle" aria-expanded="false">
            <span class="c-ic-angle-right" aria-hidden="true"></span>
          </div>
          <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>

<div id="my-drawer-btn" class="c-hamburger-btn" aria-expanded="false" aria-controls="my-drawer">
  <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>

<div id="my-drawer-btn-inverse" class="c-hamburger-btn" aria-expanded="false" aria-controls="my-drawer-inverse">
  <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 (Inverse)</div>
</div>

.c-dropdown

  • /src/css/object/component/_dropdown.scss

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">
          <a href="#">menu</a>
          <div class="c-dropdown__toggle" aria-expanded="false">
            <span class="c-ic-angle-right" aria-hidden="true"></span>
          </div>
          <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>

<div id="my-dropdown-btn" class="c-hamburger-btn" 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>

.c-entries

  • /src/css/object/component/_entries.scss

Entries component

html

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

.c-entry

  • /src/css/object/component/_entry.scss

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>

.c-form-control

  • /src/css/object/component/_form-control.scss

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>

.c-hamburger-btn

  • /src/css/object/component/_hamburger-btn.scss

Hamburger button component

html

<div id="hamburger-btn" class="c-hamburger-btn" role="button" aria-expanded="false" aria-controls="drawer">
  <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>

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

.c-hero

  • /src/css/object/component/_hero.scss

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>

.c-ic-angle-right

  • /src/css/object/component/_ic.scss

Icon (Angle Right) component

html

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

.c-ic-check

  • /src/css/object/component/_ic.scss

Icon (Check) component

html

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

.c-ic-angle-down

  • /src/css/object/component/_ic.scss

Icon (Angle Down) component

html

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

.c-input-group

  • /src/css/object/component/_input-group.scss

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>

.c-media

  • /src/css/object/component/_media.scss

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>

.c-meta

  • /src/css/object/component/_meta.scss

Meta component

html

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

.c-navbar

  • /src/css/object/component/_navbar.scss

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>
    <div class="c-navbar__toggle" aria-expanded="false">
      <span class="c-ic-angle-right" aria-hidden="true"></span>
    </div>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <div class="c-navbar__toggle" aria-expanded="false">
          <span class="c-ic-angle-right" aria-hidden="true"></span>
        </div>
        <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>
        <div class="c-navbar__toggle" aria-expanded="false">
          <span class="c-ic-angle-right" aria-hidden="true"></span>
        </div>
        <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>
    <div class="c-navbar__toggle" aria-expanded="false">
      <span class="c-ic-angle-right" aria-hidden="true"></span>
    </div>
    <ul class="c-navbar__submenu" aria-hidden="true">
      <li class="c-navbar__subitem" aria-haspopup="true">
        <a href="#">submenu</a>
        <div class="c-navbar__toggle" aria-expanded="false">
          <span class="c-ic-angle-right" aria-hidden="true"></span>
        </div>
        <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>

.c-page-effect

  • /src/css/object/component/_page-effect.scss

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>

.c-page-header

  • /src/css/object/component/_page-header.scss

Page header component

html

...

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

.c-pagination

  • /src/css/object/component/_pagination.scss

Paginatiion component

html

1 2 99 100
<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>

.c-radio

  • /src/css/object/component/_radio.scss

Radio button component

html

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

.c-responsive-container-16-9

  • /src/css/object/component/_responsive-container.scss

Responsive container component

html

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

.c-responsive-container-4-3

  • /src/css/object/component/_responsive-container.scss

Responsive container component

html

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

.c-responsive-table

  • /src/css/object/component/_responsive-table.scss

Responsive table component

html

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

.c-row

  • /src/css/object/component/_row.scss

Row component of flexbox based grid system

html

1
2
3
<div class="c-row">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3
  </div>
</div>
1
2
3
<div class="c-row c-row--reverse">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3
  </div>
</div>
1
2
3
<div class="c-row c-row--nowrap">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3
  </div>
</div>
1
2
<div class="c-row c-row--left">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
</div>
1
2
<div class="c-row c-row--right">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
</div>
1
2
<div class="c-row c-row--center">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
</div>
1
2
<div class="c-row c-row--between">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
</div>
1
2
<div class="c-row c-row--around">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
</div>
1
2
2
3
3
3
<div class="c-row c-row--top">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
1
2
2
3
3
3
<div class="c-row c-row--bottom">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
1
2
2
3
3
3
<div class="c-row c-row--middle">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
1
2
2
3
3
3
<div class="c-row c-row--baseline">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
1
2
3
<div class="c-row c-row--collapse">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3
  </div>
</div>
1
2
3
<div class="c-row c-row--margin">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3
  </div>
</div>
1
2
3
<div class="c-row c-row--margin-s">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3
  </div>
</div>
1
2
3
<div class="c-row c-row--margin-l">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3
  </div>
</div>
1
2
2
3
3
3
<div class="c-row c-row--fill">
  <div class="c-row__col c-row__col--1-3">
    1
  </div>
  <div class="c-row__col c-row__col--1-3">
    2<br>
    2
  </div>
  <div class="c-row__col c-row__col--1-3">
    3<br>
    3<br>
    3
  </div>
</div>
1
22
333
<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>
1
22
333
<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>
1
22
333
<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>

.c-section

  • /src/css/object/component/_section.scss

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>

.c-select

  • /src/css/object/component/_select.scss

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>

.c-site-branding

  • /src/css/object/component/_site-branding.scss

Site branding component

html

...

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

.c-circle-spinner

  • /src/css/object/component/_spinner.scss

Circle spinner component

html

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

.c-dots-spinner

  • /src/css/object/component/_spinner.scss

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>

.c-pulse-spinner

  • /src/css/object/component/_spinner.scss

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>