Lists Others Tabs
Components

List (list)

Lists are continuous, vertical indexes of text or images.

  • List item List item
  • List item List item
  • List item List item
  • List item List item
  • List item List item
  • List item List item
  • List item List item
  • List item List item
  • List item List item
  • List item List item
<ul class="mdc-deprecated-list"> <li class="mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> <li class="mdc-deprecated-list-item--selected mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> <li class="mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> <li class="mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> <li class="mdc-deprecated-list-item--disabled mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> </ul> <ul class="mdc-deprecated-list--dense mdc-deprecated-list"> <li class="mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> <li class="mdc-deprecated-list-item--selected mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> <li class="mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> <li class="mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> <li class="mdc-deprecated-list-item--disabled mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> </ul>

List group (list_group)

Multiple related lists grouped together on a containing element.

First list

  • List item List item
  • List item List item
  • List item List item
  • List item List item
  • List item List item

Second list

  • List item List item
  • List item List item
<div class="mdc-list-group"> <h3 class="mdc-list-group__subheader">First list</h3> <ul class="mdc-deprecated-list"> <li class="mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> <li class="mdc-deprecated-list-item--selected mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> <li class="mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> <li class="mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> <li class="mdc-deprecated-list-item--disabled mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> </ul> <h3 class="mdc-list-group__subheader">Second list</h3> <ul class="mdc-deprecated-list"> <li class="mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> <li class="mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </li> </ul> </div>

(List item) (list_item)

To be used inside list components.

List item List item
List item List item
List item List item
List item List item
<div class="mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </div> <div class="mdc-deprecated-list-item--disabled mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </div> <div class="mdc-deprecated-list-item--selected mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </div> <div class="mdc-deprecated-list-item--activated mdc-deprecated-list-item mdc-ripple-upgraded"> <span class="mdc-deprecated-list-item__graphic material-icons" aria-hidden="true">favorite</span> <span class="mdc-deprecated-list-item__text"> <span class="mdc-deprecated-list-item__primary-text">List item</span> <span class="mdc-deprecated-list-item__secondary-text">List item</span> </span> <span aria-hidden="true" class="mdc-deprecated-list-item__meta"> <button aria-label class="mdc-icon-button material-icons">more_vert </button> </span> </div>

A banner displays a prominent message and related optional actions.

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. Taken from Michael Richins because doesn't exist in

Button (button)

Buttons allow users to take actions, and make choices, with a single tap.

Submit Submit Submit Submit
<a class="mdc-button" href="http://example.com"> <i class="material-icons mdc-button__icon" aria-hidden="true">search</i> <span class="mdc-button__label">Submit</span> </a> <a class="mdc-button--outlined mdc-button" href="http://example.com"> <i class="material-icons mdc-button__icon" aria-hidden="true">search</i> <span class="mdc-button__label">Submit</span> </a> <a class="mdc-button--raised mdc-button" href="http://example.com"> <i class="material-icons mdc-button__icon" aria-hidden="true">search</i> <span class="mdc-button__label">Submit</span> </a> <a class="mdc-button--unelevated mdc-button" href="http://example.com"> <i class="material-icons mdc-button__icon" aria-hidden="true">search</i> <span class="mdc-button__label">Submit</span> </a>

Card (card)

Cards contain content and actions about a single subject.

Card header.

Card body.

Action 1

Card header.

Card body.

Action 1
<div class="mdc-card"> <div class="mdc-card__primary-action"> <p style="padding: 1rem;">Card header.</p> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcsAAAECCAYAAACR5fw7AAADLklEQVR42u3VQREAMAgEsVL/Lk4oKMAAk0jYz1aSfgDA6ksAAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBw3wAq6QTsJXMX3wAAAABJRU5ErkJggg==)"> <div class="mdc-card__media-content"> <button aria-label="More options" class="mdc-icon-button material-icons">search </button> </div> </div> <div class="mdc-card__content"> <p>Card body.</p></div> <div class="mdc-card__ripple"></div> </div> <div class="mdc-card__actions"> <div class="mdc-card__action-buttons"> <div class="mdc-card__action mdc-card__action--button mdc-button"> <div class="mdc-button__ripple"></div> <span class="mdc-button__label">Action 1</span> </div> </div> <div class="mdc-card__action-icons"> <button aria-label="Share" class="mdc-card__action mdc-icon-button material-icons">share </button> </div> </div> </div> <div class="mdc-card--outlined mdc-card"> <div class="mdc-card__primary-action"> <p style="padding: 1rem;">Card header.</p> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcsAAAECCAYAAACR5fw7AAADLklEQVR42u3VQREAMAgEsVL/Lk4oKMAAk0jYz1aSfgDA6ksAAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBw3wAq6QTsJXMX3wAAAABJRU5ErkJggg==)"> <div class="mdc-card__media-content"> <button aria-label="More options" class="mdc-icon-button material-icons">search </button> </div> </div> <div class="mdc-card__content"> <p>Card body.</p></div> <div class="mdc-card__ripple"></div> </div> <div class="mdc-card__actions"> <div class="mdc-card__action-buttons"> <div class="mdc-card__action mdc-card__action--button mdc-button"> <div class="mdc-button__ripple"></div> <span class="mdc-button__label">Action 1</span> </div> </div> <div class="mdc-card__action-icons"> <button aria-label="Share" class="mdc-card__action mdc-icon-button material-icons">share </button> </div> </div> </div>

