In this tutorial, I’m going to show you how-to create a order checkout card using Google’s Material Design Lite.This is what we are going to create:

See the Pen Material Design Lite: Order Checkout by Brandon Himpfen (@brandonhimpfen) on CodePen.

HTML

    <div class="mdl-card mdl-card-order mdl-shadow--8dp">
        <div class="mdl-card__title">
      <h2 class="mdl-card__title-text">Checkout</h2>
        </div>  
        <div class="mdl-card__supporting-text mdl-grid">
            <form action="#">
                <div class="mdl-textfield mdl-js-textfield mdl-cell mdl-cell--12-col">
                    <input class="mdl-textfield__input" type="text" id="cardholder" placeholder="Your full name..."/>
                    <label class="mdl-textfield__label" for="cardholder">Your full name...</label>
                </div>
                <div class="mdl-textfield mdl-js-textfield mdl-cell mdl-cell--12-col">
                    <input class="mdl-textfield__input" type="text" id="cardnumber" placeholder="XXXX XXXX XXXX XXXX" pattern="-?[0-9]*(.[0-9]+)?" maxlength="16" />
          <label class="mdl-textfield__label" for="cardnumber">XXXX XXXX XXXX XXXX</label>
          <span class="mdl-textfield__error">Input is not a number!</span>
                </div>
                <div class="mdl-cell mdl-cell--12-col">
                    <div class="mdl-textfield mdl-js-textfield mdl-cell--6-col">
                        <input class="mdl-textfield__input" type="text" id="expire" placeholder="MM / YY" maxlength="5" />
            <label class="mdl-textfield__label" for="expire">MM / YY</label>
                    </div>
                    <div class="mdl-textfield mdl-js-textfield mdl-cell--6-col">
                        <input class="mdl-textfield__input" type="text" id="ccv" placeholder="CCV" pattern="-?[0-9]*(.[0-9]+)?" maxlength="3" />
            <label class="mdl-textfield__label" for="ccv">CCV</label>
            <span class="mdl-textfield__error">Input is not a number!</span>
                    </div>
                </div>
                <div class="mdl-card__actions mdl-cell--12-col send-button">
                <button class="mdl-button mdl-js-ripple-effect mdl-js-button mdl-button--raised mdl-button--colored" id="send">
                        COMPLETE ORDER  
                    </button>
                </div>
            </form>
        </div>
    </div>

For the credit card number and CVV, we will make sure the value inputted is a number, which you can see looks like this:

<input class="mdl-textfield__input" type="text" id="cardnumber" placeholder="XXXX XXXX XXXX XXXX" pattern="-?[0-9]*(.[0-9]+)?" maxlength="16" />

Note pattern="-?[0-9]*(.[0-9]+)?" which requires the input pattern to be a number and maxlength="16" which adds a maximum input length.

The second line afterwards, we’ll see:

<span class="mdl-textfield__error">Input is not a number!</span>

This is a message that will be displayed to the user if they do not enter a number.

Custom CSS

We will use some custom CSS:

body {
  background: #5C6BC0;
}
.mdl-card {
  margin-top: 40px;
  margin-left: auto;
  margin-bottom: 40px;
  margin-right: auto;
}
.mdl-card-order > .mdl-card__title {
  color: #fff;
  padding-top: 40px;
  padding-bottom: 40px;
  background: #3F51B5;   
  /* 
  background: #3F51B5 url("images/mastercard.jpg") center;
  background-size: cover; 
  */
}

From lines 15 – 18, you will see this:

  /* 
  background: #3F51B5 url("images/mastercard.jpg") center;
  background-size: cover; 
  */

If you wish for the card title to be an image instead of the indigo colour, use this code.