material-design-lite
Version:
Material Design Components in CSS, JS and HTML
257 lines (237 loc) • 10.2 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>list test</title>
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- Page styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
<link rel="stylesheet" href="../../material.min.css">
<link rel="stylesheet" href="../../components/demos.css">
<script src="../../material.min.js"></script>
<style>
</style>
</head>
<body>
<div style="padding-top: 24px;">
<!-- List Items with action -->
<div class="mdl-cell mdl-cell--6-col">
<h4> List Actions </h4>
<div class="mdl-list">
<div class="mdl-list__item mdl-list__item-two-line ">
<span class="mdl-list__item-primary-content">
<i class="material-icons ">person</i>
<span class=mdl-list__item-title>Bryan Cranston</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</div>
<div class="mdl-list__item mdl-list__item-two-line ">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-title>Aaron Paul</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</div>
<div class="mdl-list__item mdl-list__item-two-line ">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-title>Bob Odenkirk</span>
<span class="mdl-list__item-sub-title">43 Episodes</span>
</span>
<span class="mdl-list__item-secondary-content">
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</span>
</div>
</div>
</div>
<!-- Icon List -->
<div class="mdl-cell mdl-cell--6-col">
<h4> Icon List </h4>
<ul class="mdl-list">
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons">person</i>
Bryan Cranston
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons">person</i>
Aaron Paul
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons">person</i>
Bob Odenkirk
</span>
</li>
</ul>
</div>
<!-- List with action -->
<div class="mdl-cell mdl-cell--6-col">
<h4> List Item </h4>
<ul class="mdl-list">
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
Bryan Cranston
</span>
<span class="mdl-list__item-secondary-action">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
<input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked />
</label>
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
Aaron Paul
</span>
<span class="mdl-list__item-secondary-action">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-1">
<input type="radio" id="option-1" class="mdl-radio__button" name="options" value="1" checked />
</label>
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
Bob Odenkirk
</span>
<span class="mdl-list__item-secondary-action">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkbox" id="switch-1" class="mdl-switch__input" checked />
</label>
</span>
</li>
</ul>
</div>
<!-- List with action -->
<div class="mdl-cell mdl-cell--6-col">
<h4> List Item </h4>
<ul class="mdl-list">
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
Bryan Cranston
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
Aaron Paul
</span>
</li>
<li class="mdl-list__item">
<span class="mdl-list__item-primary-content">
Bob Odenkirk
</span>
</li>
</ul>
</div>
<!-- Three Line List with secondary info and action -->
<div class="mdl-cell mdl-cell--6-col">
<h4> Three Line List secondary info </h4>
<ul class="mdl-list">
<li class="mdl-list__item mdl-list__item-three-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-title>Bryan Cranston</span>
<span class="mdl-list__item-text-body">
Bryan Cranston played the role of Bryan Cranston in Breaking Bad,he is also know
for playing Hal in Malcom in the Middle. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur venenatis urna eget cursus varius. Donec ultrices quis arcu quis euismod.
Mauris sollicitudin neque lectus, id bibendum libero eleifend sed.
</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</span>
</li>
<li class="mdl-list__item mdl-list__item-three-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-title>Aaron Paul</span>
<span class="mdl-list__item-text-body">
Aaron Paul played the role of Aaron Paul in Breaking Bad. He also featurd in
the NEED FOR Speed Movie. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur venenatis urna eget cursus varius. Donec ultrices quis arcu quis euismod.
Mauris sollicitudin neque lectus, id bibendum libero eleifend sed.
</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</span>
</li>
<li class="mdl-list__item mdl-list__item-three-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-title>Bob Odenkirk</span>
<span class="mdl-list__item-text-body">
Bob Odinkrik played the role of Bob Odenkirk in Breaking Bad, due to the fondness of the
character, Bob stars in his own show now, call "Better Call Saul", Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur venenatis urna eget cursus varius. Donec ultrices quis arcu quis euismod.
Mauris sollicitudin neque lectus, id bibendum libero eleifend sed.
</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</span>
</li>
</ul>
</div>
<!-- Two Line List with secondary info and action -->
<div class="mdl-cell mdl-cell--6-col">
<h4> Two Line List with Secondary Info and Action </h4>
<ul class="mdl-list">
<li class="mdl-list__item mdl-list__item-two-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-text>Bryan Cranston</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</span>
</li>
<li class="mdl-list__item mdl-list__item-two-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-text>Aaron Paul</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</span>
</li>
<li class="mdl-list__item mdl-list__item-two-line">
<span class="mdl-list__item-primary-content">
<i class="material-icons mdl-list__item-icon">person</i>
<span class=mdl-list__item-text>Bob Odenkirk</span>
<span class="mdl-list__item-sub-title">62 Episodes</span>
</span>
<span class="mdl-list__item-secondary-content">
<span class="mdl-list__item-secondary-info">Actor</span>
<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons ">star</i></a>
</span>
</li>
</ul>
</div>
</div>
<!-- Built with love using Material Design Lite -->
<script>
</script>
</body>
</html>