In this tutorial I’m going to show you how-to create an indigo colour card using Google’s Material Design Lite.See the Pen Material Design Lite: Card (Indigo) by Brandon Himpfen (@brandonhimpfen) on CodePen.

The colour of the button used is the colored class colour, which by default is indigo. The title of the card uses the same indigo colour. 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--colored 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: #3F51B5;
}