Materialize CSS Cards

Materialize CSS cards are a convenient means of displaying content composed of different types of objects. It is used to create a semantic and beautiful approach to show the content in an understandable way.

There are following types of Materialize cards.These are:

A basic card
Creating a horizontal card
Adding a halfway floating action button
Card reveal
Tabs in cards
Different card sizes
Card Panel
Basic

Basic Card

To create a basic Card, follow the given below steps:

Add .card class and an additional color class to the card container base class.
Card container consists of card content and card-action. Card content uses .card-content class & used for displaying the card content while card-action uses .card-action class and used for card link.
Place card title and card text inside the .card-content. keep in mind that card title uses .card-title class.
Place all the card link inside the .card-action container

Source Code

     
      <div class="row">
    <div class="col s12 m6">
      <div class="card blue-grey darken-1" style="width:300px;">
        <div class="card-content white-text">
          <span class="card-title">Card Title</span>
          <p>Write card body content.</p>
        </div>
        <div class="card-action">
          <a href="#">Card action link</a>
          <a href="#">Card action link</a>
        </div>
      </div>
    </div>
  </div>

Try It Now

Source Code : Output

Card Title

Write card body content.

Card action link Card action link

Image Card

Place the image and card title in the external container and assign the .card-imageclass to the container.

To create a card title, use .card-title class.

General Syntax

    <div class="card">
	<div class="card-image"> 
		<img src="..." alt="Card Image"> <span class="card-title">Card Title</span> 
	</div>
	<div class="card-content">
		<p>Write your card content here</p>
	</div>
	<div class="card-action"> 
		<a href="#" target="_blank" class="btn blue">Card link</a> 
	</div>
</div>

Source Code

     
      <div class="row">
    <div class="col s12 m6 l4">
      <div class="card" style="width:300px;">
        <div class="card-image">
          <img src="../code-support/images/bootstrap/lily.jpg" alt="Card Image">
          <span class="card-title">Card Title</span>
        </div>
        <div class="card-content">
          <p>Write your card content here</p>
        </div>
        <div class="card-action">
          <a href="#" target="_blank" class="btn blue">Card link</a>
        </div>
      </div>
    </div>
</div>

Try It Now

Source Code : Output

Card Title

Write your card content here

Card link

FABs in Card

Follow the following steps to a create FABs in Card.

Step 1: Assign .card class to the card container base class. You can also add additional color classes inside the card container base class to provide a different background color for the card.
Step 2:Create three child elements of card container having class .card and assign the .card-image class to the first child element and assign .card-content class to the second child element base class and assign the .card-action class to the third child element base class. Please keep in mind that the .card-content class is used for displaying content while .card-action is used to display the card links and .card-image is used to place <img> and card title .
Step 3: Place <img>, card title and fab button inside the container having class the .card-img. Please keep in mind that card title can be created by just assigning the .card-title to the <span> element base class.
Step 4: Place card text inside the .card-content.
Step5:Place all the card links inside the .card-action.

General Syntax

    <div class="card">
    <div class="card-image">
	   <img src="..." alt="card image"> 
       <a class="btn-floating halfway-fab waves-effect waves-light red"> <i class="material-icons">add</i>
       </a> 
    </div>
	<div class="card-content"></div>
</div>

Source Code

     
      <div class="container">
<div class="row">
  <div class="col s12 m6 ">
    <div class="card" >
      <div class="card-image">
        <img src="https://picsum.photos/id/1/200/100" alt="card image">
        <span class="card-title">Shape Your Path</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>Learn Materialize CSS card </p>
      </div>
    </div>
  </div>
</div>
</div>

Try It Now

Source Code : Output

Shape Your Path

Learn Materialize CSS card

Horizontal Card

To create a horizontal card, follow the following steps:

Step 1: Assign, .card & .horizontal class to the card container base class. You can also add an additional color class inside the card container base class to provide different background color of the card.
Step 2: Create two child elements of card container having class .card and assign .card-image class to the first child element and assign .card-stacked class to the second child element base class
Step 3: Place card image inside the child element having class .card-image.
Step 4: Place card content and card action inside the child element having class .card-stacked.

General Syntax

    <div class="card horizontal">
  <div class="card-image">
    <img src=".."  alt="Card image">
  </div>
  <div class="card-stacked">
    <div class="card-content">
      <p>Write card content here</p>
    </div>
    <div class="card-action">
      <a href="#" target="_blank" class="btn blue">card link</a>
    </div>
  </div>
</div>

Source Code

     
      <div class="col s12 m7">
   <span class="general_syntax--heading my-3">Horizontal Card</span>
    <div class="card horizontal">
      <div class="card-image">
        <img src="https://lorempixel.com/100/190/nature/6" alt="Card Image">
      </div>
      <div class="card-stacked">
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information.</p>
        </div>
        <div class="card-action">
          <a href="#">This is a link</a>
        </div>
      </div>
    </div>
  </div>

Try It Now

Source Code : Output

Horizontal Card

I am a very simple card. I am good at containing small bits of information.

This is a link

Card Reveal

Follow the followings step to create card reveals:

Step 1: Assign .card class to the card container base class. You can also add an additional color class inside the card container base class to provide a different background color for the card.
Step 2: Create three child elements of card container having class .card and assign .card-image class to the first child element and assign .card-content class to the second child element base class and assign .card-reveal class to the the child element base class.
Step 3: Place card image inside the child element having class .card-image.
Step 4: Place card content and card action inside the child element having class .card-content.
Step 5: Place all the card reveal content inside the child element of card container having class .card-reveal.

General Syntax

    <div class="card">
  <div class="card-image waves-effect waves-block waves-light"></div>
  <div class="card-content"></div>
  <div class="card-reveal"></div>
</div>

Source Code

     
      <div class="row">
	<div class="col s12 m6  offset-m5">
        <div class="card" style="width:300px;">
            <div class="card-image waves-effect waves-block waves-light">
              <img src="https://picsum.photos/id/1/200/300" alt="image" style="height:150px;">
            </div>
            <div class="card-content">
              <span class="card-title activator grey-text text-darken-4">Shape Your Path<i class="material-icons right">more_vert</i></span>
              <p><a href="http://www.shapeyourpath.com" target="_blank">Click Here!</a></p>
            </div>
            <div class="card-reveal">
              <span class="card-title grey-text text-darken-4">
                   Shape Your Path
               <i class="material-icons right">close</i></span>
                 <p>Providing front-end and back-end web development tutorials.</p>
              
            </div>
        </div>
    </div>
</div>

Try It Now

Source Code : Output

Shape Your Path

Click Here!

Shape Your Path

Providing front-end and back-end web development tutorials.

Web Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS