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:

<div class="mdl-card mdl-shadow--2dp demo-card-pink">
<div class="mdl-card__title">
    <h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
    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>
<div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">
      Get Started
    </a>
</div>
</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;
}