Skip to content
Related Articles

Related Articles

Materialize CSS Cards

View Discussion
Improve Article
Save Article
  • Last Updated : 16 May, 2022

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.

html




<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h3>Basic card</h3>
        <div class="card green lighten-1">
            <div class="card-content black-text">
                <span class="card-title"></span>
                  
<p>This is a very simple card.
                  It is good at containing small 
                  information. This is convenient 
                  because It require little markup
                  to use effectively.</p>
  
            </div>
            <div class="card-action">
                <a href="#" 
                   class="white-text">Link</a>
                <a href="#" 
                   class="white-text">Link</a>
            </div>
        </div>
    </body>
</html>


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

  • Image Card: It is used for a standard card with the help of image thumbnail. For this card-image class is added inside the card class.
  • FABs in Cards: Within the image card, floating action buttons can be added with different sizes.
  • Horizontal Cards: In this, space is divided into two blocks where one side is used for image and the other for information.
  • Cards Reveal: 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.
  • Tabs in Cards: 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.
  • Card Panel: 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:

html




<!DOCTYPE html>
<html>
    <head>
        <!--Import Google Icon Font-->
        <link href=
              rel="stylesheet" />
  
        <!-- Compiled and minified CSS -->
        <link rel="stylesheet"
              href=
  
        <script type="text/javascript" 
                src=
      </script>
  
        <!--Let browser know website is 
            optimized for mobile-->
        <meta name="viewport" 
              content="width=device-width,
                       initial-scale=1.0" />
    </head>
  
    <body>
        <div class="container">
            <h3>Basic card</h3>
            <div class="card green lighten-1">
                <div class="card-content black-text">
                    <span class="card-title">
                  </span>
                      
<p>This is a very simple card. 
                      It is good at containing small
                      information. This is convenient
                      because It require little markup
                      to use effectively.</p>
  
                </div>
                <div class="card-action">
                    <a href="#"
                       class="white-text">Link</a>
                    <a href="#" 
                       class="white-text">Link</a>
                </div>
            </div>
  
            <div class="divider black"></div>
            <h3>Image card with link</h3>
            <div class="card">
                <div class="card-image">
                    <img src="geeksforgeeks-6.png" 
                         alt="" />
                    <span class="card-title">
                  </span>
                </div>
                <div class="card-content">
                      
<p>This is a very simple card. 
                      It is good at containing small 
                      information.This is because It
                      require little markup to use 
                      effectively.</p>
  
                </div>
                <div class="card-action">
                    <a href="#" 
                       class="green-text">Link</a>
                </div>
            </div>
  
            <div class="divider black"></div>
  
            <div class="row">
                <h2>FABs in Cards</h2>
                <div class="col s12 m6">
                    <div class="card">
                        <div class="card-image">
                            <img src="download.png" />
                            <span class="card-title">
                              Card Title
                          </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>This is a very simple
                              card. It is good at 
                              containing small information.
                              This is because It require 
                              little markup to use effectively.
                          </p>
  
                        </div>
                    </div>
                </div>
                <div class="col s12 m6">
                    <div class="card">
                        <div class="card-image">
                            <img src="download.png" />
                            <span class="card-title">
                              Card Title</span>
                            <a class=
"btn-floating btn-large halfway-fab waves-effect waves-light red">
                              <i class="material-icons">add</i>
                          </a>
                        </div>
                        <div class="card-content">
                              
<p>This is a very simple card.
                              It is good at containing small 
                              information. This is because It 
                              require little markup to use 
                              effectively.</p>
  
                        </div>
                    </div>
                </div>
            </div>
  
            <div class="divider black"></div>
  
            <div class="col s12 m7">
                <h2 class="header">
                  Horizontal Card</h2>
                <div class="card horizontal">
                    <div class="card-image">
                        <img src="" />
                    </div>
                    <div class="card-stacked">
                        <div class="card-content">
                              
<p>This is a very simple card.
                              It is good at containing 
                              small information.</p>
  
                        </div>
                        <div class="card-action">
                            <a href="#" 
                               class="green-text">Link</a>
                        </div>
                    </div>
                </div>
            </div>
  
            <div class="divider black"></div>
  
            <h2>Card Reveal</h2>
            <div class="card">
                <div class=
"card-image waves-effect waves-block waves-light">
                    <img class="activator" 
                         src="office.jpg" />
                </div>
                <div class="card-content">
                    <span class=
"card-title activator grey-text text-darken-4">
                      Card Title
                      <i class="material-icons right">
                        more_vert</i></span>
                      