Chip (chip)

Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action.

event Add to calendar
Add to calendar
event Add to calendar
<div class="mdc-chip"> <div class="mdc-chip__ripple"></div> <i class="material-icons mdc-chip__icon mdc-chip__icon--leading mdc-chip__icon--leading">event</i> <span class="mdc-chip__text">Add to calendar</span> </div> <div class="mdc-chip--selected mdc-chip"> <div class="mdc-chip__ripple"></div> <div class="mdc-chip__checkmark"> <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30"> <path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path> </svg> </div> <span class="mdc-chip__text">Add to calendar</span> </div> <div class="mdc-chip--touch mdc-chip"> <div class="mdc-chip__ripple"></div> <div class="mdc-chip__touch"></div> <i class="material-icons mdc-chip__icon mdc-chip__icon--leading mdc-chip__icon--leading">event</i> <span class="mdc-chip__text">Add to calendar</span> </div>

Chip set (chip_set)

A set of chips components.

Chip One
Chip Two
Chip Three
Chip One
Chip Two
Chip Three
Chip One
Chip Two
Chip Three
Chip One
Chip Two
Chip Three
<div class="mdc-chip-set" role="grid"> <div class="mdc-chip--selected mdc-chip"> <div class="mdc-chip__ripple"></div> <div class="mdc-chip__checkmark"> <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30"> <path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path> </svg> </div> <span class="mdc-chip__text">Chip One</span> </div> <div class="mdc-chip"> <div class="mdc-chip__ripple"></div> <span class="mdc-chip__text">Chip Two</span> </div> <div class="mdc-chip"> <div class="mdc-chip__ripple"></div> <span class="mdc-chip__text">Chip Three</span> </div> </div> <div class="mdc-chip-set" role="grid"> <div class="mdc-chip--selected mdc-chip"> <div class="mdc-chip__ripple"></div> <div class="mdc-chip__checkmark"> <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30"> <path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path> </svg> </div> <span class="mdc-chip__text">Chip One</span> </div> <div class="mdc-chip"> <div class="mdc-chip__ripple"></div> <span class="mdc-chip__text">Chip Two</span> </div> <div class="mdc-chip"> <div class="mdc-chip__ripple"></div> <span class="mdc-chip__text">Chip Three</span> </div> </div> <div class="mdc-chip-set" role="grid"> <div class="mdc-chip--selected mdc-chip"> <div class="mdc-chip__ripple"></div> <div class="mdc-chip__checkmark"> <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30"> <path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path> </svg> </div> <span class="mdc-chip__text">Chip One</span> </div> <div class="mdc-chip"> <div class="mdc-chip__ripple"></div> <span class="mdc-chip__text">Chip Two</span> </div> <div class="mdc-chip"> <div class="mdc-chip__ripple"></div> <span class="mdc-chip__text">Chip Three</span> </div> </div> <div class="mdc-chip-set" role="grid"> <div class="mdc-chip--selected mdc-chip"> <div class="mdc-chip__ripple"></div> <div class="mdc-chip__checkmark"> <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30"> <path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path> </svg> </div> <span class="mdc-chip__text">Chip One</span> </div> <div class="mdc-chip"> <div class="mdc-chip__ripple"></div> <span class="mdc-chip__text">Chip Two</span> </div> <div class="mdc-chip"> <div class="mdc-chip__ripple"></div> <span class="mdc-chip__text">Chip Three</span> </div> </div>

Navigation drawer (drawer)

Navigation drawers provide access to destinations in your app.

