# CSS Components for Onsen UI

## Switch

    <label class="switch">
      <input type="checkbox" class="switch__input">
      <div class="switch__toggle">
        <div class="switch__handle"></div>
      </div>
    </label>
    <label class="switch">
      <input type="checkbox" class="switch__input" checked>
      <div class="switch__toggle">
        <div class="switch__handle"></div>
      </div>
    </label>
    <label class="switch">
      <input type="checkbox" class="switch__input" disabled>
      <div class="switch__toggle">
        <div class="switch__handle"></div>
      </div>
    </label>

## Material Switch

    <label class="switch switch--material">
      <input type="checkbox" class="switch__input switch--material__input">
      <div class="switch__toggle switch--material__toggle">
        <div class="switch__handle switch--material__handle">
        </div>
      </div>
    </label>
    <label class="switch switch--material">
      <input type="checkbox" class="switch__input switch--material__input" checked>
      <div class="switch__toggle switch--material__toggle">
        <div class="switch__handle switch--material__handle">
        </div>
      </div>
    </label>
    <label class="switch switch--material">
      <input type="checkbox" class="switch__input switch--material__input" disabled>
      <div class="switch__toggle switch--material__toggle">
        <div class="switch__handle switch--material__handle">
        </div>
      </div>
    </label>

## Range

    <div class="range">
      <input type="range" class="range__input">
    </div>

    <div class="range range--disabled">
      <input type="range" class="range__input" disabled>
    </div>

## Material Range

    <div class="range range--material">
      <input type="range" class="range__input range--material__input">
    </div>

    <div class="range range--material range--disabled">
      <input type="range" class="range__input range--material__input" disabled>
    </div>

## Notification

1 10 999

    <span class="notification">1</span>
    <span class="notification">10</span>
    <span class="notification">999</span>

## Toolbar

Navigation Bar

    <div class="toolbar">
      <div class="toolbar__center">Navigation Bar</div>
    </div>

## Toolbar Item

Navigation Bar
Label

    <div class="toolbar">
      <div class="toolbar__left">
        <span class="toolbar-button">
          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>

      <div class="toolbar__center">
        Navigation Bar
      </div>

      <div class="toolbar__right">
        <span class="toolbar-button">Label</span>
      </div>
    </div>

## Toolbar with Outline Button

Title
Button

    <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
    <div class="toolbar">
      <div class="toolbar__left">
        <span class="toolbar-button toolbar-button--outline">
          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>

      <div class="toolbar__center">
        Title
      </div>

      <div class="toolbar__right">
        <span class="toolbar-button toolbar-button--outline">Button</span>
      </div>
    </div>

## Bottom Bar

Bottom Toolbar

    <div class="bottom-bar">
      <div class="bottom-bar__line-height" style="text-align:center">Bottom Toolbar</div>
    </div>

## Toolbar with Segment

One
Two

    <div class="toolbar">
      <div class="toolbar__center">
        <div class="segment" style="width:200px;margin:7px 50px;">
          <div class="segment__item">
            <input type="radio" class="segment__input" name="navi-segment-a" checked>
            <div class="segment__button">One</div>
          </div>

          <div class="segment__item">
            <input type="radio" class="segment__input" name="navi-segment-a">
            <div class="segment__button">Two</div>
          </div>
        </div>
      </div>
    </div>

## Material Toolbar

Title

    <div class="toolbar toolbar--material">
      <div class="toolbar__center toolbar--material__center">
        Title
      </div>
    </div>

## No Shadow Toolbar

Navigation Bar
Label

    <div class="toolbar toolbar--noshadow">
      <div class="toolbar__left">
        <span class="toolbar-button">
          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>
      <div class="toolbar__center">
        Navigation Bar
      </div>
      <div class="toolbar__right">
        <span class="toolbar-button">Label</span>
      </div>
    </div>

## Material Toolbar with Icons

Title

    <div class="toolbar toolbar--material">
      <div class="toolbar__left toolbar--material__left">
        <span class="toolbar-button toolbar-button--material">
          <i class="zmdi zmdi-menu"></i>
        </span>
      </div>
      <div class="toolbar__center toolbar--material__center">
        Title
      </div>
      <div class="toolbar__right toolbar--material__right">
        <span class="toolbar-button toolbar-button--material">
          <i class="zmdi zmdi-search"></i>
        </span>
        <span class="toolbar-button toolbar-button--material">
          <i class="zmdi zmdi-favorite"></i>
        </span>
        <span class="toolbar-button toolbar-button--material">
          <i class="zmdi zmdi-more-vert"></i>
        </span>
      </div>
    </div>

## Transparent Toolbar

Navigation Bar
Label

    <div class="toolbar toolbar--transparent">
      <div class="toolbar__left">
        <span class="toolbar-button">
          <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
        </span>
      </div>
      <div class="toolbar__center">
        Navigation Bar
      </div>
      <div class="toolbar__right">
        <span class="toolbar-button">Label</span>
      </div>
    </div>

## Button

    <button class="button">Button</button>
    <button class="button" disabled>Button</button>

## Outline Button

    <button class="button button--outline">Button</button>
    <button class="button button--outline" disabled>Button</button>

## Light Button

    <button class="button button--light">Button</button>
    <button class="button button--light" disabled>Button</button>

## Quiet Button

    <button class="button--quiet">Button</button>
    <button class="button--quiet" disabled>Button</button>

## Call To Action Button

    <button class="button--cta">Button</button>
    <button class="button--cta" disabled>Button</button>

