<!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
=
"container"
>
<
h3
>Basic card</
h3
>
<
div
class
=
"card green lighten-1"
>
<
div
class
=
"card-content black-text"
>
<
span
class
=
"card-title"
>
</
span
>
<
p
>This is a very simple card.
It is good at containing small
information. This is convenient
because It require little markup
to use effectively.</
p
>
</
div
>
<
div
class
=
"card-action"
>
<
a
href
=
"#"
class
=
"white-text"
>Link</
a
>
<
a
href
=
"#"
class
=
"white-text"
>Link</
a
>
</
div
>
</
div
>
<
div
class
=
"divider black"
></
div
>
<
h3
>Image card with link</
h3
>
<
div
class
=
"card"
>
<
div
class
=
"card-image"
>
<
img
src
=
"geeksforgeeks-6.png"
alt
=
""
/>
<
span
class
=
"card-title"
>
</
span
>
</
div
>
<
div
class
=
"card-content"
>
<
p
>This is a very simple card.
It is good at containing small
information.This is because It
require little markup to use
effectively.</
p
>
</
div
>
<
div
class
=
"card-action"
>
<
a
href
=
"#"
class
=
"green-text"
>Link</
a
>
</
div
>
</
div
>
<
div
class
=
"divider black"
></
div
>
<
div
class
=
"row"
>
<
h2
>FABs in Cards</
h2
>
<
div
class
=
"col s12 m6"
>
<
div
class
=
"card"
>
<
div
class
=
"card-image"
>
<
img
src
=
"download.png"
/>
<
span
class
=
"card-title"
>
Card Title
</
span
>
<
a
class
=
"btn-floating halfway-fab waves-effect waves-light red"
>
<
i
class
=
"material-icons"
>
add</
i
></
a
>
</
div
>
<
div
class
=
"card-content"
>
<
p
>This is a very simple
card. It is good at
containing small information.
This is because It require
little markup to use effectively.
</
p
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"col s12 m6"
>
<
div
class
=
"card"
>
<
div
class
=
"card-image"
>
<
img
src
=
"download.png"
/>
<
span
class
=
"card-title"
>
Card Title</
span
>
<
a
class
=
"btn-floating btn-large halfway-fab waves-effect waves-light red"
>
<
i
class
=
"material-icons"
>add</
i
>
</
a
>
</
div
>
<
div
class
=
"card-content"
>
<
p
>This is a very simple card.
It is good at containing small
information. This is because It
require little markup to use
effectively.</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"divider black"
></
div
>
<
div
class
=
"col s12 m7"
>
<
h2
class
=
"header"
>
Horizontal Card</
h2
>
<
div
class
=
"card horizontal"
>
<
div
class
=
"card-image"
>
<
img
src
=
""
/>
</
div
>
<
div
class
=
"card-stacked"
>
<
div
class
=
"card-content"
>
<
p
>This is a very simple card.
It is good at containing
small information.</
p
>
</
div
>
<
div
class
=
"card-action"
>
<
a
href
=
"#"
class
=
"green-text"
>Link</
a
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"divider black"
></
div
>
<
h2
>Card Reveal</
h2
>
<
div
class
=
"card"
>
<
div
class
=
"card-image waves-effect waves-block waves-light"
>
<
img
class
=
"activator"
src
=
"office.jpg"
/>
</
div
>
<
div
class
=
"card-content"
>
<
span
class
=
"card-title activator grey-text text-darken-4"
>
Card Title
<
i
class
=
"material-icons right"
>
more_vert</
i
></
span
>
<
p
><
a
href
=
"#"
class
=
"green-text"
>
Link</
a
></
p
>
</
div
>
<
div
class
=
"card-reveal"
>
<
span
class
=
"card-title grey-text text-darken-4"
>
Card Title
<
i
class
=
"material-icons right"
>
close
</
i
></
span
>
<
h5
>Here is some more information that
will be only revealed once clicked on.
</
h5
>
</
div
>
</
div
>
<
div
class
=
"divider black"
></
div
>
<
h2
>Tabs in Cards</
h2
>
<
div
class
=
"card"
>
<
div
class
=
"card-content"
>
<
p
>This is a very simple card.
It is good at containing small
information. This is because
It require little markup to use
effectively.</
p
>
</
div
>
<
div
class
=
"card-tabs"
>
<
ul
class
=
"tabs tabs-fixed-width"
>
<
li
class
=
"tab"
>
<
a
class
=
"active green-text"
href
=
"#test4"
>Test 1</
a
>
</
li
>
<
li
class
=
"tab"
>
<
a
href
=
"#test5"
class
=
"green-text"
>Test 2</
a
>
</
li
>
<
li
class
=
"tab"
>
<
a
href
=
"#test6"
class
=
"green-text"
>Test 3</
a
>
</
li
>
</
ul
>
</
div
>
<
div
class
=
"card-content grey lighten-4"
>
<
div
id
=
"test4"
><
h5
>Test 1</
h5
></
div
>
<
div
id
=
"test5"
><
h5
>Test 2</
h5
></
div
>
<
div
id
=
"test6"
><
h5
>Test 3</
h5
></
div
>
</
div
>
</
div
>
<
div
class
=
"divider black"
></
div
>
<
div
class
=
"divider black"
></
div
>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
</
div
>
<
script
src
=
</
script
>
</
body
>
</
html
>