Testcases for Onsen CSS Components

Switch

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

Material Switch

Show code snippets
<label class="switch switch--material">
  <input type="checkbox" class="switch__input switch--material__input">
  <div class="switch__toggle switch--material__toggle"></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>
</label>
<label class="switch switch--material">
  <input type="checkbox" class="switch__input switch--material__input" disabled>
  <div class="switch__toggle switch--material__toggle"></div>
</label>

Range

Show code snippets
<input type="range" class="range">
<input type="range" class="range" disabled>

Material Range

Show code snippets
<input type="range" class="range range--material">
<input type="range" class="range range--material" disabled>

Transparent Navigation Bar

Show code snippets
<div class="navigation-bar navigation-bar--transparent">
  <div class="navigation-bar__left">
    <span class="toolbar-button--quiet">
      <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
    </span>
  </div>
  <div class="navigation-bar__center">
    Navigation Bar
  </div>
  <div class="navigation-bar__right">
    <span class="toolbar-button--quiet">Label</span>
  </div>
</div>

Transparent Navigation Bar

Show code snippets
<!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
<div class="navigation-bar navigation-bar--transparent">
  <div class="navigation-bar__left">
    <span class="toolbar-button--quiet">
      <i class="ion-navicon" style="font-size:32px; vertical-align:-6px;"></i>
    </span>
  </div>
  <div class="navigation-bar__center">
    Navigation Bar
  </div>
  <div class="navigation-bar__right">
    <span class="toolbar-button--quiet">Label</span>
  </div>
</div>

Bottom Bar

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

Material Navigation Bar

Show code snippets
<div class="navigation-bar navigation-bar--material">
  <div class="navigation-bar__center navigation-bar--material__center">
    Title
  </div>
</div>

Material Navigation Bar with Icons

Show code snippets
<div class="navigation-bar navigation-bar--material">
  <div class="navigation-bar__left navigation-bar--material__left">
    <span class="toolbar-button toolbar-button--material">
      <i class="zmdi zmdi-menu"></i>
    </span>
  </div>
  <div class="navigation-bar__center navigation-bar--material__center">
    Title
  </div>
  <div class="navigation-bar__right navigation-bar--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>

Button

Show code snippets
<button class="button">Button</button>
<button class="button" disabled>Button</button>

Outline Button

Show code snippets
<button class="button button--outline">Button</button>
<button class="button button--outline" disabled>Button</button>

Light Button

Show code snippets
<button class="button button--light">Button</button>
<button class="button button--light" disabled>Button</button>

Quiet Button

Show code snippets
<button class="button--quiet">Button</button>
<button class="button--quiet" disabled>Button</button>

Call To Action Button

Show code snippets
<button class="button--cta">Button</button>
<button class="button--cta" disabled>Button</button>

Large Button

Large Quiet Button

Large Call To Action Button

Material Button

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

Material Flat Button

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

Button Bar

Show code snippets
<div class="button-bar" style="width:280px;margin:0 auto;">
  <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

Show code snippets
<div class="button-bar" style="width:280px;margin:0 auto;">
  <div class="button-bar__item">
    <input type="radio" name="segment-a" checked>
    <button class="button-bar__button">One</button>
  </div>
  <div class="button-bar__item">
    <input type="radio" name="segment-a">
    <button class="button-bar__button">Two</button>
  </div>
  <div class="button-bar__item">
    <input type="radio" name="segment-a">
    <button class="button-bar__button">Three</button>
  </div>
</div>

Icon Tab Bar

Show code snippets
<!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
<div class="tab-bar">
  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-a" checked="checked">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-stop"></i>
      <div class="tab-bar__label">One</div>
    </button>
  </label>

  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-a">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-record"></i>
      <div class="tab-bar__label">Two</div>
    </button>
  </label>

  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-a">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-star"></i>
      <div class="tab-bar__label">Three</div>
    </button>
  </label>
</div>

Tab Bar

Show code snippets
<div class="tab-bar">
  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-c" checked="checked">
    <button class="tab-bar__button">
      <div class="tab-bar__label">One</div>
    </button>
  </label>

  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-c">
    <button class="tab-bar__button">
      <div class="tab-bar__label">Two</div>
    </button>
  </label>

  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-c">
    <button class="tab-bar__button">
      <div class="tab-bar__label">Three</div>
    </button>
  </label>
</div>

Icon Only Tab Bar