<aside class="mdc-drawer"> <div class="mdc-drawer__content"> <nav class="mdc-list"> <a aria-current="page" class="active mdc-list-item mdc-list-item--activated" href="#"> <span class="mdc-list-item__ripple"></span> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i> <span class="mdc-list-item__text">Inbox</span> </a> <a class="mdc-list-item" href="#"> <span class="mdc-list-item__ripple"></span> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i> <span class="mdc-list-item__text">Outgoing</span> </a> <a class="mdc-list-item" href="#"> <span class="mdc-list-item__ripple"></span> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i> <span class="mdc-list-item__text">Drafts</span> </a> </nav> </div> </aside> <aside class="mdc-drawer--modal mdc-drawer"> <div class="mdc-drawer__content"> <nav class="mdc-list"> <a aria-current="page" class="active mdc-list-item mdc-list-item--activated" href="#"> <span class="mdc-list-item__ripple"></span> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i> <span class="mdc-list-item__text">Inbox</span> </a> <a class="mdc-list-item" href="#"> <span class="mdc-list-item__ripple"></span> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i> <span class="mdc-list-item__text">Outgoing</span> </a> <a class="mdc-list-item" href="#"> <span class="mdc-list-item__ripple"></span> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i> <span class="mdc-list-item__text">Drafts</span> </a> </nav> </div> </aside> <aside class="mdc-drawer--dismissible mdc-drawer"> <div class="mdc-drawer__content"> <nav class="mdc-list"> <a aria-current="page" class="active mdc-list-item mdc-list-item--activated" href="#"> <span class="mdc-list-item__ripple"></span> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i> <span class="mdc-list-item__text">Inbox</span> </a> <a class="mdc-list-item" href="#"> <span class="mdc-list-item__ripple"></span> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i> <span class="mdc-list-item__text">Outgoing</span> </a> <a class="mdc-list-item" href="#"> <span class="mdc-list-item__ripple"></span> <i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i> <span class="mdc-list-item__text">Drafts</span> </a> </nav> </div> </aside>

Floating action button (fab)

A floating action button (FAB) represents the primary action of a screen.

search
search
search
search
search Search
<a class="mdc-fab" href="http://example.com"> <div class="mdc-fab__ripple"></div> <span class="mdc-fab__icon material-icons">search</span> </a> <a class="mdc-fab--mini mdc-fab" href="http://example.com"> <div class="mdc-fab__ripple"></div> <span class="mdc-fab__icon material-icons">search</span> </a> <div class="mdc-touch-target-wrapper"> <a class="mdc-fab--touch mdc-fab" href="http://example.com"> <div class="mdc-fab__ripple"></div> <span class="mdc-fab__icon material-icons">search</span> </a> </div> <div class="mdc-touch-target-wrapper"> <a class="mdc-fab--mini mdc-fab--touch mdc-fab" href="http://example.com"> <div class="mdc-fab__ripple"></div> <span class="mdc-fab__icon material-icons">search</span> </a> </div> <a class="mdc-fab--extended mdc-fab" href="http://example.com"> <div class="mdc-fab__ripple"></div> <span class="mdc-fab__icon material-icons">search</span> <span class="mdc-fab__label">Search</span> </a>

Grid row (grid_row)

Material design’s responsive UI is based on a column-variate grid layout. It has 12 columns on desktop, 8 columns on tablet and 4 columns on phone.

Card header.

Card body.

Action 1

Card header.

Card body.

Action 1

Card header.

Card body.

Action 1

Card header.

Card body.

