Material Design Lite: Pink Card

In this tutorial I’m going to show you how-to create a pink card using Google’s Material Design Lite.See the Pen Material Design Lite: Cards (Pink) by Brandon Himpfen (@brandonhimpfen) on CodePen.

The colour of the button used is the accent colour, which by default is pink. The title of the card uses the same pink. You can get Material Design Lite colours on Material Design’s website.

HTML

This is the HTML solely for the card:

 

Welcome

 

 

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

 

</div>

CSS

This is the CSS solely for the card:

.mdl-card {
    margin-left: auto;
    margin-right: auto;
}
.mdl-card.demo-card-pink {
    width: 512px;
}
.mdl-card .mdl-card__title {
    color: #fff;
    height: 176px;
    background: #E91E63;
}