## Large Quiet Button

    <button class="button--large--quiet" style="width: 95%; margin: 0 auto;">Button</button>

## Large Call To Action Button

    <button class="button--large--cta" style="width: 95%; margin: 0 auto;">Button</button>

## Material Button

    <button class="button button--material">BUTTON</button>
    <button class="button button--material" disabled>DISABLED</button>

## Material Flat Button

    <button class="button button--material--flat">BUTTON</button>
    <button class="button button--material--flat" disabled>DISABLED</button>

## Button Bar

    <div class="button-bar" style="width:280px;">
      <div class="button-bar__item">
        <button class="button-bar__button">One</button>
      </div>
      <div class="button-bar__item">
        <button class="button-bar__button">Two</button>
      </div>
      <div class="button-bar__item">
        <button class="button-bar__button">Three</button>
      </div>
    </div>

## Segment

    <div class="segment" style="width: 280px; margin: 0 auto;">
      <div class="segment__item">
        <input type="radio" class="segment__input" name="segment-a" checked>
        <button class="segment__button">One</button>
      </div>
      <div class="segment__item">
        <input type="radio" class="segment__input" name="segment-a">
        <button class="segment__button">Two</button>
      </div>
      <div class="segment__item">
        <input type="radio" class="segment__input" name="segment-a">
        <button class="segment__button">Three</button>
      </div>
    </div>

## Material Segment

    <div class="segment segment--material" style="width: 280px; margin: 0 auto;">
      <div class="segment__item segment--material__item">
        <input type="radio" class="segment__input segment--material__input" name="segment-b" checked>
        <button class="segment__button segment--material__button">One</button>
      </div>
      <div class="segment__item segment--material__item">
        <input type="radio" class="segment__input segment--material__input" name="segment-b">
        <button class="segment__button segment--material__button">Two</button>
      </div>
      <div class="segment__item segment--material__item">
        <input type="radio" class="segment__input segment--material__input" name="segment-b">
        <button class="segment__button segment--material__button">Three</button>
      </div>
    </div>

## Icon Tabbar

    <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
    <div class="tabbar">
      <label class="tabbar__item">
        <input type="radio" name="tabbar-a" checked="checked">
        <button class="tabbar__button">
          <i class="tabbar__icon ion-stop"></i>
          <div class="tabbar__label">One</div>
        </button>
      </label>

      <label class="tabbar__item">
        <input type="radio" name="tabbar-a">
        <button class="tabbar__button">
          <i class="tabbar__icon ion-record"></i>
          <div class="tabbar__label">Two</div>
        </button>
      </label>

      <label class="tabbar__item">
        <input type="radio" name="tabbar-a">
        <button class="tabbar__button">
          <i class="tabbar__icon ion-star"></i>
          <div class="tabbar__label">Three</div>
        </button>
      </label>
    </div>

## Tabbar

    <div class="tabbar">
      <label class="tabbar__item">
        <input type="radio" name="tabbar-c" checked="checked">
        <button class="tabbar__button">
          <div class="tabbar__label">One</div>
        </button>
      </label>

      <label class="tabbar__item">
        <input type="radio" name="tabbar-c">
        <button class="tabbar__button">
          <div class="tabbar__label">Two</div>
        </button>
      </label>

      <label class="tabbar__item">
        <input type="radio" name="tabbar-c">
        <button class="tabbar__button">
          <div class="tabbar__label">Three</div>
        </button>
      </label>
    </div>

## Icon Only Tabbar

    <!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
    <div class="tabbar">
      <label class="tabbar__item">
        <input type="radio" name="tabbar-b" checked="checked">
        <button class="tabbar__button">
          <i class="tabbar__icon ion-stop"></i>
        </button>
      </label>

      <label class="tabbar__item">
        <input type="radio" name="tabbar-b">
        <button class="tabbar__button">
          <i class="tabbar__icon ion-record"></i>
        </button>
      </label>

      <label class="tabbar__item">
        <input type="radio" name="tabbar-b">
        <button class="tabbar__button">
          <i class="tabbar__icon ion-star"></i>
        </button>
      </label>

    </div>

## Top Tabbar

    <div class="tabbar tabbar--top">
      <label class="tabbar__item">
        <input type="radio" name="top-tabbar-a" checked="checked">
        <button class="tabbar__button">
          <i class="tabbar__icon ion-stop"></i>
        </button>
      </label>

      <label class="tabbar__item">
        <input type="radio" name="top-tabbar-a">
        <button class="tabbar__button">
          <i class="tabbar__icon ion-record"></i>
        </button>
      </label>

      <label class="tabbar__item">
        <input type="radio" name="top-tabbar-a">
        <button class="tabbar__button">
          <i class="tabbar__icon ion-star"></i>
        </button>
      </label>
    </div>

## Bordered Top Tabbar

    <div class="tabbar tabbar--top tabbar--top-border">
      <label class="tabbar__item tabbar--top-border__item">
        <input type="radio" name="top-tabbar-b" checked="checked">
        <button class="tabbar__button tabbar--top-border__button">
          Home
        </button>
      </label>

      <label class="tabbar__item tabbar--top-border__item">
        <input type="radio" name="top-tabbar-b">
        <button class="tabbar__button tabbar--top-border__button">
          Comments
        </button>
      </label>

      <label class="tabbar__item tabbar--top-border__item">
        <input type="radio" name="top-tabbar-b">
        <button class="tabbar__button tabbar--top-border__button">
          Activity
        </button>
      </label>
    </div>

