---
title: Components
draft: false
date: 2020-01-01
tags:
- tagname
categories:
- categoryname
---

<h2 class="title-lg">Typefaces</h2>

<section class="preview" id="typefaces">
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <h3>heading 3</h3>
  <h4>heading 4</h4>
  <h5>heading 5</h5>
  <h6>heading 6</h6>
  <p class="has-indent">
    paragrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagrafparagraf
  </p>
  <p><a href="#">linklinklinklinklinklink</a></p>
  <p><b>boldboldboldboldboldboldbold</b></p>
  <p><small>smallsmallsmallsmallsmallsmallsmallsmall</small></p>
  <blockquote>
    blockquoteblockquoteblockquoteblockquoteblockquoteblockquoteblockquoteblockquoteblockquoteblockquoteblockquoteblockquoteblockquoteblockquote
    <cite><a href="#" target="_blank">xxx</a></cite>
  </blockquote>
</section>

<div class="mt-5"></div>
<h2>Buttons</h2>

<section class="preview" id="buttons">
  <div class="group-lined">
    <a href="#" class="button">Button</a>
    <input type="submit" class="button" value="Input" />
    <button type="button" class="button">Button</button>
    <a href="#" class="button has-loading">Button with loading</a>
    <a href="#" class="button-semiflat">Semiflat</a>
    <a href="#" class="button-outline">Outline</a>
    <a href="#" class="button-emboss">Emboss</a>
    <a href="#" class="button-link">Link</a>
  </div>
</section>

<div class="mt-5"></div>
<h2 class="title-lg">Group</h2>

<section class="preview" id="groups">
  <span class="title-xs">.group-stretch</span>
  <div class="group-stretch">
    <a href="#" class="button">ButtonButtonButton</a>
    <a href="#" class="button">Button</a>
    <a href="#" class="button">Button</a>
  </div>
  <div class="mt-5"></div>
  <span class="title-xs">.group-center</span>
  <div class="group-center">
    <a href="#" class="button">Button</a>
    <a href="#" class="button-outline">Button</a>
  </div>
  <div class="mt-5"></div>
  <span class="title-xs">.group-vertical</span>
  <div class="group-vertical">
    <a href="#" class="button">Button</a>
    <a href="#" class="button">Button</a>
    <a href="#" class="button">Button</a>
    <a href="#" class="button">Button</a>
    <a href="#" class="button">Button</a>
  </div>
  <div class="mt-5"></div>
  <span class="title-xs">.group-lined</span>
  <div class="group-lined">
    <a href="#" class="button">ButtonButton</a>
    <a href="#" class="button">Button</a>
    <a href="#" class="button">Button</a>
    <a href="#" class="button">Button</a>
    <a href="#" class="button">Button</a>
    <a href="#" class="button">Button</a>
    <a href="#" class="button">Button</a>
    <a href="#" class="button">Button</a>
  </div>
</section>

<div class="mt-5"></div>
<h2 class="title-lg">Form</h2>

