Materialize CSS Cards, Working with Cards in Materialize CSS

Materialize CSS Tutorial

Materialize Cards

Material Design provides Cards are a convenient means of displaying content composed of different types of objects. They’re also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length.

Basic Card

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>

Output :

Image Card

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>

Output :

FABs in Card

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>

Output :

Horizontal Card

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>

Output :

Card Reveal

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>

Output :

Card Action

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>

Output :

Card Sticky Action

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>

Output :

Tabs in Cards

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>

Output :

Colored Cards

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>

Output :

Small Cards

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>

Output :

Medium Cards

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>

Output :

Large Cards

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>

Output :

Card Panel

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>

Output :

Materialize CSS Tutorial