CSS Components for Onsen UI

Switch

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>
Corresponding elements: ons-switch
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>
Corresponding elements: ons-switch

Range

Range
<div class="range">
  <input type="range" class="range__input">
  <input type="range" class="range__focus-ring">
</div>

<div class="range range--disabled">
  <input type="range" class="range__input" disabled>
  <input type="range" class="range__focus-ring" disabled>
</div>
Corresponding elements: ons-range
Material Range
<div class="range range--material">
  <input type="range" class="range__input range--material__input" min="0" max="100">
  <!-- <input type="range" class="range__focus-ring range--material__focus-ring"> -->
</div>

<div class="range range--material range--disabled">
  <input type="range" class="range__input range--material__input" disabled>
  <!-- <input type="range" class="range__focus-ring range--material__focus-ring" disabled> -->
</div>
Corresponding elements: ons-range

Notification

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

Toolbar
Navigation Bar
<div class="toolbar">
  <div class="toolbar__center">Navigation Bar</div>
</div>
Corresponding elements: ons-toolbar
Toolbar Item
Navigation Bar
Label 
<div class="toolbar">
  <div class="toolbar__left">
    <span class="toolbar-button">
      <i class="ion-ios-menu" 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>
Corresponding elements: ons-toolbar ons-toolbar-button
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-ios-menu" 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>
Corresponding elements: ons-toolbar ons-toolbar-button
Bottom Bar
Bottom Toolbar
<div class="bottom-bar">
  <div class="bottom-bar__line-height" style="text-align:center">Bottom Toolbar</div>
</div>
Corresponding elements: ons-bottom-toolbar
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>
Corresponding elements: ons-toolbar
Material Toolbar
Title 
<div class="toolbar toolbar--material">
  <div class="toolbar__center toolbar--material__center">
    Title
  </div>
</div>
Corresponding elements: ons-toolbar
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>
Corresponding elements: ons-toolbar
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>
Corresponding elements: ons-toolbar
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>
Corresponding elements: ons-toolbar

Button

Button
<button class="button">Button</button>
<button class="button" disabled>Button</button>
Corresponding elements: ons-button
Outline Button
<button class="button button--outline">Button</button>
<button class="button button--outline" disabled>Button</button>
Corresponding elements: ons-button
Light Button
<button class="button button--light">Button</button>
<button class="button button--light" disabled>Button</button>
Corresponding elements: ons-button
Quiet Button
<button class="button button--quiet">Button</button>
<button class="button button--quiet" disabled>Button</button>
Corresponding elements: ons-button
Call To Action Button
<button class="button button--cta">Button</button>
<button class="button button--cta" disabled>Button</button>
Corresponding elements: ons-button
Large Quiet Button
<button class="button button--large--quiet" style="width: 95%; margin: 0 auto;">Button</button>
Corresponding elements: ons-button
Large Call To Action Button
<button class="button button--large--cta" style="width: 95%; margin: 0 auto;">Button</button>
Corresponding elements: ons-button
Material Button
<button class="button button--material">BUTTON</button>
<button class="button button--material" disabled>DISABLED</button>
Corresponding elements: ons-button
Material Flat Button
<button class="button button--material--flat">BUTTON</button>
<button class="button button--material--flat" disabled>DISABLED</button>
Corresponding elements: ons-button

Segment

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
One
Two
Three
<div class="segment" style="width: 280px; margin: 0 auto;">
  <div class="segment__item">
    <input type="radio" class="segment__input" name="segment-a" checked>
    <div class="segment__button">One</div>
  </div>
  <div class="segment__item">
    <input type="radio" class="segment__input" name="segment-a">
    <div class="segment__button">Two</div>
  </div>
  <div class="segment__item">
    <input type="radio" class="segment__input" name="segment-a">
    <div class="segment__button">Three</div>
  </div>
</div>
Material Segment
One
Two
Three
<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>
    <div class="segment__button segment--material__button">One</div>
  </div>
  <div class="segment__item segment--material__item">
    <input type="radio" class="segment__input segment--material__input" name="segment-b">
    <div class="segment__button segment--material__button">Two</div>
  </div>
  <div class="segment__item segment--material__item">
    <input type="radio" class="segment__input segment--material__input" name="segment-b">
    <div class="segment__button segment--material__button">Three</div>
  </div>
