MATERIALIZE COMPONENTS
MATERIALIZE CARD
Materialize CSS Cards

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 cards.These are:

  1. A basic card
  2. Creating a horizontal card
  3. Adding a halfway floating action button
  4. Card reveal
  5. Tabs in cards
  6. Different card sizes
  7. Card Panel
  8. Basic

Basic Card

To create materialize CSS basic Card ,follow the given 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

Download 
<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 yourself

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-image class to the container.

To create 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>
Try It Now

Source Code

Download 
<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 yourself

Source Code : Output

Card Image Card Title

Write your card content here

Card link

FABs in Card

Follow the following steps to create FABs in Card.

  1. 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.
  2. 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 .
  3. 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.
  4. Step 4: Place card text inside the .card-content.
  5. 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>
Try It Now

Source Code

Download 
<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 yourself

Source Code : Output

card image Shape Your Path add

Learn Materialize CSS card

Horizontal Card

To create a horizontal card, follow the following steps:

  1. 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.
  2. 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
  3. Step 3: Place card image inside the child element having class .card-image.
  4. 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>
Try It Now

Source Code

Download 
<div class="col s12 m7">
    <h2 class="header">Horizontal Card</h2>
    <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 yourself

Source Code : Output

Horizontal Card

Card Image

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:

  1. 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.
  2. 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.
  3. Step 3: Place card image inside the child element having class .card-image.
  4. Step 4: Place card content and card action inside the child element having class .card-content.
  5. 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>
Try It Now

Source Code

Download 
<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 yourself

Source Code : Output

image
Shape Your Pathmore_vert

Click Here!

Shape Your Path close

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
Tutorials HTML CSS BOOTSTRAP 5 BOOTSTRAP 4
Performance Evalution HTML Quiz/Test CSS Quiz/Test Bootstrap 4 Quiz/Test Bootstrap 5 Quiz/Test
CSS Frameworks Materialize CSS Pure CSS UiKit CSS Bulma CSS