The Card is identifies div element as a Materialize card container. Required on "outer" div.
<div class="row">
<div class="col s12 m6 l4">
<div class="card brown darken-1">
<div class="card-content white-text">
<span class="card-title">Card Title</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
<div class="card-action">
<a href="http://www.freetimelearning.com" target="_blank">Free Time Learn</a>
</div>
</div>
</div>
</div>
Identifies div as a card image thumbnail container and is required on "inner" div.
<div class="row">
<div class="col s12 m6 l4">
<div class="card">
<div class="card-image">
<img src="../images/card.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
<div class="card-action">
<a href="http://www.freetimelearning.com" target="_blank" class="btn blue">Free Time Learn</a>
</div>
</div>
</div>
</div>
Here is an image card with a Floating Action Button. Just add btn-floating
, halfway-fab
these two classes.
<div class="row">
<div class="col s12 m6 l4">
<div class="card">
<div class="card-image">
<img src="../images/card.jpg">
<span class="card-title">Free Time Learning</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>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
</div>
</div>
</div>
Just add this horizontal
class automatically image is displayed in horizontal.
<div class="row">
<div class="col s12 m6 l6">
<div class="card horizontal">
<div class="card-image">
<img src="../images/card-3.jpg">
</div>
<div class="card-stacked">
<div class="card-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
<div class="card-action">
<a href="http://www.freetimelearning.com" target="_blank" class="btn blue">Free Time Learn</a>
</div>
</div>
</div>
</div>
</div>
First you add the card-reveal
class in div with a span.card-title
inside to make this work. Add the class activator
to an element inside the card to allow it to open the card reveal.
<div class="row">
<div class="col s12 m6 l4">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img src="../images/card.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Free Time Learning<i class="material-icons right">more_vert</i></span>
<p><a href="http://www.freetimelearning.com" target="_blank">Click Here!</a></p>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Free Time Learning<i class="material-icons right">close</i></span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
</div>
</div>
</div>
The default state is having the card-reveal go over the card-action.
<div class="row">
<div class="col s12 m6 l4">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img src="../images/card.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Free Time Learning<i class="material-icons right">more_vert</i></span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
<div class="card-action">
<a href="http://www.freetimelearning.com" target="_blank" class="btn blue">Free Time Learn</a>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Free Time Learning<i class="material-icons right">close</i></span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
</div>
</div>
</div>
You can make your card-action always visible by adding the sticky-action
class to the overall card.
<div class="row">
<div class="col s12 m6 l4">
<div class="card sticky-action">
<div class="card-image waves-effect waves-block waves-light">
<img src="../images/card.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Free Time Learning<i class="material-icons right">more_vert</i></span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
<div class="card-action">
<a href="http://www.freetimelearning.com" target="_blank" class="btn blue">Free Time Learn</a>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Free Time Learning<i class="material-icons right">close</i></span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
</div>
</div>
</div>
You can add tabs to your cards by adding a dividing cards-tabs
div in between your header content and your tab content.
<div class="row">
<div class="col s12 m6 l4">
<div class="card">
<div class="card-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
<div class="card-tabs">
<ul class="tabs tabs-fixed-width">
<li class="tab"><a href="#html5">HTML5</a></li>
<li class="tab"><a class="active" href="#materialize">Material Design</a></li>
<li class="tab"><a href="#bootstrap">Bootstrap 4</a></li>
</ul>
</div>
<div class="card-content grey lighten-4">
<div id="html5">
<h5>HTML5 Tutorial</h5>
</div>
<div id="materialize">
<h5>Material Design tutorial</h5>
</div>
<div id="bootstrap">
<h5>Bootstrap 4 Tutorial</h5>
</div>
</div>
</div>
</div>
</div>
Colored or dark background card with tabs. Just add class="card yellow"
class in cards.
<div class="row">
<div class="col s12 m6 l4">
<div class="card yellow lighten-1">
<div class="card-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
<div class="card-tabs">
<ul class="tabs tabs-fixed-width yellow lighten-1">
<li class="tab"><a href="#html5" class="black-text">HTML5</a></li>
<li class="tab"><a class="active black-text" href="#materialize">Material Design</a></li>
<li class="tab"><a href="#bootstrap" class="black-text">Bootstrap 4</a></li>
</ul>
</div>
<div class="card-content yellow accent-1">
<div id="html5">
<h5>HTML5 Tutorial</h5>
</div>
<div id="materialize">
<h5>Material Design tutorial</h5>
</div>
<div id="bootstrap">
<h5>Bootstrap 4 Tutorial</h5>
</div>
</div>
</div>
</div>
</div>
The Small Card limits the height of the card to 300px.
<div class="row">
<div class="col s12 m6 l4">
<div class="card small">
<div class="card-image">
<img src="../images/card.jpg">
<span class="card-title">Free Time Learning</span>
</div>
<div class="card-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
<div class="card-action">
<a href="http://www.freetimelearning.com" target="_blank" class="btn blue">Free Time Learn</a>
</div>
</div>
</div>
</div>
The Medium Card limits the height of the card to 400px.
<div class="row">
<div class="col s12 m6 l4">
<div class="card medium">
<div class="card-image">
<img src="../images/card.jpg">
<span class="card-title">Free Time Learning</span>
</div>
<div class="card-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
<div class="card-action">
<a href="http://www.freetimelearning.com" target="_blank" class="btn blue">Free Time Learn</a>
</div>
</div>
</div>
</div>
The Large Card limits the height of the card to 500px.
<div class="row">
<div class="col s12 m6 l4">
<div class="card large">
<div class="card-image">
<img src="../images/card.jpg">
<span class="card-title">Free Time Learning</span>
</div>
<div class="card-content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
<div class="card-action">
<a href="http://www.freetimelearning.com" target="_blank" class="btn blue">Free Time Learn</a>
</div>
</div>
</div>
</div>
It is used to identify div as a simple card with shadow effect and padding.
<div class="row">
<div class="col s12 m6 l4">
<div class="card-panel blue">
<span class="white-text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text...
</span>
</div>
</div>
</div>