Show code snippets
<!-- Prerequisite=This example use ionicons(http://ionicons.com) to display icons. -->
<div class="tab-bar">
  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-b" checked="checked">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-stop"></i>
    </button>
  </label>

  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-b">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-record"></i>
    </button>
  </label>

  <label class="tab-bar__item">
    <input type="radio" name="tab-bar-b">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-star"></i>
    </button>
  </label>

</div>

Top Tab Bar

Show code snippets
<div class="tab-bar tab-bar--top">
  <label class="tab-bar__item">
    <input type="radio" name="top-tab-bar-a" checked="checked">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-stop"></i>
    </button>
  </label>

  <label class="tab-bar__item">
    <input type="radio" name="top-tab-bar-a">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-record"></i>
    </button>
  </label>

  <label class="tab-bar__item">
    <input type="radio" name="top-tab-bar-a">
    <button class="tab-bar__button">
      <i class="tab-bar__icon ion-star"></i>
    </button>
  </label>
</div>

Bordered Top Tab Bar

Show code snippets
<div class="tab-bar tab-bar--top tab-bar--top-border">
  <label class="tab-bar__item tab-bar--top-border__item">
    <input type="radio" name="top-tab-bar-b" checked="checked">
    <button class="tab-bar__button tab-bar--top-border__button">
      Home
    </button>
  </label>

  <label class="tab-bar__item tab-bar--top-border__item">
    <input type="radio" name="top-tab-bar-b">
    <button class="tab-bar__button tab-bar--top-border__button">
      Comments
    </button>
  </label>

  <label class="tab-bar__item tab-bar--top-border__item">
    <input type="radio" name="top-tab-bar-b">
    <button class="tab-bar__button tab-bar--top-border__button">
      Activity
    </button>
  </label>
</div>

Material Tab Bar

Show code snippets
<div class="tab-bar tab-bar--top tab-bar--material">
  <label class="tab-bar__item tab-bar--material__item">
    <input type="radio" name="tab-bar-material-a" checked="checked">
    <button class="tab-bar__button tab-bar--material__button">
      Music
    </button>
  </label>

  <label class="tab-bar__item tab-bar--material__item">
    <input type="radio" name="tab-bar-material-a">
    <button class="tab-bar__button tab-bar--material__button">
      Movies
    </button>
  </label>

  <label class="tab-bar__item tab-bar--material__item">
    <input type="radio" name="tab-bar-material-a">
    <button class="tab-bar__button tab-bar--material__button">
      Books
    </button>
  </label>

  <label class="tab-bar__item tab-bar--material__item">
    <input type="radio" name="tab-bar-material-a">
    <button class="tab-bar__button tab-bar--material__button">
      Games
    </button>
  </label>

</div>

Material Tab Bar (Icon only)

Show code snippets
<div class="tab-bar tab-bar--top tab-bar--material">
  <label class="tab-bar__item tab-bar--material__item">
    <input type="radio" name="tab-bar-material-a" checked="checked">
    <button class="tab-bar__button tab-bar--material__button">
      <i class="tab-bar__icon tab-bar--material__icon zmdi zmdi-phone"></i>
    </button>
  </label>

  <label class="tab-bar__item tab-bar--material__item">
    <input type="radio" name="tab-bar-material-a">
    <button class="tab-bar__button tab-bar--material__button">
      <i class="tab-bar__icon tab-bar--material__icon zmdi zmdi-favorite"></i>
    </button>
  </label>

  <label class="tab-bar__item tab-bar--material__item">
    <input type="radio" name="tab-bar-material-a">
    <button class="tab-bar__button tab-bar--material__button">
      <i class="tab-bar__icon tab-bar--material__icon zmdi zmdi-pin-account"></i>
    </button>
  </label>
</div>

Material Tab Bar (Icon and Label)

Show code snippets
<div class="tab-bar tab-bar--top tab-bar--material">
  <label class="tab-bar__item tab-bar--material__item">
    <input type="radio" name="tab-bar-material-a" checked="checked">
    <button class="tab-bar__button tab-bar--material__button">
      <i class="tab-bar__icon tab-bar--material__icon zmdi zmdi-phone"></i>
      <div class="tab-bar__label tab-bar--material__label">Call</div>
    </button>
  </label>

  <label class="tab-bar__item tab-bar--material__item">
    <input type="radio" name="tab-bar-material-a">
    <button class="tab-bar__button tab-bar--material__button">
      <i class="tab-bar__icon tab-bar--material__icon zmdi zmdi-favorite"></i>
      <div class="tab-bar__label tab-bar--material__label">Favorites</div>
    </button>
  </label>

  <label class="tab-bar__item tab-bar--material__item">
    <input type="radio" name="tab-bar-material-a">
    <button class="tab-bar__button tab-bar--material__button">
      <i class="tab-bar__icon tab-bar--material__icon zmdi zmdi-delete"></i>
      <div class="tab-bar__label tab-bar--material__label">Delete</div>
    </button>
  </label>
</div>

Notification

1 10 999
Show code snippets
<span class="notification">1</span>
<span class="notification">10</span>
<span class="notification">999</span>

Toolbar Button

Show code snippets
<!-- 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

Show code snippets
<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

Show code snippets
<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

Show code snippets
<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

Show code snippets
<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

Show code snippets
<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
Show code snippets
<ul class="list">
  <li class="list__item">
    Dog
  </li>
  <li class="list__item">
    Cat
  </li>
  <li class="list__item">
    Hamster
  </li>
</ul>

Noborder List

  • Item
  • Item
Show code snippets
<ul class="list list--noborder">
  <li class="list__item">
    Item
  </li>
  <li class="list__item">
    Item
  </li>
</ul>

Category List Header

  • Header
  • Item
  • Header
  • Item
Show code snippets
<ul class="list">
  <li class="list__header">
    Header
  </li>
  <li class="list__item">
    Item
  </li>
  <li class="list__header">
    Header
  </li>
  <li class="list__item">
    Item
  </li>
</ul>

Tappable List

  • Tappable Item
Show code snippets
<ul class="list">
  <li class="list__item list__item--tappable">
    Tappable Item
  </li>
</ul>

Switch in List Item

  • Label
  • Label
Show code snippets
<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>
      </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>
      </label>
    </div>
  </li>
</ul>

List Item with Chevron

  • Tappable Item
  • Tappable Item
Show code snippets
<ul class="list">
  <li class="list__item list__item--chevron list__item--tappable">
    Tappable Item
  </li>
  <li class="list__item list__item--chevron list__item--tappable">
    Tappable Item
  </li>
</ul>

Inset List

  • List Item with Chevron
  • List Item with Chevron
Show code snippets
<ul class="list list--inset">
  <li class="list__item list--inset__item list__item--chevron list__item--tappable">
    List Item with Chevron
  </li>
  <li class="list__item list--inset__item list__item--chevron list__item--tappable">
    List Item with Chevron
  </li>
</ul>

Radio Button in List Item

Show code snippets
<ul class="list">
  <li class="list__item list__item--tappable">
    <div class="list__item__left">
      <label class="radio-button">
        <input type="radio" id="radio1" class="radio-button__input" name="b" checked="checked">
        <div class="radio-button__checkmark"></div>
      </label>
    </div>
    <label for="radio1" 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="radio2" class="radio-button__input" name="b" checked="checked">
        <div class="radio-button__checkmark"></div>
      </label>
    </div>
    <label for="radio2" class="list__item__center">
      Radio Button
    </label>
  </li>
</ul>

Checkbox in List Item

Show code snippets
<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

Show code snippets
<ul class="list">
  <li class="list__item list__item--tappable">
    <label class="checkbox checkbox--noborder">
      <input type="checkbox" class="checkbox__input checkbox--noborder__input">
      <div class="checkbox__checkmark checkbox--noborder checkbox--noborder__checkmark"></div>
      Checkbox
    </label>
  </li>
  <li class="list__item list__item--tappable">
    <label class="checkbox checkbox--noborder">
      <input type="checkbox" class="checkbox__input checkbox--noborder__input" checked>
      <div class="checkbox__checkmark checkbox--noborder checkbox--noborder__checkmark"></div>
      Checkbox
    </label>
  </li>
</ul>

Text Input in List Item

Show code snippets
<ul class="list">
  <li class="list__item">
    <input type="text" class="text-input text-input--transparent" placeholder="Name">
  </li>
  <li class="list__item">
    <input type="text" class="text-input text-input--transparent" placeholder="Email">
  </li>
</ul>

Textarea in List Item

Show code snippets
<ul class="list">
  <li class="list__item">
    <textarea class="textarea textarea--transparent" placeholder="Text message"></textarea>
  </li>
</ul>

Right Label in List Item

  • Title
    Label
Show code snippets
<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
Show code snippets
<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

  • Cute kitten
    Lily
    Very friendly cat
  • Cute kitten
    Molly
    Loves tuna!
Show code snippets
<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
  • Bob
Show code snippets
<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>

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

    <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.
Show code snippets
<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.
Show code snippets
<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

Show code snippets
<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

  • Cute kitten
    Lily
    Very friendly cat
  • Cute kitten
    Molly
    Loves tuna!
Show code snippets
<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
  • Bob
Show code snippets
<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>

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

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

Material List with Short Dividers

Show code snippets
<ul class="list list--material">
  <li class="list__item list__item--material list__item--short-divider">
    <div class="list__item__left list__item--material__left">
      <label class="checkbox checkbox--material">
        <input type="checkbox" id="checkbox5" class="checkbox__input checkbox--material__input">
        <div class="checkbox__checkmark checkbox--material__checkmark"></div>
      </label>
    </div>

    <label for="checkbox5" 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 list__item--short-divider">
    <div class="list__item__left list__item--material__left">
      <label class="checkbox checkbox--material">
        <input type="checkbox" id="checkbox6" class="checkbox__input checkbox--material__input" checked="checked">
        <div class="checkbox__checkmark checkbox--material__checkmark"></div>
      </label>
    </div>

    <label for="checkbox6" 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 Long Dividers

Show code snippets
<ul class="list list--material">
  <li class="list__item list__item--material list__item--divider">
    <div class="list__item__left list__item--material__left">
      <label class="checkbox checkbox--material">
        <input type="checkbox" id="checkbox7" class="checkbox__input checkbox--material__input">
        <div class="checkbox__checkmark checkbox--material__checkmark"></div>
      </label>
    </div>

    <label for="checkbox7" 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 list__item--divider">
    <div class="list__item__left list__item--material__left">
      <label class="checkbox checkbox--material">
        <input type="checkbox" id="checkbox8" class="checkbox__input checkbox--material__input" checked="checked">
        <div class="checkbox__checkmark checkbox--material__checkmark"></div>
      </label>
    </div>

    <label for="checkbox8" 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>

Search Input

Show code snippets
<input type="search" value="" placeholder="Search" class="search-input">

Text Input


Show code snippets
<input type="text" class="text-input" placeholder="text" value="">
<br>
<input type="text" class="text-input" placeholder="text" value="" disabled>

Transparent Text Input


Show code snippets
<input type="text" class="text-input--transparent" placeholder="text" value="">
<br>
<input type="text" class="text-input--transparent" placeholder="text" value="" disabled>

Underbar Text Input


Show code snippets
<input type="text" class="text-input--underbar" placeholder="text" value="">
<br>
<input type="text" class="text-input--underbar" placeholder="text" value="" disabled>

Material Input



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

Textarea

Show code snippets
<textarea class="textarea" rows="3" placeholder="Textarea"></textarea>

Textarea Transparent

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

Dialog

Content

Show code snippets
<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.

Show code snippets
<div class="dialog-mask dialog--material-mask"></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!
Show code snippets
<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!
Show code snippets
<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!
Show code snippets
<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!
Show code snippets
<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--one">
      <button class="alert-dialog-button alert-dialog-button--one">Left</button>
      <button class="alert-dialog-button alert-dialog-button--primal alert-dialog-button--one">Center</button>
      <button class="alert-dialog-button alert-dialog-button--one">Right</button>
    </div>
  </div>
</div>

Material Alert Dialog

Dialog title
Some dialog content.
Show code snippets
<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
Show code snippets
<div class="popover-mask"></div>
<div class="popover popover--up" style="bottom:20px;left:50px;">
  <div class="popover__bottom-arrow"></div>
  <div class="popover__content">
    <div style="text-align:center;opacity:0.4;margin-top:40px">Content</div>
  </div>
</div>

Popover(down)

Content
Show code snippets
<div class="popover-mask"></div>
<div class="popover popover--down" style="top:20px;left:50px;">
  <div class="popover__top-arrow"></div>
  <div class="popover__content">
    <div style="text-align:center;opacity:0.4;margin-top:40px">Content</div>
  </div>
</div>

Popover(left)

Content
Show code snippets
<div class="popover-mask"></div>
<div class="popover popover--left" style="top:20px;right:20px;">
  <div class="popover__right-arrow"></div>
  <div class="popover__content">
    <div style="text-align:center;opacity:0.4;margin-top:40px">Content</div>
  </div>
</div>

Popover(right)

Content
Show code snippets
<div class="popover-mask"></div>
<div class="popover popover--right" style="top:20px;left:20px;">
  <div class="popover__left-arrow"></div>
  <div class="popover__content">
    <div style="text-align:center;opacity:0.4;margin-top:40px">Content</div>
  </div>
</div>

Progress Bar


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

Progress Circle

Show code snippets
<svg class="progress-circular">
  <circle class="progress-circular__primary" cx="50%" cy="50%" r="40%" fill="none" stroke-width="10%" stroke-miterlimit="10"/>
</svg>
<svg class="progress-circular progress-circular--determinate">
  <circle class="progress-circular__secondary" cx="50%" cy="50%" r="40%" fill="none" stroke-width="10%" stroke-miterlimit="10" style="stroke-dasharray:140%,251.32%"/>
  <circle class="progress-circular__primary" cx="50%" cy="50%" r="40%" fill="none" stroke-width="10%" stroke-miterlimit="10" style="stroke-dasharray:100%,251.32%"/>
</svg>

Fab

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

Fab Mini

Show code snippets
<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>