<!DOCTYPE html>
<
html
>
<
head
>
<
link
href=
rel="stylesheet" />
<
link
rel="stylesheet"
href=
<
script
type="text/javascript"
src=
</
script
>
<
meta
name="viewport"
content="
width
=
device
-width,
initial-scale
=
1
.0" />
</
head
>
<
body
>
<
div
class="card-panel">
<
h3
>Basic Collection</
h3
>
<
ul
class="collection">
<
li
class="collection-item">Title</
li
>
<
li
class="collection-item">Title</
li
>
<
li
class="collection-item">Title</
li
>
<
li
class="collection-item">Title</
li
>
</
ul
>
</
div
>
<
div
class="card-panel">
<
h3
>Collection with Links</
h3
>
<
div
class="collection">
<
a
href="#!" class="collection-item">Title</
a
>
<
a
href="#!"
class="collection-item active green">
Title</
a
>
<
a
href="#!" class="collection-item">Title</
a
>
<
a
href="#!"
class="collection-item active green">
Title</
a
>
</
div
>
</
div
>
<
div
class="card-panel">
<
h3
>Collection with Header</
h3
>
<
ul
class="collection with-header">
<
li
class="collection-header">
<
h4
>First Names</
h4
>
</
li
>
<
li
class="collection-item">Title</
li
>
<
li
class="collection-item">Title</
li
>
<
li
class="collection-item">Title</
li
>
<
li
class="collection-item">Title</
li
>
</
ul
>
</
div
>
<
div
class="card-panel">
<
h3
>Collection with Secondary Content</
h3
>
<
ul
class="collection with-header">
<
li
class="collection-header">
<
h4
>First Names</
h4
></
li
>
<
li
class="collection-item">
<
div
>
Title<
a
href="#!"
class="secondary-content green-text">
<
i
class="material-icons">send</
i
></
a
>
</
div
>
</
li
>
<
li
class="collection-item">
<
div
>
Title<
a
href="#!"
class="secondary-content green-text">
<
i
class="material-icons">send</
i
></
a
>
</
div
>
</
li
>
<
li
class="collection-item">
<
div
>
Title<
a
href="#!"
class="secondary-content green-text">
<
i
class="material-icons">send</
i
></
a
>
</
div
>
</
li
>
<
li
class="collection-item">
<
div
>
Title<
a
href="#!"
class="secondary-content green-text">
<
i
class="material-icons">send</
i
></
a
>
</
div
>
</
li
>
</
ul
>
</
div
>
<
div
class="card-panel">
<
h3
>Collection with Avatar Content</
h3
>
<
ul
class="collection">
<
li
class="collection-item avatar">
<
img
src="gfg_200X200.png"
alt="" class="circle" />
<
span
class="title">Title</
span
>
<
p
>
First Line <
br
/>
Second Line
</
p
>
<
a
href="#!"
class="secondary-content green-text">
<
i
class="material-icons">grade</
i
></
a
>
</
li
>
<
li
class="collection-item avatar">
<
i
class="material-icons circle">autorenew</
i
>
<
span
class="title">Title</
span
>
<
p
>
First Line <
br
/>
Second Line
</
p
>
<
a
href="#!"
class="secondary-content green-text">
<
i
class="material-icons">grade</
i
></
a
>
</
li
>
<
li
class="collection-item avatar">
<
i
class="material-icons circle green">
build
</
i
>
<
span
class="title">Title</
span
>
<
p
>
First Line <
br
/>
Second Line
</
p
>
<
a
href="#!"
class="secondary-content green-text">
<
i
class="material-icons">grade</
i
></
a
>
</
li
>
<
li
class="collection-item avatar">
<
i
class="material-icons circle red">
cloud
</
i
>
<
span
class="title">Title</
span
>
<
p
>
First Line <
br
/>
Second Line
</
p
>
<
a
href="#!"
class="secondary-content green-text">
<
i
class="material-icons">grade</
i
></
a
>
</
li
>
</
ul
>
</
div
>
<
div
class="card-panel">
<
h3
>Collection with dismissible content</
h3
>
<
ul
class="collection">
<
li
class="collection-item dismissible">Title</
li
>
<
li
class="collection-item dismissible">Title</
li
>
<
li
class="collection-item dismissible">Title</
li
>
<
li
class="collection-item dismissible">Title</
li
>
</
ul
>
</
div
>
<
script
src=
</
script
>
</
body
>
</
html
>