</div>

Tabbar

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-ios-square"></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-ios-radio-button-on"></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-ios-star"></i>
      <div class="tabbar__label">Three</div>
    </button>
  </label>
</div>
Corresponding elements: ons-tabbar ons-tab
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>
Corresponding elements: ons-tabbar ons-tab
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-ios-square"></i>
    </button>
  </label>

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

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

</div>
Corresponding elements: ons-tabbar ons-tab
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-ios-square"></i>
    </button>
  </label>

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

  <label class="tabbar__item">
    <input type="radio" name="top-tabbar-a">
    <button class="tabbar__button">
      <i class="tabbar__icon ion-ios-star"></i>
    </button>
  </label>
</div>
Corresponding elements: ons-tabbar ons-tab
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>
Corresponding elements: ons-tabbar ons-tab
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>
Corresponding elements: ons-tabbar ons-tab
Material Tabbar (Icon only)
<div class="tabbar tabbar--top tabbar--material">
  <label class="tabbar__item tabbar--material__item">
    <input type="radio" name="tabbar-material-b" 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-b">
    <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-b">
    <button class="tabbar__button tabbar--material__button">
      <i class="tabbar__icon tabbar--material__icon zmdi zmdi-pin-account"></i>
    </button>
  </label>
</div>
Corresponding elements: ons-tabbar ons-tab
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-c" 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-c">
    <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-c">
    <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>
Corresponding elements: ons-tabbar ons-tab

Toolbar Button

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

<button class="toolbar-button">
  Label
</button>

<button class="toolbar-button toolbar-button--outline">
  <i class="fa fa-bell" style="font-size:17px"></i> Label
