MDC-Web Starter Template

index.html

<ul class="mdc-list mdc-list--two-line" aria-orientation="vertical">
  <li class="mdc-list-item">
    <span class="mdc-list-item__graphic material-icons" aria-hidden="true">face</span>
    <span class="mdc-list-item__text">
      <span class="mdc-list-item__primary-text">Item 1</span>
      <span class="mdc-list-item__secondary-text">Subtitle for item 1</span>
    </span>
    <span class="mdc-list-item__meta">10</span>
  </li>
  
  <li class="mdc-list-item">
    <span class="mdc-list-item__graphic material-icons" aria-hidden="true">star</span>
    <span class="mdc-list-item__text">
      <span class="mdc-list-item__primary-text">Item 2</span>
      <span class="mdc-list-item__secondary-text">Subtitle for item 2</span>
    </span>
    <span class="mdc-list-item__meta">10</span>
  </li>
  
  <hr class="mdc-list-divider">
  
  <li class="mdc-list-item">
    <span class="mdc-list-item__graphic material-icons" aria-hidden="true">inbox</span>
    Single line item 1
    <span class="mdc-list-item__meta">20</span>    
  </li>
  
  <li class="mdc-list-item">
    <span class="mdc-list-item__graphic material-icons" aria-hidden="true">inbox</span>
    Single line item 2
    <span class="mdc-list-item__meta">20</span>    
  </li>
</ul>

mdc-web-starter-template.markdown

MDC-Web Starter Template

Use this template to help create reproductions of issues for Material Components for the web (MDC-Web). For more information on how to write a great bug report for MDC-Web, check out https://github.com/material-components/material-components-web/blob/master/.github/ISSUE_TEMPLATE.md#bugs

A Pen by Matthew Daniel Brown on CodePen.

License.

scripts

<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"></script>

style.scss

.mdc-list {
  width: 50%;
  margin-left:auto;
  margin-right: auto;
}

styles

<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />