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>

Material Notification

1 10 999 
<span class="notification notification--material">1</span>
<span class="notification notification--material">10</span>
<span class="notification notification--material">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 

<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 

<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 

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

<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 

<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 

<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

  • Cute kitten
    Lily
    Very friendly cat
  • Cute kitten
    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 

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

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>

Material Progress Bar 



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

Progress Circle 

<svg class="progress-circular progress-circular--indeterminate">
  <circle class="progress-circular__background"/>
  <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__background"/>
  <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__background"/>
  <circle class="progress-circular__primary" style="stroke-dasharray: 80%, 251.32%"/>
</svg>

Material Progress Circle 

<svg class="progress-circular progress-circular--material progress-circular--indeterminate">
  <circle class="progress-circular__background progress-circular--material__background"/>
  <circle class="progress-circular__primary progress-circular--material__primary progress-circular--indeterminate__primary"/>
  <circle class="progress-circular__secondary progress-circular--material__secondary progress-circular--indeterminate__secondary"/>
</svg>

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

<svg class="progress-circular progress-circular--material">
  <circle class="progress-circular__background progress-circular--material__background"/>
  <circle class="progress-circular__primary progress-circular--material__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>

&nbsp;

<select class="select-input" disabled>
  <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>

&nbsp;

<select class="select-input select-input--material" disabled>
  <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>

&nbsp;

<select class="select-input select-input--underbar" disabled>
  <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>