Action 1
<div class="mdc-layout-grid"> <div class="mdc-layout-grid__inner"> <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4 mdc-layout-grid__cell--span-6--desktop"> <div class="mdc-card"> <div class="mdc-card__primary-action"> <p style="padding: 1rem;">Card header.</p> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcsAAAECCAYAAACR5fw7AAADLklEQVR42u3VQREAMAgEsVL/Lk4oKMAAk0jYz1aSfgDA6ksAAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBw3wAq6QTsJXMX3wAAAABJRU5ErkJggg==)"> <div class="mdc-card__media-content"> <button aria-label="More options" class="mdc-icon-button material-icons">search </button> </div> </div> <div class="mdc-card__content"> <p>Card body.</p></div> <div class="mdc-card__ripple"></div> </div> <div class="mdc-card__actions"> <div class="mdc-card__action-buttons"> <div class="mdc-card__action mdc-card__action--button mdc-button"> <div class="mdc-button__ripple"></div> <span class="mdc-button__label">Action 1</span> </div> </div> <div class="mdc-card__action-icons"> <button aria-label="Share" class="mdc-card__action mdc-icon-button material-icons">share </button> </div> </div> </div> </div> <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4 mdc-layout-grid__cell--span-6--desktop"> <div class="mdc-card"> <div class="mdc-card__primary-action"> <p style="padding: 1rem;">Card header.</p> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcsAAAECCAYAAACR5fw7AAADLklEQVR42u3VQREAMAgEsVL/Lk4oKMAAk0jYz1aSfgDA6ksAAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBw3wAq6QTsJXMX3wAAAABJRU5ErkJggg==)"> <div class="mdc-card__media-content"> <button aria-label="More options" class="mdc-icon-button material-icons">search </button> </div> </div> <div class="mdc-card__content"> <p>Card body.</p></div> <div class="mdc-card__ripple"></div> </div> <div class="mdc-card__actions"> <div class="mdc-card__action-buttons"> <div class="mdc-card__action mdc-card__action--button mdc-button"> <div class="mdc-button__ripple"></div> <span class="mdc-button__label">Action 1</span> </div> </div> <div class="mdc-card__action-icons"> <button aria-label="Share" class="mdc-card__action mdc-icon-button material-icons">share </button> </div> </div> </div> </div> <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4 mdc-layout-grid__cell--span-6--desktop"> <div class="mdc-card"> <div class="mdc-card__primary-action"> <p style="padding: 1rem;">Card header.</p> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcsAAAECCAYAAACR5fw7AAADLklEQVR42u3VQREAMAgEsVL/Lk4oKMAAk0jYz1aSfgDA6ksAAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBw3wAq6QTsJXMX3wAAAABJRU5ErkJggg==)"> <div class="mdc-card__media-content"> <button aria-label="More options" class="mdc-icon-button material-icons">search </button> </div> </div> <div class="mdc-card__content"> <p>Card body.</p></div> <div class="mdc-card__ripple"></div> </div> <div class="mdc-card__actions"> <div class="mdc-card__action-buttons"> <div class="mdc-card__action mdc-card__action--button mdc-button"> <div class="mdc-button__ripple"></div> <span class="mdc-button__label">Action 1</span> </div> </div> <div class="mdc-card__action-icons"> <button aria-label="Share" class="mdc-card__action mdc-icon-button material-icons">share </button> </div> </div> </div> </div> <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4 mdc-layout-grid__cell--span-6--desktop"> <div class="mdc-card"> <div class="mdc-card__primary-action"> <p style="padding: 1rem;">Card header.</p> <div class="mdc-card__media mdc-card__media--16-9" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcsAAAECCAYAAACR5fw7AAADLklEQVR42u3VQREAMAgEsVL/Lk4oKMAAk0jYz1aSfgDA6ksAAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBglgBglgCAWQKAWQKAWQKAWQKAWQKAWQKAWQKAWQIAZgkAZgkAZgkAZgkAZgkAZgkAZgkAZgkAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAmCUAYJYAYJYAYJYAYJYAYJYAYJYAYJYAYJYAgFkCgFkCgFkCgFkCgFkCgFkCgFkCgFkCAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAGYJAJglAJglAJglAJglAJglAJglAJglAJglAGCWAGCWAGCWAGCWAGCWAGCWAGCWAGCWAIBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAoBZAgBmCQBmCQBmCQBmCQBmCQBmCQBmCQBmCQCYJQCYJQCYJQCYJQCYJQCYJQCYJQCYJQBglgBglgBglgBglgBglgBglgBglgBw3wAq6QTsJXMX3wAAAABJRU5ErkJggg==)"> <div class="mdc-card__media-content"> <button aria-label="More options" class="mdc-icon-button material-icons">search </button> </div> </div> <div class="mdc-card__content"> <p>Card body.</p></div> <div class="mdc-card__ripple"></div> </div> <div class="mdc-card__actions"> <div class="mdc-card__action-buttons"> <div class="mdc-card__action mdc-card__action--button mdc-button"> <div class="mdc-button__ripple"></div> <span class="mdc-button__label">Action 1</span> </div> </div> <div class="mdc-card__action-icons"> <button aria-label="Share" class="mdc-card__action mdc-icon-button material-icons">share </button> </div> </div> </div> </div> </div> </div>

Icon button (icon_button)

To use inside "Top app bar" or "Card" components.

search
<a aria-label="Submit" class="mdc-icon-button material-icons" href="http://example.com">search</a>

Image list (image_list)