<p><a href="#" 
                          class="green-text">
                      Link</a></p>
  
                </div>
                <div class="card-reveal">
                    <span class=
                 "card-title grey-text text-darken-4">
                      Card Title
                      <i class="material-icons right">
                        close
                      </i></span>
                    <h5>Here is some more information that
                      will be only revealed once clicked on.
                  </h5>
                </div>
            </div>
  
            <div class="divider black"></div>
  
            <h2>Tabs in Cards</h2>
            <div class="card">
                <div class="card-content">
                      
<p>This is a very simple card. 
                      It is good at containing small 
                      information. This is because
                      It require little markup to use
                      effectively.</p>
  
                </div>
                <div class="card-tabs">
                    <ul class="tabs tabs-fixed-width">
                        <li class="tab">
                          <a class="active green-text"
                             href="#test4">Test 1</a>
                      </li>
                        <li class="tab">
                          <a href="#test5"
                             class="green-text">Test 2</a>
                      </li>
                        <li class="tab">
                          <a href="#test6" 
                             class="green-text">Test 3</a>
                      </li>
                    </ul>
                </div>
                <div class="card-content grey lighten-4">
                    <div id="test4"><h5>Test 1</h5></div>
                    <div id="test5"><h5>Test 2</h5></div>
                    <div id="test6"><h5>Test 3</h5></div>
                </div>
            </div>
  
            <div class="divider black"></div>
            <div class="divider black"></div>
            <br />
            <br />
            <br />
            <br />
        </div>
        <!-- Compiled and minified JavaScript -->
        <script src=
      </script>
    </body>
</html>


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: 

  • We can also define custom heights to the cards using CSS.
  • If we don’t mention any card size or class , then the card gets the height and width default to auto , i.e , the height and width increases with the increase in the content.

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

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  
    <!-- Compiled and minified CSS -->
  
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js">
    </script>
  
    <!--Let browser know website is 
            optimized for mobile-->
    <meta name="viewport" content="width=device-width,
                       initial-scale=1.0" />
</head>
  
<body>
    <div class="container">
        <h3>Card with Class Small </h3>
        <div class="card purple darken-3 small">
            <div class="card-content">
                <span class="card-title">
                </span>
                <p class="white-text">This is a very simple card.
                    It is good at containing small
                    information. This is convenient
                    because It require little markup
                    to use effectively.</p>
  
            </div>
            <div class="card-action">
                <a href="#" class="white-text">Link</a>
                <a href="#" class="white-text">Link</a>
            </div>
  
        </div>
    </div>
    <div class="container">
        <h3>Card with Class Medium</h3>
        <div class="card purple darken-3 medium">
            <div class="card-content">
                <span class="card-title">
                </span>
                <p class="white-text">This is a very simple card.
                    It is good at containing small
                    information. This is convenient
                    because It require little markup
                    to use effectively.</p>
  
            </div>
            <div class="card-action">
                <a href="#" class="white-text">Link</a>
                <a href="#" class="white-text">Link</a>
            </div>
  
        </div>
    </div>
    <div class="container">
        <h3>Card with Class Large</h3>
        <div class="card purple darken-3 large">
            <div class="card-content">
                <span class="card-title">
                </span>
                <p class="white-text">This is a very simple card.
                    It is good at containing small
                    information. This is convenient
                    because It require little markup
                    to use effectively.</p>
  
            </div>
            <div class="card-action">
                <a href="#" class="white-text">Link</a>
                <a href="#" class="white-text">Link</a>
            </div>
  
        </div>
    </div>
  
  
    <!-- Compiled and minified JavaScript -->
    </script>
</body>
  
</html>


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 :

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  
    <!-- Compiled and minified CSS -->
  
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js">
    </script>
  
    <!--Let browser know website is 
            optimized for mobile-->
    <meta name="viewport" content="width=device-width,
                       initial-scale=1.0" />
</head>
  
<body>
    <div class="container">
        <h3>Basic card</h3>
        <div class="card purple darken-3">
            <div class="card-content">
                <span class="card-title">
                </span>
                <p class="white-text">This is a very simple card.
                    It is good at containing small
                    information. This is convenient
                    because It require little markup
                    to use effectively.</p>
  
            </div>
            <div class="card-action">
                <a href="#" class="white-text">Link</a>
                <a href="#" class="white-text">Link</a>
            </div>
        </div>
  
  
        <!-- Compiled and minified JavaScript -->
        </script>
</body>
  
</html>


Output:

Supported Browsers:

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!