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:
To create materialize CSS basic Card ,follow the given 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
<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>
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 card title, use .card-title
class.
<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>
<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>
Follow the following steps to 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
.<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>
<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>
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
.
<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>
<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>
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
.<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>
<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>
Providing front-end and back-end web development tutorials.