Image lists display a collection of images in an organized grid.

  • Portrait blue
  • Landscape yellow
  • Landscape turquoise
  • Landscape yellow
  • Portrait blue
  • Landscape turquoise
  • Portrait blue
  • Landscape yellow
  • Landscape turquoise
  • Landscape yellow
  • Portrait blue
  • Landscape turquoise
  • Portrait blue
  • Landscape yellow
  • Landscape turquoise
  • Landscape yellow
  • Portrait blue
  • Landscape turquoise
<ul class="mdc-image-list"> <li class="mdc-image-list__item" style="width: calc(100% / 5 - 4.2px); margin: 2.0px"> <div class="mdc-image-list__image-aspect-container"> <img class="mdc-image-list__image" src="https://data.dilla.io/material_2/assets/image-1.png" /></div> <div class="mdc-image-list__supporting"> <span class="mdc-image-list__label">Portrait blue</span> </div> </li> <li class="mdc-image-list__item" style="width: calc(100% / 5 - 4.2px); margin: 2.0px"> <div class="mdc-image-list__image-aspect-container"> <img class="mdc-image-list__image" src="https://data.dilla.io/material_2/assets/image-2.jpg" /></div> <div class="mdc-image-list__supporting"> <span class="mdc-image-list__label">Landscape yellow</span> </div> </li> <li class="mdc-image-list__item" style="width: calc(100% / 5 - 4.2px); margin: 2.0px"> <div class="mdc-image-list__image-aspect-container"> <img class="mdc-image-list__image" src="https://data.dilla.io/material_2/assets/image-3.jpg" /></div> <div class="mdc-image-list__supporting"> <span class="mdc-image-list__label">Landscape turquoise</span> </div> </li> <li class="mdc-image-list__item" style="width: calc(100% / 5 - 4.2px); margin: 2.0px"> <div class="mdc-image-list__image-aspect-container"> <img class="mdc-image-list__image" src="https://data.dilla.io/material_2/assets/image-2.jpg" /></div> <div class="mdc-image-list__supporting"> <span class="mdc-image-list__label">Landscape yellow</span> </div> </li> <li class="mdc-image-list__item" style="width: calc(100% / 5 - 4.2px); margin: 2.0px"> <div class="mdc-image-list__image-aspect-container"> <img class="mdc-image-list__image" src="https://data.dilla.io/material_2/assets/image-1.png" /></div> <div class="mdc-image-list__supporting"> <span class="mdc-image-list__label">Portrait blue</span> </div> </li> <li class="mdc-image-list__item" style="width: calc(100% / 5 - 4.2px); margin: 2.0px"> <div class="mdc-image-list__image-aspect-container"> <img class="mdc-image-list__image" src="https://data.dilla.io/material_2/assets/image-3.jpg" /></div> <div class="mdc-image-list__supporting"> <span class="mdc-image-list__label">Landscape turquoise</span> </div> </li> </ul> <ul class="mdc-image-list--with-text-protection mdc-image-list"> <li class="mdc-image-list__item" style="width: calc(100% / 5 - 4.2px); margin: 2.0px"> <div class="mdc-image-list__image-aspect-container"> <img class="mdc-image-list__image" src="https://data.dilla.io/material_2/assets/image-1.png" /></div> <div class="mdc-image-list__supporting"> <span class="mdc-image-list__label">Portrait blue</span> </div> </li> <li class="mdc-image-list__item" style="width: calc(100% / 5 - 4.2px); margin: 2.0px"> <div class="mdc-image-list__image-aspect-container"> <img class="mdc-image-list__image" src="https://data.dilla.io/material_2/assets/image-2.jpg" /></div> <div class="mdc-image-list__supporting"> <span class="mdc-image-list__label">Landscape yellow</span> </div> </li> <li class="mdc-image-list__item" style="width: calc(100% / 5 - 4.2px); margin: 2.0px"> <div class="mdc-image-list__image-aspect-container"> <img class="mdc-image-list__image" src="https://data.dilla.io/material_2/assets/image-3.jpg" /></div> <div class="mdc-image-list__supporting"> <span class="mdc-image-list__label">Landscape turquoise</span> </div> </li> <li class="mdc-image-list__item" style="width: calc(100% / 5 - 4.2px); margin: 2.0px"> <div class="mdc-image-list__image-aspect-container"> <img class="mdc-image-list__image" src="https://data.dilla.io/material_2/assets/image-2.jpg" /></div> <div class="mdc-image-list__supporting"> <span class="mdc-image-list__label">Landscape yellow</span> </div> </li> <li class="mdc-image-list__item" style="width: calc(100% / 5 - 4.2px); margin: 2.0px"> <div class="mdc-image-list__image-aspect-container"> <img class="mdc-image-list__image" src="https://data.dilla.io/material_2/assets/image-1.png" /></div> <div class="mdc-image-list__supporting"> <span class="mdc-image-list__label">Portrait blue</span> </div> </li> <li class="mdc-image-list__item" style="width: calc(100% / 5 - 4.2px); margin: 2.0px"> <div class="mdc-image-list__image-aspect-container"> <img class="mdc-image-list__image" src="https://data.dilla.io/material_2/assets/image-3.jpg" /></div> <div class="mdc-image-list__supporting"> <span class="mdc-image-list__label">Landscape turquoise</span> </div> </li> </ul> <ul class="mdc-image-list--masonry mdc-image-list" style="column-count: 5; column-gap: 4px;"> <li class="mdc-image-list__item"> <img src="https://data.dilla.io/material_2/assets/image-1.png" /> <div class="mdc-image-list__supporting"> <span class="mdc-image-list__label">Portrait blue</span> </div> </li> <li class="mdc-image-list__item"> <img src="https://data.dilla.io/material_2/assets/image-2.jpg" /> <div class="mdc-image-list__supporting"> <span class="mdc-image-list__label">Landscape yellow</span> </div> </li> <li class="mdc-image-list__item"> <img src="https://data.dilla.io/material_2/assets/image-3.jpg" /> <div class="mdc-image-list__supporting"> <span class="mdc-image-list__label">Landscape turquoise</span> </div> </li> <li class="mdc-image-list__item"> <img src="https://data.dilla.io/material_2/assets/image-2.jpg" /> <div class="mdc-image-list__supporting"> <span class="mdc-image-list__label">Landscape yellow</span> </div> </li> <li class="mdc-image-list__item"> <img src="https://data.dilla.io/material_2/assets/image-1.png" /> <div class="mdc-image-list__supporting"> <span class="mdc-image-list__label">Portrait blue</span> </div> </li> <li class="mdc-image-list__item"> <img src="https://data.dilla.io/material_2/assets/image-3.jpg" /> <div class="mdc-image-list__supporting"> <span class="mdc-image-list__label">Landscape turquoise</span> </div> </li> </ul>

A menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

Pagination (pagination)

Pagination controls provide swift access to all pages while indicating that more pages exist.

Slider (slider)

MDC Slider provides an implementation of the Material Design slider component. It is modeled after the browser's <input type="range"> element. Sliders are fully RTL-aware, and conform to the WAI-ARIA slider authoring practices.

<div class="mdc-slider"> <input class="mdc-slider__input" type="range" min="" max="100" value="50" name="volume" aria-label="Continuous slider demo"> <div class="mdc-slider__track"> <div class="mdc-slider__track--inactive"></div> <div class="mdc-slider__track--active"> <div class="mdc-slider__track--active_fill"></div> </div> </div> <div class="mdc-slider__thumb"> <div class="mdc-slider__thumb-knob"></div> </div> </div> <div class="mdc-slider--range mdc-slider"> <input class="mdc-slider__input" type="range" min="" max="100" value="50" name="volume_start" aria-label="Continuous slider demo"> <input class="mdc-slider__input" type="range" min="" max="100" value="70" name="volume_end" aria-label="Continuous range slider demo"> <div class="mdc-slider__track"> <div class="mdc-slider__track--inactive"></div> <div class="mdc-slider__track--active"> <div class="mdc-slider__track--active_fill"></div> </div> </div> <div class="mdc-slider__thumb"> <div class="mdc-slider__thumb-knob"></div> </div> <div class="mdc-slider__thumb"> <div class="mdc-slider__thumb-knob"></div> </div> </div> <div class="mdc-slider--discrete mdc-slider"> <input class="mdc-slider__input" type="range" min="" max="100" value="50" name="volume" aria-label="Continuous slider demo"> <div class="mdc-slider__track"> <div class="mdc-slider__track--inactive"></div> <div class="mdc-slider__track--active"> <div class="mdc-slider__track--active_fill"></div> </div> </div> <div class="mdc-slider__thumb"> <div class="mdc-slider__value-indicator-container" aria-hidden="true"> <div class="mdc-slider__value-indicator"> <span class="mdc-slider__value-indicator-text">50</span> </div> </div> <div class="mdc-slider__thumb-knob"></div> </div> </div> <div class="mdc-slider--discrete mdc-slider--tick-marks mdc-slider"> <input class="mdc-slider__input" type="range" min="" max="100" value="50" name="volume" aria-label="Continuous slider demo"> <div class="mdc-slider__track"> <div class="mdc-slider__track--inactive"></div> <div class="mdc-slider__track--active"> <div class="mdc-slider__track--active_fill"></div> </div> </div> <div class="mdc-slider__thumb"> <div class="mdc-slider__value-indicator-container" aria-hidden="true"> <div class="mdc-slider__value-indicator"> <span class="mdc-slider__value-indicator-text">50</span> </div> </div> <div class="mdc-slider__thumb-knob"></div> </div> </div> <div class="mdc-slider--range mdc-slider--discrete mdc-slider"> <input class="mdc-slider__input" type="range" min="" max="100" value="50" name="volume_start" aria-label="Continuous slider demo"> <input class="mdc-slider__input" type="range" min="" max="100" value="70" name="volume_end" aria-label="Continuous range slider demo"> <div class="mdc-slider__track"> <div class="mdc-slider__track--inactive"></div> <div class="mdc-slider__track--active"> <div class="mdc-slider__track--active_fill"></div> </div> </div> <div class="mdc-slider__thumb"> <div class="mdc-slider__value-indicator-container" aria-hidden="true"> <div class="mdc-slider__value-indicator"> <span class="mdc-slider__value-indicator-text">50</span> </div> </div> <div class="mdc-slider__thumb-knob"></div> </div> <div class="mdc-slider__thumb"> <div class="mdc-slider__value-indicator-container" aria-hidden="true"> <div class="mdc-slider__value-indicator"> <span class="mdc-slider__value-indicator-text">70</span> </div> </div> <div class="mdc-slider__thumb-knob"></div> </div> </div> <div class="mdc-slider--range mdc-slider--discrete mdc-slider--tick-marks mdc-slider"> <input class="mdc-slider__input" type="range" min="" max="100" value="50" name="volume_start" aria-label="Continuous slider demo"> <input class="mdc-slider__input" type="range" min="" max="100" value="70" name="volume_end" aria-label="Continuous range slider demo"> <div class="mdc-slider__track"> <div class="mdc-slider__track--inactive"></div> <div class="mdc-slider__track--active"> <div class="mdc-slider__track--active_fill"></div> </div> </div> <div class="mdc-slider__thumb"> <div class="mdc-slider__value-indicator-container" aria-hidden="true"> <div class="mdc-slider__value-indicator"> <span class="mdc-slider__value-indicator-text">50</span> </div> </div> <div class="mdc-slider__thumb-knob"></div> </div> <div class="mdc-slider__thumb"> <div class="mdc-slider__value-indicator-container" aria-hidden="true"> <div class="mdc-slider__value-indicator"> <span class="mdc-slider__value-indicator-text">70</span> </div> </div> <div class="mdc-slider__thumb-knob"></div> </div> </div> <div class="mdc-slider--disabled mdc-slider"> <input class="mdc-slider__input" type="range" min="" max="100" value="50" name="volume" aria-label="Continuous slider demo"> <div class="mdc-slider__track"> <div class="mdc-slider__track--inactive"></div> <div class="mdc-slider__track--active"> <div class="mdc-slider__track--active_fill"></div> </div> </div> <div class="mdc-slider__thumb"> <div class="mdc-slider__thumb-knob"></div> </div> </div>