## Material Tabbar

    <div class="tabbar tabbar--top tabbar--material">
      <label class="tabbar__item tabbar--material__item">
        <input type="radio" name="tabbar-material-a" checked="checked">
        <button class="tabbar__button tabbar--material__button">
          Music
        </button>
      </label>

      <label class="tabbar__item tabbar--material__item">
        <input type="radio" name="tabbar-material-a">
        <button class="tabbar__button tabbar--material__button">
          Movies
        </button>
      </label>

      <label class="tabbar__item tabbar--material__item">
        <input type="radio" name="tabbar-material-a">
        <button class="tabbar__button tabbar--material__button">
          Books
        </button>
      </label>

      <label class="tabbar__item tabbar--material__item">
        <input type="radio" name="tabbar-material-a">
        <button class="tabbar__button tabbar--material__button">
          Games
        </button>
      </label>

    </div>

## Material Tabbar (Icon only)

    <div class="tabbar tabbar--top tabbar--material">
      <label class="tabbar__item tabbar--material__item">
        <input type="radio" name="tabbar-material-a" checked="checked">
        <button class="tabbar__button tabbar--material__button">
          <i class="tabbar__icon tabbar--material__icon zmdi zmdi-phone"></i>
        </button>
      </label>

      <label class="tabbar__item tabbar--material__item">
        <input type="radio" name="tabbar-material-a">
        <button class="tabbar__button tabbar--material__button">
          <i class="tabbar__icon tabbar--material__icon zmdi zmdi-favorite"></i>
        </button>
      </label>

      <label class="tabbar__item tabbar--material__item">
        <input type="radio" name="tabbar-material-a">
        <button class="tabbar__button tabbar--material__button">
          <i class="tabbar__icon tabbar--material__icon zmdi zmdi-pin-account"></i>
        </button>
      </label>
    </div>

## Material Tabbar (Icon and Label)

    <div class="tabbar tabbar--top tabbar--material">
      <label class="tabbar__item tabbar--material__item">
        <input type="radio" name="tabbar-material-a" checked="checked">
        <button class="tabbar__button tabbar--material__button">
          <i class="tabbar__icon tabbar--material__icon zmdi zmdi-phone"></i>
          <div class="tabbar__label tabbar--material__label">Call</div>
        </button>
      </label>

      <label class="tabbar__item tabbar--material__item">
        <input type="radio" name="tabbar-material-a">
        <button class="tabbar__button tabbar--material__button">
          <i class="tabbar__icon tabbar--material__icon zmdi zmdi-favorite"></i>
          <div class="tabbar__label tabbar--material__label">Favorites</div>
        </button>
      </label>

      <label class="tabbar__item tabbar--material__item">
        <input type="radio" name="tabbar-material-a">
        <button class="tabbar__button tabbar--material__button">
          <i class="tabbar__icon tabbar--material__icon zmdi zmdi-delete"></i>
          <div class="tabbar__label tabbar--material__label">Delete</div>
        </button>
      </label>
    </div>