<section class="preview" id="form">
  <form>

    <span class="title-xs">.fieldset-horizontal</span>
    <div class="fieldset-horizontal has-input">
      <label for="">Label <small class="red">[must]</small></label>
      <div>
        <input type="text" class="input" placeholder="placeholder" />
        <small>explanation or <span class="red">validation</span></small>
      </div>
    </div>

    <div class="mt-5"></div>
    <span class="title-xs">.fieldset-vertical</span>

    <div class="group-vertical">
      <div class="fieldset-vertical">
        <label for="">Label</label>
        <div>
          <input type="text" class="input" placeholder="placeholder" />
          <small>explanation</small>
        </div>
      </div>

      <div class="fieldset-vertical">
        <legend>legend</legend>
        <textarea cols="50" id="field-textarea" placeholder="placeholder" rows="10"></textarea>
      </div>
    </div>

    <div class="mt-5"></div>
    <span class="title-xs">.group-lined / .radio</span>
    <ul class="group-lined">
      <li class="radio">
        <input id="field-radio2-0" name="field-radio2" type="radio" value="0">
        <label for="field-radio2-0">
          Radio
        </label>
      </li>
      <li class="radio">
        <input id="field-radio2-1" name="field-radio2" type="radio" value="1">
        <label for="field-radio2-1">
          Radio
        </label>
      </li>
      <li class="radio">
        <input id="field-radio2-2" name="field-radio2" type="radio" value="2">
        <label for="field-radio2-2">
          Radio
        </label>
      </li>
    </ul>

    <div class="mt-5"></div>
    <span class="title-xs">.group-lined / .radio(nested)</span>
    <ul class="group-lined">
      <li class="radio">
        <label for="field-radio3-0">
          <input id="field-radio3-0" name="field-radio3" type="radio" value="0">
          Radio
        </label>
      </li>
      <li class="radio">
        <label for="field-radio3-1">
          <input id="field-radio3-1" name="field-radio3" type="radio" value="1">
          Radio
        </label>
      </li>
      <li class="radio">
        <label for="field-radio3-2">
          <input id="field-radio3-2" name="field-radio3" type="radio" value="2">
          Radio
        </label>
      </li>
    </ul>

    <div class="mt-5"></div>
    <span class="title-xs">.group-lined / .custom-radio</span>
    <ul class="group-lined">
      <li class="custom-radio">
        <input id="field-radio4-0" name="field-radio4" type="radio" value="0">
        <label for="field-radio4-0">
          Custom Radio
        </label>
      </li>
      <li class="custom-radio">
        <input id="field-radio4-1" name="field-radio4" type="radio" value="1">
        <label for="field-radio4-1">
          Custom Radio
        </label>
      </li>
      <li class="custom-radio">
        <input id="field-radio4-2" name="field-radio4" type="radio" value="2">
        <label for="field-radio4-2">
          Custom Radio
        </label>
      </li>
    </ul>

    <div class="mt-5"></div>
    <span class="title-xs">.group-lined / .checkbox</span>
    <ul class="group-lined">
      <li class="checkbox">
        <input id="field-checkbox2-0" name="field-checkbox2" type="checkbox" value="0">
        <label for="field-checkbox2-0">
          checkbox
        </label>
      </li>
      <li class="checkbox">
        <input id="field-checkbox2-1" name="field-checkbox2" type="checkbox" value="1">
        <label for="field-checkbox2-1">
          checkbox
        </label>
      </li>
      <li class="checkbox">
        <input id="field-checkbox2-2" name="field-checkbox2" type="checkbox" value="2">
        <label for="field-checkbox2-2">
          checkbox
        </label>
      </li>
    </ul>

    <div class="mt-5"></div>
    <span class="title-xs">.group-lined / .checkbox(nested)</span>
    <ul class="group-lined">
      <li class="checkbox">
        <label for="field-checkbox3-0">
          <input id="field-checkbox3-0" name="field-checkbox3" type="checkbox" value="0">
          checkbox
        </label>
      </li>
      <li class="checkbox">
        <label for="field-checkbox3-1">
          <input id="field-checkbox3-1" name="field-checkbox3" type="checkbox" value="1">
          checkbox
        </label>
      </li>
      <li class="checkbox">
        <label for="field-checkbox3-2">
          <input id="field-checkbox3-2" name="field-checkbox3" type="checkbox" value="2">
          checkbox
        </label>
      </li>
    </ul>

    <div class="mt-5"></div>
    <span class="title-xs">.group-lined / .custom-checkbox</span>
    <ul class="group-lined">
      <li class="custom-checkbox">
        <input id="field-checkbox4-0" name="field-checkbox4" type="checkbox" value="0">
        <label for="field-checkbox4-0">
          Custom checkbox
        </label>
      </li>
      <li class="custom-checkbox">
        <input id="field-checkbox4-1" name="field-checkbox4" type="checkbox" value="1">
        <label for="field-checkbox4-1">
          Custom checkbox
        </label>
      </li>
      <li class="custom-checkbox">
        <input id="field-checkbox4-2" name="field-checkbox4" type="checkbox" value="2">
        <label for="field-checkbox4-2">
          Custom checkbox
        </label>
      </li>
    </ul>

    <div class="mt-5"></div>
    <span class="title-xs">.switch(checkbox)</span>
    <div class="fieldset-horizontal">
      <legend>legend</legend>
      <ul class="reset-ul">
        <li>
          <div class="switch">
            <input id="field-checkbox-switch-0" type="checkbox" value="0">
            <label for="field-checkbox-switch-0"></label>
          </div>
        </li>
      </ul>
    </div>

    <div class="mt-5"></div>
    <span class="title-xs">.selectbox</span>
    <div class="fieldset-horizontal has-input">
      <legend>legend</legend>
      <div class="select">
        <select id="select">
          <option disabled selected>choose...</option>
          <option value="1">option</option>
          <option value="2">option</option>
          <option value="3">option</option>
        </select>
      </div>
    </div>

    <div class="mt-5"></div>
    <span class="title-xs">.fileupload</span>
    <div class="fieldset-horizontal has-input">
      <legend>legend</legend>
      <div>
        <input type="file" name="file-upload" id="file-upload">
        <label for="file-upload"><small>Choose files</small></label>
      </div>
    </div>

    <div class="mt-5"></div>
    <span class="title-xs">.actions</span>
    <div class="group-center">
      <input class="button" type="submit" value="Submit" />
      <input class="button-outline" type="reset" value="Reset" />
    </div>
  </form>