Snackbar (snackbar)

Snackbars provide brief messages about app processes at the bottom of the screen.

Try again :)
Retry
Try again :)
Retry
Try again :)
Retry
<div class="mdc-snackbar"> <div class="mdc-snackbar__surface"> <div class="mdc-snackbar__label" role="log" aria-live="polite">Try again :)</div> <div class="mdc-snackbar__actions"> <a class="mdc-snackbar__action mdc-button" href="#"> <span class="mdc-button__label">Retry</span> </a> </div> </div> </div> <div class="mdc-snackbar--stacked mdc-snackbar"> <div class="mdc-snackbar__surface"> <div class="mdc-snackbar__label" role="log" aria-live="polite">Try again :)</div> <div class="mdc-snackbar__actions"> <a class="mdc-snackbar__action mdc-button" href="#"> <span class="mdc-button__label">Retry</span> </a> </div> </div> </div> <div class="mdc-snackbar--leading mdc-snackbar"> <div class="mdc-snackbar__surface"> <div class="mdc-snackbar__label" role="log" aria-live="polite">Try again :)</div> <div class="mdc-snackbar__actions"> <a class="mdc-snackbar__action mdc-button" href="#"> <span class="mdc-button__label">Retry</span> </a> </div> </div> </div>

Top app bar (top_app_bar)

