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:
To create a basic Card, follow the given below steps:
.card
class and an additional color class to the card container base class.
.card-content
class & used for displaying the card content while card-action uses .card-action
class and used for card link.
.card-content
. keep in mind that card title uses .card-title
class.
.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>
Source Code : Output
Write card body content.
Place the image and card title in the external container and assign the .card-image
class 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>
Source Code : Output
Follow the following steps to a create FABs in Card.
.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.
.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 .
<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.
.card-content.
.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>
Source Code : Output
Learn Materialize CSS card
To create a horizontal card, follow the following steps:
.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.
.card
and assign
.card-image
class to the first child element and assign .card-stacked
class to the second child element base class
.card-image
.
.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>
Source Code : Output
I am a very simple card. I am good at containing small bits of information.
Follow the followings step to create card reveals:
.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.
.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.
.card-image
.
.card-content
.
.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>
Source Code : Output
Providing front-end and back-end web development tutorials.