</button>
Corresponding elements: ons-toolbar-button
Material Toolbar Button
Label 
<!-- Prerequisite=This example use Material Design Iconic Font(http://zavoloklom.github.io/material-design-iconic-font/) to display icons. -->
<span class="toolbar-button toolbar-button--material">
  <i class="zmdi zmdi-menu"></i>
</span>
<span class="toolbar-button toolbar-button--material">
  Label
</span>
<span class="toolbar-button toolbar-button--material">
  <i class="zmdi zmdi-favorite"></i>
</span>
Corresponding elements: ons-toolbar-button

Checkbox

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>
Corresponding elements: ons-input
No border Checkbox
<label class="checkbox checkbox--noborder">
  <input type="checkbox" class="checkbox__input checkbox--noborder__input">
  <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
  OFF
</label>

<label class="checkbox 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 checkbox--noborder">
  <input type="checkbox" class="checkbox__input checkbox--noborder__input" disabled checked="checked">
  <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
  Disabled
</label>
Corresponding elements: ons-input
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>
Corresponding elements: ons-input

Radio Button

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>
Corresponding elements: ons-input
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>
Corresponding elements: ons-input

List

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>
Corresponding elements: ons-list ons-list-item
Expandable List
  • Item
    Expanded content
<ul class="list">
  <li class="list-item list-item--expandable list-item--expanded">
    <div class="list-item__top">
      <div class="list-item__center">Item</div>
      <div class="list-item__right">
        <span class="list-item__expand-chevron"></span>
      </div>
    </div>
    <div class="list-item__expandable-content">Expanded content</div>
  </li>
</ul>
Corresponding elements: ons-list ons-list-item
Noborder List
  • Item
  • Item
<ul class="list list--noborder">
  <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>
Corresponding elements: ons-list ons-list-item
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>
Corresponding elements: ons-list ons-list-header ons-list-item
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>
Corresponding elements: ons-list ons-list-item
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>
Corresponding elements: ons-list ons-list-item ons-switch
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>
Corresponding elements: ons-list ons-list-item
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>
Corresponding elements: ons-list ons-list-item ons-input
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>
Corresponding elements: ons-list ons-list-item ons-input
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>
Corresponding elements: ons-list ons-list-item ons-input
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>
Corresponding elements: ons-list ons-list-item ons-input
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>
Corresponding elements: ons-list ons-list-item
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>
Corresponding elements: ons-list ons-list-item
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>
Corresponding elements: ons-list ons-list-item
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="https://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="https://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>
Corresponding elements: ons-list ons-list-item
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>
Corresponding elements: ons-list ons-list-item
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>
Corresponding elements: ons-list ons-list-item
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>
Corresponding elements: ons-list ons-list-item
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>
Corresponding elements: ons-list ons-list-item ons-input
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="https://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="https://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:#ccc" 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:#ccc" class="list-item__icon list-item--material__icon zmdi zmdi-comment"></i>
    </div>
  </li>
</ul>
List Item with Chevron
  • Item A
  • Item B
    Label
<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>
    <div class="list-item__right list-item--chevron__right">
      <div class="list-item__label">Label</div>
    </div>
  </li>
</ul>
Corresponding elements: ons-list ons-list-item
Nodivider List Item with Chevron
  • Item A
  • Item B
    Label
<ul class="list">
  <li class="list-item list-item--nodivider list-item--chevron">
    <div class="list-item__center list-item--nodivider__center">Item A</div>
  </li>
  <li class="list-item list-item--nodivider list-item--chevron">
    <div class="list-item__center list-item--nodivider__center">Item B</div>
    <div class="list-item__right list-item--nodivider__right list-item--chevron__right">
      <div class="list-item__label">Label</div>
    </div>
  </li>
</ul>
Corresponding elements: ons-list ons-list-item
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

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

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>
Corresponding elements: ons-input
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>
Corresponding elements: ons-input
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>
Corresponding elements: ons-input

Textarea

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

Dialog

Dialog

Content

<div class="dialog-mask"></div>
<div class="dialog">
  <div class="dialog-container">
    <p style="text-align:center;margin-top:40px;opacity:0.4;">Content</p>
  </div>
</div>
Corresponding elements: ons-dialog
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>
Corresponding elements: ons-dialog

Alert Dialog

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>
Corresponding elements: ons-alert-dialog
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>
Corresponding elements: ons-alert-dialog
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>
Corresponding elements: ons-alert-dialog
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>
Corresponding elements: ons-alert-dialog
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>
Corresponding elements: ons-alert-dialog

Popover

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>
Corresponding elements: ons-popover
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>
Corresponding elements: ons-popover
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>
Corresponding elements: ons-popover
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>
Corresponding elements: ons-popover
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>
Corresponding elements: ons-popover

Progress Bar

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>
Corresponding elements: ons-progress-bar
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>
Corresponding elements: ons-progress-bar

Progress Circle

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>
Corresponding elements: ons-progress-circular
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>
Corresponding elements: ons-progress-circular

Fab

Fab
<button class="fab"><i class="zmdi zmdi-car"></i></button>
<button class="fab" disabled><i class="zmdi zmdi-car"></i></button>
Corresponding elements: ons-fab
Material Fab
<button class="fab fab--material"><i class="zmdi zmdi-car"></i></button>
<button class="fab fab--material" disabled><i class="zmdi zmdi-car"></i></button>
Corresponding elements: ons-fab
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>
Corresponding elements: ons-fab
Material Fab Mini
<button class="fab fab--material fab--mini"><i class="zmdi zmdi-plus"></i></button>
<button class="fab fab--material fab--mini" disabled><i class="zmdi zmdi-plus"></i></button>
Corresponding elements: ons-fab
Modal
Message Text 
<div class="modal">
  <div class="modal__content">
    Message Text
  </div>
</div>
Corresponding elements: ons-modal

Select Input

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

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-ios-square action-sheet-icon--material"></i>Label</button>
  <button class="action-sheet-button action-sheet-button--material"><i class="ion-ios-square action-sheet-icon--material"></i>Label</button>
  <button class="action-sheet-button action-sheet-button--material"><i class="ion-ios-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-ios-square action-sheet-icon--material"></i>Label</button>
  <button class="action-sheet-button action-sheet-button--material"><i class="ion-ios-close action-sheet-icon--material"></i>Cancel</button>
</div>

Card

Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div style="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="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="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="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

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>