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.
Material Design Lite – Cards Example:
<style>
.dummy-card-wide.mdl-card {
width: 500px;
}
.dummy-card-wide > .mdl-card__title {
color: #fff;
height: 180px;
background: url('http://tutorialsplane.com/wp-content/uploads/2016/04/bagan-701006_640.jpg') center / cover;
}
.dummy-card-wide > .mdl-card__menu {
color: #fff;
}
</style>
<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">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn More
</a>
</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-
Material Design Lite – Cards Example:
<style>
.dummy-card-square.mdl-card {
width: 300px;
height:300px;
}
.dummy-card-square > .mdl-card__title {
color: #fff;
height:150px;
background: url('http://tutorialsplane.com/wp-content/uploads/2016/04/puppy-1221791_640.jpg') center / cover;
}
.dummy-card-square > .mdl-card__menu {
color: #fff;
}
</style>
<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">
<a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
Learn More
</a>
</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-
Material Design Lite – Cards Example:
<style>
.dummy-card-image.mdl-card {
width: 300px;
height:300px;
background: url('http://tutorialsplane.com/wp-content/uploads/2016/04/woman-1149910_640.jpg') center / cover;
}
.dummy-card-image > .mdl-card__actions {
height: 50px;
padding: 15px;
background: rgba(0, 0, 0, 0.2);
}
.dummy-card-image__filename {
color: #fff;
font-size: 15px;
font-weight: 400;
}
</style>
<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.
More Examples & Customizations
Let’s have look over more example and customization of cards here.
Coming.. soon.
Advertisements
