Preview

Installation

To import just the component styles, copy the following into your project’s styles.css file:

/* Core Styles */
@import url('https://kherrick.github.io/material-design-lite/css/core.css');
/* Material Icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
/* Component Styles */
@import url('https://kherrick.github.io/material-design-lite/css/components/list/style.css');
@import url('https://kherrick.github.io/material-design-lite/css/components/list-tile/style.css');

Usage

Start with a div element and add the list class name:

<div class="list"></div>

Variants

Default

Default list tile styling.

<div class="list">
  <li class="list-tile">List Item 1</li>
  <li class="list-tile">List Item 2</li>
</div>

Activatable

To make a list tile activatable, add the activatable class name:

<div class="list activatable">
  <li class="list-tile">List Item 1</li>
  <li class="list-tile">List Item 2</li>
</div>

Design Tokens

Resources

• MDN