.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. ...
  2. ...
<ol class="c-breadcrumbs">
  <li class="c-breadcrumbs__item"><a href="#">...</a></li>
  <li class="c-breadcrumbs__item">...</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-card

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

Card component

html

...
...
<div class="c-card">
  <div class="c-card__figure">
    <img src="/basis/aigis_assets/images/dummy.jpg">
  </div>
  <div class="c-card__body">
    ...
  </div>
  <div class="c-card__action">
    ...
  </div>
</div>
...
...
...
<div class="c-card">
  <div class="c-card__figure" style="background-image: url('/basis/aigis_assets/images/dummy.jpg'); padding-top: 50%">
    <div style="position: absolute; left: 10px; bottom: 10px">...</div>
  </div>
  <div class="c-card__body">
    ...
  </div>
  <div class="c-card__action">
    ...
  </div>
</div>

.c-checkbox

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

Checkbox component

html

<label>
  <span class="c-checkbox">
    <input type="checkbox">
    <span class="c-checkbox__control"></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-copyright

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

Copyright component

html

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

.c-drawer

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

Drawer component

html

<div style="min-height: 200px; position: relative">
  <nav id="drawer" class="c-drawer" role="navigation" aria-hidden="true" aria-labelledby="hamburger-btn">
    <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></li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

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

.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-flex-media

  • /src/css/object/component/_flex-media.scss

Flexible media component

html

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

.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>
<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__bar"></div>
  <div class="c-hamburger-btn__bar"></div>
  <div class="c-hamburger-btn__bar"></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>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <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>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <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>
        </ul>
      </li>
    </ul>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <a href="#">menu</a>
  </li>
  <li class="c-navbar__item" aria-haspopup="true">
    <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">
    <span class="c-radio__control"></span>
  </span>
  ...
</label>

.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

<span class="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"></span>
</span>
<span class="c-select c-select--block" 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"></span>
</span>

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