</section>

<div class="mt-5"></div>
<h2 class="title-lg">Table</h2>

<section class="preview" id="table">
  <span class="title-xs">.table</span>
  <table class="table">
    <thead>
      <tr>
        <th>xxx</th>
        <th>xxx</th>
        <th>xxx</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
      </tr>
      <tr>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
      </tr>
      <tr>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
      </tr>
    </tbody>
  </table>

  <div class="mt-5"></div>
  <span class="title-xs">.table-line</span>
  <table class="table-line">
    <thead>
      <tr>
        <th>xxx</th>
        <th>xxx</th>
        <th>xxx</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
      </tr>
      <tr>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
      </tr>
      <tr>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
      </tr>
    </tbody>
  </table>

  <div class="mt-5"></div>
  <span class="title-xs">.table-line</span>
  <table class="table-stripe">
    <thead>
      <tr>
        <th>xxx</th>
        <th>xxx</th>
        <th>xxx</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
      </tr>
      <tr>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
      </tr>
      <tr>
        <td>xxx</td>
        <td>xxx</td>
        <td>xxx</td>
      </tr>
    </tbody>
  </table>
</section>

<div class="mt-5"></div>
<h2 class="title-lg">Icons</h2>

<section class="preview" id="icons">
  <i class="icon-hamburger"></i>
  <i class="icon-twitter"></i>
  <i class="icon-facebook"></i>
  <i class="icon-hatena"></i>
  <i class="icon-svg"></i>
</section>

<div class="mt-5"></div>
<h2 class="title-lg">Balloon</h2>

<section class="preview" id="others">
  <span class="balloon l"></span>
  <span class="balloon t"></span>
  <span class="balloon b"></span>
  <span class="balloon r"></span>
</section>

<div class="mt-5"></div>
<h2 class="title-lg">Utilities</h2>

<section class="preview" id="utilities">
  <span class="title-xs">.word-break</span>
  <div>
    <p class="word-break">.word-break</p>
  </div>

  <div class="mt-4"></div>
  <span class="title-xs">.word-break-none</span>
  <div>
    <p class="word-break-none">.word-break-none</p>
  </div>

  <div class="mt-4"></div>
  <span class="title-xs">.text-overflow</span>
  <div>
    <p class="text-overflow">.text-overflow</p>
  </div>

  <div class="mt-4"></div>
  <span class="title-xs">.wordwrap-fadeout</span>
  <div class="wordwrap-fadeout">
    <p>
      .wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout.wordwrap-fadeout
    </p>
  </div>
</section>