Material Design Lite – Cards

Material Design Lite – Cards : Material Design Lite(MDL) Cards are basically self-contained pieces of paper with data such as images, texts, links etc about a single subject. Cards are basically new feature in user interface which provides more complex & Detailed information. Material design lite provides predefined classes to create the beautiful & interactive Cards. Here in this tutorial we are going to explain how you can create cards in material design lite. We will explain the functionality with example and demo.

How to Create Material Design Lite – Cards ?

Let us create first card –

Material Design Lite – Wide Card

We have created a wide card in material design as below. We have added custom css to customize the width of the Card.

<div class="dummy-card-wide mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Tutorialsplane.com</h2>
  </div>
  <div class="mdl-card__supporting-text">
    Learn Material Design....
  </div>
  <div class="mdl-card__actions mdl-card--border">
    
      Learn More
    
  </div>
</div>                            

In the above example we have created simple card in material design. If you run the above example it will produce output something like this –

Material Design Lite – Square Card

You can create a square card by adding your custom css as below-

<div class="dummy-card-square mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Tutorialsplane.com</h2>
  </div>
  <div class="mdl-card__supporting-text">
    Learn Material Design....
  </div>
  <div class="mdl-card__actions mdl-card--border">
    
      Learn More
    
  </div>
</div>                            

In the above example we have created simple square card. If you run the above example it will produce output something like this –

Material Design Lite – Image Card

You can create a image card by following the steps as below-

<div class="dummy-card-image mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title mdl-card--expand"></div>
  <div class="mdl-card__actions">
    <span class="dummy-card-image__filename">Picture.jpg</span>
  </div>
</div>                            

If you run the above example it will produce output something like this –

Material Design Lite Card Classes

Here are the classes availble for material design lite cards –

• mdl-card – This is used to define div element as an MDL card container.
• mdl-card–border-This is used to Add border to the card section.
• mdl-shadow–2dp(optional)– This is used to define the shadow with variable depth 2dp.
• mdl-card__title – This defines div as a card title container.
• mdl-card__title-textThis is used to Assign the appropriate text characteristics to card title.
• mdl-card__subtitle-text-This is used to Assign the appropriate text characteristics to card subtitle.
• mdl-card__media– This is used to defines div as a card media container
• mdl-card__supporting-text– This defines div as a card body text container which supports the text.
• mdl-card__actions – This defines div as a card actions container.

Coming.. soon.