The top app bar provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions.

Page title
Page title
Page title
Page title
<header class="mdc-top-app-bar"> <div class="mdc-top-app-bar__row"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <button aria-label="Open navigation menu" class="mdc-top-app-bar__navigation-icon mdc-icon-button material-icons">menu </button> <span class="mdc-top-app-bar__title">Page title</span> </section> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <button aria-label="Favorite" class="mdc-top-app-bar__action-item mdc-icon-button material-icons">favorite </button> </section> </div> </header> <header class="mdc-top-app-bar--short mdc-top-app-bar"> <div class="mdc-top-app-bar__row"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <button aria-label="Open navigation menu" class="mdc-top-app-bar__navigation-icon mdc-icon-button material-icons">menu </button> <span class="mdc-top-app-bar__title">Page title</span> </section> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <button aria-label="Favorite" class="mdc-top-app-bar__action-item mdc-icon-button material-icons">favorite </button> </section> </div> </header> <header class="mdc-top-app-bar--dense mdc-top-app-bar"> <div class="mdc-top-app-bar__row"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <button aria-label="Open navigation menu" class="mdc-top-app-bar__navigation-icon mdc-icon-button material-icons">menu </button> <span class="mdc-top-app-bar__title">Page title</span> </section> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <button aria-label="Favorite" class="mdc-top-app-bar__action-item mdc-icon-button material-icons">favorite </button> </section> </div> </header> <header class="mdc-top-app-bar--prominent mdc-top-app-bar"> <div class="mdc-top-app-bar__row"> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <button aria-label="Open navigation menu" class="mdc-top-app-bar__navigation-icon mdc-icon-button material-icons">menu </button> <span class="mdc-top-app-bar__title">Page title</span> </section> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <button aria-label="Favorite" class="mdc-top-app-bar__action-item mdc-icon-button material-icons">favorite </button> </section> </div> </header>

Tab (tab)

Tabs organize content across different screens, data sets, and other interactions.

Favourites Favourites
<span aria-selected="true" class="mdc-tab" role="tab" tabindex="0"> <span class="mdc-tab__content"> <span class="mdc-tab__icon material-icons" aria-hidden="true">search</span> <span class="mdc-tab__text-label">Favourites</span> </span> <span class="mdc-tab-indicator"> <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span> </span> <span class="mdc-tab__ripple"></span> </span> <span aria-selected="true" class="mdc-tab--active mdc-tab" role="tab" tabindex="0"> <span class="mdc-tab__content"> <span class="mdc-tab__icon material-icons" aria-hidden="true">search</span> <span class="mdc-tab__text-label">Favourites</span> </span> <span class="mdc-tab-indicator mdc-tab-indicator--active"> <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span> </span> <span class="mdc-tab__ripple"></span> </span>

Tab bar (tab_bar)

Tabs organize content across different screens, data sets, and other interactions.

Search Favorite Settings
<div class="mdc-tab-bar" role="tablist"> <div class="mdc-tab-scroller"> <div class="mdc-tab-scroller__scroll-area"> <div class="mdc-tab-scroller__scroll-content"> <span aria-selected="true" class="mdc-tab--active mdc-tab" role="tab" tabindex="0"> <span class="mdc-tab__content"> <span class="mdc-tab__icon material-icons" aria-hidden="true">search</span> <span class="mdc-tab__text-label">Search</span> </span> <span class="mdc-tab-indicator mdc-tab-indicator--active"> <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span> </span> <span class="mdc-tab__ripple"></span> </span> <span aria-selected="true" class="mdc-tab" role="tab" tabindex="0"> <span class="mdc-tab__content"> <span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span> <span class="mdc-tab__text-label">Favorite</span> </span> <span class="mdc-tab-indicator"> <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span> </span> <span class="mdc-tab__ripple"></span> </span> <span aria-selected="true" class="mdc-tab" role="tab" tabindex="0"> <span class="mdc-tab__content"> <span class="mdc-tab__icon material-icons" aria-hidden="true">settings</span> <span class="mdc-tab__text-label">Settings</span> </span> <span class="mdc-tab-indicator"> <span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span> </span> <span class="mdc-tab__ripple"></span> </span></div> </div> </div> </div>