.c-alert
Alert component
html
<div class="c-alert" role="alert">
...
</div>
Alert component
<div class="c-alert" role="alert">
...
</div>
Top balloon component
<div class="c-top-balloon">
...
</div>
Right balloon component
<div class="c-right-balloon">
...
</div>
Bottom balloon component
<div class="c-bottom-balloon">
...
</div>
Left balloon component
<div class="c-left-balloon">
...
</div>
Breadcrumbs component
<ol class="c-breadcrumbs">
<li class="c-breadcrumbs__item"><a href="#">...</a></li>
<li class="c-breadcrumbs__item">...</li>
</ol>
Card component
<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>
Checkbox component
<label>
<span class="c-checkbox">
<input type="checkbox">
<span class="c-checkbox__control"></span>
</span>
...
</label>
Fluid container component
<div class="c-fluid-container">
...
</div>
Container component
<div class="c-container">
...
</div>
Copyright component
<div class="c-copyright">
...
</div>
Drawer component
<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>
Entries component
<ul class="c-entries">
<li class="c-entries__item">
...
</li>
</ul>
Entry component
<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 component
<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>
Form control component
<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>
Hamburger button component
<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>
Hero component
<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
<span class="c-ic-angle-right" aria-hidden="true"></span>
Icon (Check) component
<span class="c-ic-check" aria-hidden="true"></span>
Icon (Angle Down) component
<span class="c-ic-angle-down" aria-hidden="true"></span>
Input group component
<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
<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
<ul class="c-meta">
<li class="c-meta__item">
...
</li>
</ul>
Navbar component
<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>
Page effect component
<div class="c-page-effect" data-page-effect="fadein" aria-hidden="false">
<div class="c-page-effect__item">
Loading...
</div>
</div>
Page header component
<header class="c-page-header">
<h1 class="c-page-header__title">...</h1>
</header>
Paginatiion component
<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
<label>
<span class="c-radio">
<input type="radio">
<span class="c-radio__control"></span>
</span>
...
</label>
Row component of flexbox based grid system
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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
<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
<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>
Site branding component
<div class="c-site-branding">
<h1 class="c-site-branding__title">...</h1>
</div>
Circle spinner component
<div class="c-circle-spinner"></div>
Dots spinner component
<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
<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>