<div class="c-alert c-alert--success">OKです！問題ありません！</div>
<div class="c-alert c-alert--info">読んでほしいお知らせです。</div>
<div class="c-alert c-alert--warning">気をつけて！ちゃんと読んでください！</div>
<div class="c-alert c-alert--danger">すみません、だめでした。</div>
<div class="c-alert c-alert--success icon">GOOOOD!</div>
<div class="c-alert c-alert--danger icon">NO GOOD...</div>

<button type="button" class="c-btn">デフォルト</button>
<button type="button" class="c-btn c-btn--primary">普通</button>
<button type="button" class="c-btn c-btn--success">更新</button>
<button type="button" class="c-btn c-btn--info">案内</button>
<button type="button" class="c-btn c-btn--warning">注意</button>
<button type="button" class="c-btn c-btn--danger">危険</button>

<a href="#" class="c-btn">デフォルト</a>
<a href="#" class="c-btn c-btn--primary">普通</a>
<a href="#" class="c-btn c-btn--success">更新</a>
<a href="#" class="c-btn c-btn--info">案内</a>
<a href="#" class="c-btn c-btn--warning">注意</a>
<a href="#" class="c-btn c-btn--danger">危険</a>

<p class="c-heading1">あいうえお</p>
<p class="c-heading2">かきくけこ</p>
<p class="c-heading3">さしすせそ</p>
<p class="c-heading4">たちつてと</p>
<p class="c-heading5">なにぬねの</p>
<p class="c-heading6">はひふへほ</p>

<button type="button" class="c-btn-outline">デフォルト</button>
<button type="button" class="c-btn-outline c-btn-outline--primary">普通</button>
<button type="button" class="c-btn-outline c-btn-outline--success">更新</button>
<button type="button" class="c-btn-outline c-btn-outline--info">案内</button>
<button type="button" class="c-btn-outline c-btn-outline--warning">注意</button>
<button type="button" class="c-btn-outline c-btn-outline--danger">危険</button>

<a href="#" class="c-btn-outline">デフォルト</a>
<a href="#" class="c-btn-outline c-btn-outline--primary">普通</a>
<a href="#" class="c-btn-outline c-btn-outline--success">更新</a>
<a href="#" class="c-btn-outline c-btn-outline--info">案内</a>
<a href="#" class="c-btn-outline c-btn-outline--warning">注意</a>
<a href="#" class="c-btn-outline c-btn-outline--danger">危険</a>

<p class="c-well">ちょっとしたテキストを書き添えたいことがありますよね。<br>そういう時に使います。</p>

<div class="l-row">
  <div class="l-col-3">
    <div class="form-group">
      <input class="c-input" type="text" placeholder="入力フォーム">
    </div>
  </div>
</div>

<div class="l-row">
  <div class="l-col-3">
    <div class="form-group">
      <label class="label" for="name">名前</label>
      <input class="c-input" type="text" name="name">
    </div>
  </div>
</div>

<div class="form-group">
  <label class="radio">
    <input id="sample1" class="c-radio" type="radio" name="sample" value="option1" data-toggle="radio">
    ラジオボタン
  </label>
  <label class="radio">
    <input id="sample2" class="c-radio" type="radio" name="sample" value="option2" data-toggle="radio">
    ラジオボタン
  </label>
  <label class="radio">
    <input id="sample3" class="c-radio" type="radio" name="sample" value="option3" data-toggle="radio">
    ラジオボタン
  </label>
</div>

<div class="form-group">
  <label class="checkbox" for="checkbox1">
    <input id="checkbox1" class="c-checkbox" type="checkbox" data-toggle="checkbox">
    チェックボックス
  </label>
  <label class="checkbox" for="checkbox2">
    <input id="checkbox2" class="c-checkbox" type="checkbox" data-toggle="checkbox">
    チェックボックス
  </label>
  <label class="checkbox" for="checkbox3">
    <input id="checkbox3" class="c-checkbox" type="checkbox" data-toggle="checkbox">
    チェックボックス
  </label>
</div>

<div class="form-group">
  <textarea cols="40" rows="6"></textarea>
</div>

<span class="c-label">ラベル</span>
<span class="c-label c-label--success">ルベラ</span>
<span class="c-label c-label--info">らべる</span>
<span class="c-label c-label--warning">label</span>
<span class="c-label c-label--danger">LABEL</span>

<p class="c-text">
  先生はセロのかっこうお父さんあたりを手から云い屋根裏ましず。
  そしてそうまじめなたというドレミファらしない。
  残念ますませへんございはたところがむとそっくりゆうべのとおりぐんぐんのまっ黒あたりのときをもぱっと生意気ですたて、
  君までしんに云いれんですです。
  云いすぎ何は両手で青くたてたくさんのほんとうの眼がいをもっ第二こどもげの司会と見てやるんまし。
</p>

<small class="c-text-small">
  小さい小さい小さい小さい小さい小さい小さい小さい小さい小さいテキスト
</small>

<p>
  狸は十走っ<span class="c-text-hl">ホール</span>のようがうたいで行っです。
</p>