Materialize CSS Cards

Cards are a convenient means of displaying different types of relevant content. Materialize uses cards for presenting similar objects whose sizes and actions can be changed with the requirement. Here is an example of a basic card.

Materialize provides different types of card according to its requirement, following are the names :

• : It is used for a standard card with the help of image thumbnail. For this card-image class is added inside the card class.
• : Within the image card, floating action buttons can be added with different sizes.
• : In this, space is divided into two blocks where one side is used for image and the other for information.
• : This is used for adding extra information which can be accessed by a click. For this to work, card-reveal div is added with span card-title class and to open card reveal, activator class  is added to an element inside the card.
• : This is used to add different tabs in the card. To add this, cards-tabs class is added in between the header and tab content.
• : This is used for a simple card that requires minimum markup with padding and shadow effect.

Here is an example shown that uses all the above cards:

Example:

Output:

Card Sizes

We can also make uniformly sized cards using the materialize CSS classes.

i. small - The "small class" is used to make cards of height up to 300px.

Syntax:

 <div class="card small">
 <!-- Card Content -->
 </div>

ii. medium - The "medium class" is used to make cards of height up to 400px.

Syntax:

 <div class="card medium">
 <!-- Card Content -->
 </div>

iii. large - "The large class" is used to make cards of height up to 500px.

Syntax:

 <div class="card large">
 <!-- Card Content -->
 </div>

NOTE: 

Here is a code example showing different cards of different sizes:

Output:

Colored Card

We can also make cards of different colors and also add different text colors to the card using different colors from the Materialize CSS color palette. 

Syntax:

<div class="card purple darken-3">
<!-- Card Content -->
</div>

Full Code example :

Output:

Supported Browsers:

• Google Chrome
• Brave Browsers
• Mozilla Firefox
• Opera
• Safari
• Microsoft Edge