## Toolbar Button

    <!-- Prerequisite=This example use font-awesome(http://fortawesome.github.io/Font-Awesome/) to display icons. -->
    <button class="toolbar-button">
      <i class="fa fa-bell" style="font-size:17px"></i> Label
    </button>

    <button class="toolbar-button toolbar-button--outline">
      <i class="fa fa-bell" style="font-size:17px"></i> Label
    </button>

## Checkbox

OFF
ON
Disabled

    <label class="checkbox">
      <input type="checkbox" class="checkbox__input">
      <div class="checkbox__checkmark"></div>
      OFF
    </label>

    <label class="checkbox">
      <input type="checkbox" class="checkbox__input" checked="checked">
      <div class="checkbox__checkmark"></div>
      ON
    </label>

    <label class="checkbox">
      <input type="checkbox" class="checkbox__input" disabled>
      <div class="checkbox__checkmark"></div>
      Disabled
    </label>

## No border Checkbox

OFF
ON
Disabled

    <label class="checkbox--noborder">
      <input type="checkbox" class="checkbox__input checkbox--noborder__input">
      <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
      OFF
    </label>

    <label class="checkbox--noborder">
      <input type="checkbox" class="checkbox__input checkbox--noborder__input" checked="checked">
      <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
      ON
    </label>

    <label class="checkbox--noborder">
      <input type="checkbox" class="checkbox__input checkbox--noborder__input" disabled checked="checked">
      <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
      Disabled
    </label>

## Material Checkbox

OFF
ON
ON
Disabled

    <label class="checkbox checkbox--material">
      <input type="checkbox" class="checkbox__input checkbox--material__input">
      <div class="checkbox__checkmark checkbox--material__checkmark"></div>
      OFF
    </label>
    <label class="checkbox checkbox--material">
      <input type="checkbox" class="checkbox__input checkbox--material__input" checked="checked">
      <div class="checkbox__checkmark checkbox--material__checkmark"></div>
      ON
    </label>
    <label class="checkbox checkbox--material">
      <input type="checkbox" class="checkbox__input checkbox--material__input" checked="checked" disabled>
      <div class="checkbox__checkmark checkbox--material__checkmark"></div>
      ON
    </label>
    <label class="checkbox checkbox--material">
      <input type="checkbox" class="checkbox__input checkbox--material__input" disabled>
      <div class="checkbox__checkmark checkbox--material__checkmark"></div>
      Disabled
    </label>

## Radio Button

Label
Label
Label

    <label class="radio-button">
      <input type="radio" class="radio-button__input" name="r" checked="checked">
      <div class="radio-button__checkmark"></div>
      Label
    </label>

    <label class="radio-button">
      <input type="radio" class="radio-button__input" name="r">
      <div class="radio-button__checkmark"></div>
      Label
    </label>

    <label class="radio-button">
      <input type="radio" class="radio-button__input" name="r">
      <div class="radio-button__checkmark"></div>
      Label
    </label>

## Material Radio Button

Label
Label
Label
Label

    <label class="radio-button radio-button--material">
      <input type="radio" class="radio-button__input radio-button--material__input" name="r" checked="checked">
      <div class="radio-button__checkmark radio-button--material__checkmark"></div>
      Label
    </label>
    <label class="radio-button radio-button--material">
      <input type="radio" class="radio-button__input radio-button--material__input" name="r">
      <div class="radio-button__checkmark radio-button--material__checkmark"></div>
      Label
    </label>
    <label class="radio-button radio-button--material">
      <input type="radio" class="radio-button__input radio-button--material__input" name="s" disabled checked>
      <div class="radio-button__checkmark radio-button--material__checkmark"></div>
      Label
    </label>
    <label class="radio-button radio-button--material">
      <input type="radio" class="radio-button__input radio-button--material__input" name="s" disabled>
      <div class="radio-button__checkmark radio-button--material__checkmark"></div>
      Label
    </label>

## List

- Dog
- Cat
- Hamster

    <ul class="list">
      <li class="list-item">
        <div class="list-item__center">Dog</div>
      </li>
      <li class="list-item">
        <div class="list-item__center">Cat</div>
      </li>
      <li class="list-item">
        <div class="list-item__center">Hamster</div>
      </li>
    </ul>

## Noborder List

- Item
- Item

    <ul class="list list--noborder">
      <li class="list-item list-item--noborder">
        <div class="list-item__center">Item</div>
      </li>
      <li class="list-item list-item--noborder">
        <div class="list-item__center">Item</div>
      </li>
    </ul>

## Category List Header

- Header
- Item
- Item
- Item

    <ul class="list">
      <li class="list-header">
        Header
      </li>
      <li class="list-item">
        <div class="list-item__center">Item</div>
      </li>
      <li class="list-item">
        <div class="list-item__center">Item</div>
      </li>
      <li class="list-item">
        <div class="list-item__center">Item</div>
      </li>
    </ul>

## Tappable List

- Tappable Item
- Tappable Item
- Tappable Item

    <ul class="list">
      <li class="list-item list-item--tappable">
        <div class="list-item__center">Tappable Item</div>
      </li>
      <li class="list-item list-item--tappable">
        <div class="list-item__center">Tappable Item</div>
      </li>
      <li class="list-item list-item--tappable">
        <div class="list-item__center">Tappable Item</div>
      </li>
    </ul>

## Switch in List Item

- Label
- Label

    <ul class="list">
      <li class="list-item">
        <div class="list-item__center">
          Label
        </div>
        <div class="list-item__right">
          <label class="switch">
            <input type="checkbox" class="switch__input" checked>
            <div class="switch__toggle">
              <div class="switch__handle"></div>
            </div>
          </label>
        </div>
      </li>
      <li class="list-item">
        <div class="list-item__center">
          Label
        </div>
        <div class="list-item__right">
          <label class="switch">
            <input type="checkbox" class="switch__input">
            <div class="switch__toggle">
              <div class="switch__handle"></div>
            </div>
          </label>
        </div>
      </li>
    </ul>

## List Item with Chevron

- Item A
- Item B

    <ul class="list">
      <li class="list-item list-item--chevron">
        <div class="list-item__center">Item A</div>
      </li>
      <li class="list-item list-item--chevron">
        <div class="list-item__center">Item B</div>
      </li>
    </ul>

## Inset List

- List Item with Chevron
- List Item with Chevron

    <ul class="list list--inset">
      <li class="list-item list--inset__item list-item--chevron list-item--tappable">
        <div class="list-item__center">List Item with Chevron</div>
      </li>
      <li class="list-item list--inset__item list-item--chevron list-item--tappable">
        <div class="list-item__center">List Item with Chevron</div>
      </li>
    </ul>

## Radio Button in List Item

- Radio Button
- Radio Button

    <ul class="list">
      <li class="list-item list-item--tappable">
        <div class="list-item__left">
          <label class="radio-button">
            <input type="radio" id="r1" class="radio-button__input" name="r" checked="checked">
            <div class="radio-button__checkmark"></div>
          </label>
        </div>
        <label for="r1" class="list-item__center">
          Radio Button
        </label>
      </li>
      <li class="list-item list-item--tappable">
        <div class="list-item__left">
          <label class="radio-button">
            <input type="radio" id="r2" class="radio-button__input" name="r">
            <div class="radio-button__checkmark"></div>
          </label>
        </div>
        <label for="r2" class="list-item__center">
          Radio Button
        </label>
      </li>
    </ul>

## Checkbox in List Item

- Checkbox
- Checkbox

    <ul class="list">
      <li class="list-item list-item--tappable">
        <div class="list-item__left">
          <label class="checkbox">
            <input type="checkbox" id="checkbox1" class="checkbox__input" name="c" checked="checked">
            <div class="checkbox__checkmark"></div>
          </label>
        </div>
        <label for="checkbox1" class="list-item__center">
          Checkbox
        </label>
      </li>
      <li class="list-item list-item--tappable">
        <div class="list-item__left">
          <label class="checkbox">
            <input type="checkbox" id="checkbox2" class="checkbox__input" name="c">
            <div class="checkbox__checkmark"></div>
          </label>
        </div>
        <label for="checkbox2" class="list-item__center">
          Checkbox
        </label>
      </li>
    </ul>

## No border Checkbox in List Item

- Checkbox
- Checkbox

    <ul class="list">
      <li class="list-item list-item--tappable">
        <div class="list-item__left">
          <label class="checkbox checkbox--noborder">
            <input id="s1" type="checkbox" class="checkbox__input checkbox--noborder__input">
            <div class="checkbox__checkmark checkbox--noborder checkbox--noborder__checkmark"></div>
          </label>
        </div>
        <label for="s1" class="list-item__center">
          Checkbox
        </label>
      </li>
      <li class="list-item list-item--tappable">
        <div class="list-item__left">
          <label class="checkbox checkbox--noborder">
            <input id="s2" type="checkbox" class="checkbox__input checkbox--noborder__input" checked>
            <div class="checkbox__checkmark checkbox--noborder checkbox--noborder__checkmark"></div>
          </label>
        </div>
        <label for="s2" class="list-item__center">
          Checkbox
        </label>
      </li>
    </ul>

## Text Input in List Item

    <ul class="list">
      <li class="list-item">
        <div class="list-item__center">
          <input type="text" class="text-input" placeholder="Name">
        </div>
      </li>
      <li class="list-item">
        <div class="list-item__center">
          <input type="text" class="text-input" placeholder="Email">
        </div>
      </li>
    </ul>

## Textarea in List Item

    <ul class="list">
      <li class="list-item">
        <div class="list-item__center">
          <textarea class="textarea textarea--transparent" placeholder="Text message"></textarea>
        </div>
      </li>
    </ul>

## Right Label in List Item

- Title
  Label

    <ul class="list">
      <li class="list-item">
        <div class="list-item__center">
          Title
        </div>
        <div class="list-item__right">
          <div class="list-item__label">Label</div>
        </div>
      </li>
    </ul>

## List Item with Subtitle

- Title
  Subtitle

    <ul class="list">
      <li class="list-item">
        <div class="list-item__center">
          <div class="list-item__title">
            Title
          </div>
          <div class="list-item__subtitle">
            Subtitle
          </div>
        </div>
      </li>
    </ul>

## List Item with Thumbnail

- Lily
  Very friendly cat
- Molly
  Loves tuna!

    <ul class="list">
      <li class="list-item">
        <div class="list-item__left">
          <img class="list-item__thumbnail" src="http://placekitten.com/g/40/40" alt="Cute kitten">
        </div>

        <div class="list-item__center">
          <div class="list-item__title">Lily</div>
          <div class="list-item__subtitle">Very friendly cat</div>
        </div>
      </li>

      <li class="list-item">
        <div class="list-item__left">
          <img class="list-item__thumbnail" src="http://placekitten.com/g/40/40" alt="Cute kitten">
        </div>

        <div class="list-item__center">
          <div class="list-item__title">Molly</div>
          <div class="list-item__subtitle">Loves tuna!</div>
        </div>
      </li>
    </ul>

## List Item with Icon

- Alice
  Description
- Bob
  Description

    <ul class="list">
      <li class="list-item">
        <div class="list-item__left">
          <img class="list-item__thumbnail" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwJCB8v/9zErgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAvSURBVFjD7c0BDQAACAMgtX+KJzWGm4MCdJK6MHVELBaLxWKxWCwWi8VisVj8MV7qBgI2A8rYpgAAAABJRU5ErkJggg==">
        </div>

        <div class="list-item__center">
          <div class="list-item__title">Alice</div>
          <div class="list-item__subtitle">Description</div>
        </div>

        <div class="list-item__right">
          <i class="ion-ios-information list-item__icon"></i>
        </div>
      </li>

      <li class="list-item">
        <div class="list-item__left">
          <img class="list-item__thumbnail" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwJCB8v/9zErgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAvSURBVFjD7c0BDQAACAMgtX+KJzWGm4MCdJK6MHVELBaLxWKxWCwWi8VisVj8MV7qBgI2A8rYpgAAAABJRU5ErkJggg==">
        </div>

        <div class="list-item__center">
          <div class="list-item__title">Bob</div>
          <div class="list-item__subtitle">Description</div>
        </div>

        <div class="list-item__right">
          <i class="ion-ios-information list-item__icon"></i>
        </div>
      </li>
    </ul>

## Material List

- Orange
  Sweet fruit that grows on trees.
- Pear
  Funny-shaped fruit.

    <ul class="list list--material">
      <li class="list-item list-item--material">
        <div class="list-item__center list-item--material__center">
          <div class="list-item__title list-item--material__title">Orange</div>
          <div class="list-item__subtitle list-item--material__subtitle">Sweet fruit that grows on trees.</div>
        </div>
      </li>
      <li class="list-item list-item--material">
        <div class="list-item__center list-item--material__center">
          <div class="list-item__title list-item--material__title">Pear</div>
          <div class="list-item__subtitle list-item--material__subtitle">Funny-shaped fruit.</div>
        </div>
      </li>
    </ul>

## Material List with Header

- Fruits
- Orange
  Sweet fruit that grows on trees.

    <ul class="list list--material">
      <li class="list-header list-header--material">
        Fruits
      </li>
      <li class="list-item list-item--material">
        <div class="list-item__center list-item--material__center">
          <div class="list-item__title list-item--material__title">Orange</div>
          <div class="list-item__subtitle list-item--material__subtitle">Sweet fruit that grows on trees.</div>
        </div>
      </li>
    </ul>

## Material List with Checkboxes

- Notifications
  Allow notifications
- Sound
  Hangouts message

    <ul class="list list--material">
      <li class="list-item list-item--material">
        <div class="list-item__left list-item--material__left">
          <label class="checkbox checkbox--material">
            <input type="checkbox" id="checkbox3" class="checkbox__input checkbox--material__input">
            <div class="checkbox__checkmark checkbox--material__checkmark"></div>
          </label>
        </div>

        <label for="checkbox3" class="list-item__center list-item--material__center">
          <div class="list-item__title list-item--material__title">Notifications</div>
          <div class="list-item__subtitle list-item--material__subtitle">Allow notifications</div>
        </label>
      </li>

      <li class="list-item list-item--material">
        <div class="list-item__left list-item--material__left">
          <label class="checkbox checkbox--material">
            <input type="checkbox" id="checkbox4" class="checkbox__input checkbox--material__input" checked="checked">
            <div class="checkbox__checkmark checkbox--material__checkmark"></div>
          </label>
        </div>

        <label for="checkbox4" class="list-item__center list-item--material__center">
          <div class="list-item__title list-item--material__title">Sound</div>
          <div class="list-item__subtitle list-item--material__subtitle">Hangouts message</div>
        </label>
      </li>

    </ul>

## Material List with Thumbnails

- Lily
  Very friendly cat
- Molly
  Loves tuna!

    <ul class="list list--material">
      <li class="list-item list-item--material">
        <div class="list-item__left list-item--material__left">
          <img class="list-item__thumbnail list-item--material__thumbnail" src="http://placekitten.com/g/42/41" alt="Cute kitten">
        </div>

        <div class="list-item__center list-item--material__center">
          <div class="list-item__title list-item--material__title">Lily</div>
          <div class="list-item__subtitle list-item--material__subtitle">Very friendly cat</div>
        </div>
      </li>

      <li class="list-item list-item--material">
        <div class="list-item__left list-item--material__left">
          <img class="list-item__thumbnail list-item--material__thumbnail" src="http://placekitten.com/g/40/40" alt="Cute kitten">
        </div>

        <div class="list-item__center list-item--material__center">
          <div class="list-item__title list-item--material__title">Molly</div>
          <div class="list-item__subtitle list-item--material__subtitle">Loves tuna!</div>
        </div>
      </li>

    </ul>

## Material List with Icons

- Alice
  Description
- Bob
  Description

    <ul class="list list--material">
      <li class="list-item list-item--material">
        <div class="list-item__left list-item--material__left">
          <img class="list-item__thumbnail list-item--material__thumbnail" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwJCB8v/9zErgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAvSURBVFjD7c0BDQAACAMgtX+KJzWGm4MCdJK6MHVELBaLxWKxWCwWi8VisVj8MV7qBgI2A8rYpgAAAABJRU5ErkJggg==">
        </div>

        <div class="list-item__center list-item--material__center">
          <div class="list-item__title list-item--material__title">Alice</div>
          <div class="list-item__subtitle list-item--material__subtitle">Description</div>
        </div>

        <div class="list-item__right list-item--material__right">
          <i style="color:#4db6ac" class="list-item__icon list-item--material__icon zmdi zmdi-comment"></i>
        </div>
      </li>

      <li class="list-item list-item--material">
        <div class="list-item__left list-item--material__left">
          <img class="list-item__thumbnail list-item--material__thumbnail" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAIAAAADnC86AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wwJCB8v/9zErgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAvSURBVFjD7c0BDQAACAMgtX+KJzWGm4MCdJK6MHVELBaLxWKxWCwWi8VisVj8MV7qBgI2A8rYpgAAAABJRU5ErkJggg==">
        </div>

        <div class="list-item__center list-item--material__center">
          <div class="list-item__title list-item--material__title">Bob</div>
          <div class="list-item__subtitle list-item--material__subtitle">Description</div>
        </div>

        <div class="list-item__right list-item--material__right">
          <i style="color:#4db6ac" class="list-item__icon list-item--material__icon zmdi zmdi-comment"></i>
        </div>
      </li>
    </ul>

## List item without divider

- Item
- Item

    <ul class="list">
      <li class="list-item list-item--nodivider">
        <div class="list-item__center list-item--nodivider__center">Item</div>
      </li>
      <li class="list-item list-item--nodivider">
        <div class="list-item__center list-item--nodivider__center">Item</div>
      </li>
    </ul>

## List item with long divider

- Item
- Item

    <ul class="list">
      <li class="list-item list-item--longdivider">
        <div class="list-item__center list-item--longdivider__center">Item</div>
      </li>
      <li class="list-item list-item--longdivider">
        <div class="list-item__center list-item--longdivider__center">Item</div>
      </li>
    </ul>

## List title

LIST TITLE

- Item
- Item

    <div class="list-title">LIST TITLE</div>
    <ul class="list">
      <li class="list-item">
        <div class="list-item__center">Item</div>
      </li>
      <li class="list-item">
        <div class="list-item__center">Item</div>
      </li>
    </ul>

## Material List Title

### LIST TITLE

- Item
- Item

    <h3 class="list-title list-title--material">LIST TITLE</h3>
    <ul class="list list--material">
      <li class="list-item list-item--material">
        <div class="list-item__center list-item--material__center">Item</div>
      </li>
      <li class="list-item list-item--material">
        <div class="list-item__center list-item--material__center">Item</div>
      </li>
    </ul>

## Search Input

    <input type="search" value="" placeholder="Search" class="search-input" style="width: 280px;">

## Material Search Input

    <input type="search" value="" placeholder="Search" class="search-input search-input--material" style="width: 280px;">

## Text Input

    <div><input type="text" class="text-input" placeholder="text" value=""></div>
    <div><input type="text" class="text-input" placeholder="text" value="" disabled></div>

## Underbar Text Input

    <div><input type="text" class="text-input text-input--underbar" placeholder="text" value=""></div>
    <div><input type="text" class="text-input text-input--underbar" placeholder="text" value="" disabled></div>

## Material Input

    <span>
      <div><input class="text-input text-input--material" placeholder="Username" type="text" required></div>
      <br />
      <div><input class="text-input text-input--material" placeholder="Password" type="password" required></div>
    </span>

## Transparent Text Input

    <div><input type="text" class="text-input text-input--transparent" placeholder="text" value=""></div>
    <div><input type="text" class="text-input text-input--transparent" placeholder="text" value="" disabled></div>

## Textarea

    <textarea class="textarea" rows="3" placeholder="Textarea"></textarea>

## Textarea Transparent

    <textarea class="textarea--transparent" rows="3" placeholder="Textarea"></textarea>

## Dialog

Content

    <div class="dialog-mask"></div>
    <div class="dialog">
      <div class="dialog-container">
        <div class="page">
          <p style="text-align:center;margin-top:40px;opacity:0.4;">Content</p>
        </div>
      </div>
    </div>

## Material Dialog

The quick brown fox jumps over the lazy dog.

    <div class="dialog-mask dialog-mask--material"></div>
    <div class="dialog dialog--material">
      <div class="dialog dialog-container--material">
        <p style="margin-left:24px;margin-right:24px">The quick brown fox jumps over the lazy dog.</p>
      </div>
    </div>

## Alert Dialog

Alert
Hello World!

    <div class="alert-dialog-mask"></div>
    <div class="alert-dialog">
      <div class="alert-dialog-container">
        <div class="alert-dialog-title">Alert</div>

        <div class="alert-dialog-content">
          Hello World!
        </div>

        <div class="alert-dialog-footer">
          <button class="alert-dialog-button alert-dialog-button--primal">OK</button>
        </div>
      </div>
    </div>

## Alert Dialog without Title

Hello World!

    <div class="alert-dialog-mask"></div>
    <div class="alert-dialog">
      <div class="alert-dialog-container">
        <div class="alert-dialog-content">
          Hello World!
        </div>

        <div class="alert-dialog-footer">
          <button class="alert-dialog-button alert-dialog-button--primal">OK</button>
        </div>
      </div>
    </div>

## Alert Dialog with Multiple Buttons

Hello World!

    <div class="alert-dialog-mask"></div>
    <div class="alert-dialog">
      <div class="alert-dialog-container">
        <div class="alert-dialog-content">
          Hello World!
        </div>

        <div class="alert-dialog-footer">
          <button class="alert-dialog-button">Cancel</button>
          <button class="alert-dialog-button alert-dialog-button--primal">OK</button>
        </div>
      </div>
    </div>

## Alert Dialog with Multiple Buttons 2

Alert
Hello World!

    <div class="alert-dialog-mask"></div>
    <div class="alert-dialog">
      <div class="alert-dialog-container">
        <div class="alert-dialog-title">Alert</div>

        <div class="alert-dialog-content">
          Hello World!
        </div>

        <div class="alert-dialog-footer alert-dialog-footer--rowfooter">
          <button class="alert-dialog-button alert-dialog-button--rowfooter">Left</button>
          <button class="alert-dialog-button alert-dialog-button--primal alert-dialog-button--rowfooter">Center</button>
          <button class="alert-dialog-button alert-dialog-button--rowfooter">Right</button>
        </div>
      </div>
    </div>

## Material Alert Dialog

Dialog title
Some dialog content.

    <div class="alert-dialog-mask alert-dialog-mask--material"></div>
    <div class="alert-dialog alert-dialog--material">
      <div class="alert-dialog-container alert-dialog-container--material">
        <div class="alert-dialog-title alert-dialog-title--material">
          Dialog title
        </div>
        <div class="alert-dialog-content alert-dialog-content--material">
          Some dialog content.
        </div>
        <div class="alert-dialog-footer alert-dialog-footer--material">
          <button class="alert-dialog-button alert-dialog-button--material">OK</button>
          <button class="alert-dialog-button alert-dialog-button--material">CANCEL</button>
        </div>
      </div>
    </div>

## Popover

Content

    <div class="popover-mask"></div>
    <div class="popover popover--bottom" style="bottom: 20px; left: 65px;">
      <div class="popover__arrow popover--bottom__arrow" style="left: 110px;"></div>
      <div class="popover__content popover--bottom__content">
        <div style="text-align:center;opacity:0.8;margin-top:40px">Content</div>
      </div>
    </div>

## Popover(top)

Content

    <div class="popover-mask"></div>
    <div class="popover popover--top" style="top: 20px; left: 50px;">
      <div class="popover__arrow popover--top__arrow" style="margin-left: 110px;"></div>
      <div class="popover__content popover--top__content">
        <div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>
      </div>
    </div>

## Popover(left)

Content

    <div class="popover-mask"></div>
    <div class="popover popover--right" style="top: 20px; right: 20px;">
      <div class="popover__arrow popover--right__arrow" style="bottom: 50px;"></div>
      <div class="popover__content popover--right__content">
        <div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>
      </div>
    </div>

## Popover(right)

Content

    <div class="popover-mask"></div>
    <div class="popover popover--left" style="top: 20px;left: 20px;">
      <div class="popover__arrow popover--left__arrow" style="top: 50px;"></div>
      <div class="popover__content popover--left__content">
        <div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>
      </div>
    </div>

## Material Popover

Content

    <div class="popover-mask popover-mask--material"></div>
    <div class="popover popover--material popover--left" style="top: 50px; left: 65px;">
      <div class="popover__arrow popover--material__arrow popover--left__arrow"></div>
      <div class="popover__content popover--material__content popover--left__content">
        <div style="text-align: center; opacity: 0.8; margin-top: 40px">Content</div>
      </div>
    </div>

## Progress Bar

    <div class="progress-bar">
      <div class="progress-bar__primary" style="width: 30%"></div>
    </div>
    <br />
    <div class="progress-bar">
      <div class="progress-bar__primary" style="width:20%"></div>
      <div class="progress-bar__secondary" style="width:76%"></div>
    </div>
    <br />
    <div class="progress-bar progress-bar--indeterminate">
    </div>

## Progress Circle

    <svg class="progress-circular progress-circular--indeterminate">
      <circle class="progress-circular__primary progress-circular--indeterminate__primary"/>
      <circle class="progress-circular__secondary progress-circular--indeterminate__secondary"/>
    </svg>

    <svg class="progress-circular">
      <circle class="progress-circular__secondary" style="stroke-dasharray: 140%, 251.32%"/>
      <circle class="progress-circular__primary" style="stroke-dasharray: 100%, 251.32%"/>
    </svg>

    <svg class="progress-circular">
      <circle class="progress-circular__primary" style="stroke-dasharray: 80%, 251.32%"/>
    </svg>

## Fab

    <button class="fab"><i class="zmdi zmdi-car"></i></button>
    <button class="fab" disabled><i class="zmdi zmdi-car"></i></button>

## Fab Mini

    <button class="fab fab--mini"><i class="zmdi zmdi-plus"></i></button>
    <button class="fab fab--mini" disabled><i class="zmdi zmdi-plus"></i></button>

## Modal

Message Text

    <div class="modal">
      <div class="modal__content">
        Message Text
      </div>
    </div>

## Select Input

    <select class="select-input">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>

## Material Select Input

    <select class="select-input select-input--material">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>

## Underbar Select Input

    <select class="select-input select-input--underbar">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>

## Action Sheet

Title

    <div class="action-sheet-mask"></div>
    <div class="action-sheet">
      <div class="action-sheet-title">Title</div>
      <button class="action-sheet-button">Label</button>
      <button class="action-sheet-button">Cancel</button>
    </div>

## Action Sheet with Delete Label

    <div class="action-sheet-mask"></div>
    <div class="action-sheet">
      <button class="action-sheet-button">Label</button>
      <button class="action-sheet-button action-sheet-button--destructive">Delete Label</button>
      <button class="action-sheet-button">Cancel</button>
    </div>

## Material Action Sheet

    <div class="action-sheet-mask action-sheet-mask--material"></div>
    <div class="action-sheet action-sheet--material">
      <button class="action-sheet-button action-sheet-button--material"><i class="ion-android-checkbox-blank action-sheet-icon--material"></i>Label</button>
      <button class="action-sheet-button action-sheet-button--material"><i class="ion-android-checkbox-blank action-sheet-icon--material"></i>Label</button>
      <button class="action-sheet-button action-sheet-button--material"><i class="ion-android-close action-sheet-icon--material"></i>Cancel</button>
    </div>

## Material Action Sheet with Title

Title

    <div class="action-sheet-mask action-sheet-mask--material"></div>
    <div class="action-sheet action-sheet--material">
      <div class="action-sheet-title action-sheet-title--material">Title</div>
      <button class="action-sheet-button action-sheet-button--material"><i class="ion-android-checkbox-blank action-sheet-icon--material"></i>Label</button>
      <button class="action-sheet-button action-sheet-button--material"><i class="ion-android-close action-sheet-icon--material"></i>Cancel</button>
    </div>

## Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    <div style="background-color: #eee; height: 200px; padding: 1px 0 0 0;">
      <div class="card">
        <div class="card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
    </div>

## Card with Title

## Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    <div style="background-color: #eee; height: 200px; padding: 1px 0 0 0;">
      <div class="card">
        <h2 class="card__title">Card Title</h2>
        <div class="card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
    </div>

## Material Card

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    <div style="background-color: #eee; height: 200px; padding: 1px 0 0 0;">
      <div class="card card--material">
        <div class="card__content card--material__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
    </div>

## Material Card with Title

Card Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    <div style="background-color: #eee; height: 200px; padding: 1px 0 0 0;">
      <div class="card card--material">
        <div class="card__title card--material__title">Card Title</div>
        <div class="card__content card--material__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      </div>
    </div>

## Toast

Message Message Message Message Message Message

    <div class="toast">
      <div class="toast__message">Message Message Message Message Message Message</div>
      <button class="toast__button">ACTION</button>
    </div>

## Material Toast

Message Message Message Message Message Message

    <div class="toast toast--material">
      <div class="toast__message toast--material__message">Message Message Message Message Message Message</div>
      <button class="toast__button toast--material__button">ACTION</button>
    </div>