Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.

  • Address: PO Box 21132, Here Weare St,
    Melbourne, Vivas 2355 Australia
  • Phone: 1-800-565-2390
  • Email: support@yourname.com

Smarty Material Design

power of google material


The Material Design Lite (MDL) chip component is a small, interactive element. Chips are commonly used for contacts, text, rules, icons, and photos.

1. Add to html head, BEFORE essentials.css:

<link href="assets/plugins/mdl/material.indigo-blue.min.css" rel="stylesheet">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

2. Add .enable-materialdesign class to body:

<body class="smoothscroll enable-animation enable-materialdesign">

NOTE: if you don't need 'Material Design Lite' javascript plugin, skip step 2 

(.enable-materialdesign class is used by assets/js/scripts.js to load MDL plugin from assets/plugins/mdl/)

COLOR SCHEME: We use blue as default color scheme. You can create your own material design color:

Click to create your material design color

Credits: MDL official

Basic Chip

Basic Chip
Deletable Chip

Deletable Chip

Button Chip

<!-- Basic Chip -->

<span class="mdl-chip">

    <span class="mdl-chip__text">Basic Chip</span>


<!-- Deletable Chip -->

<span class="mdl-chip mdl-chip--deletable">

    <span class="mdl-chip__text">Deletable Chip</span>

    <button type="button" class="mdl-chip__action"><i class="material-icons">cancel</i></button>


<!-- Button Chip -->

<button type="button" class="mdl-chip">

    <span class="mdl-chip__text">Button Chip</span>


A Contact Chip

Contact Chip
Deletable Contact Chip cancel

Deletable Contact Chip

<!-- Contact Chip -->

<span class="mdl-chip mdl-chip--contact">

    <span class="mdl-chip__contact mdl-color--teal mdl-color-text--white">A</span>

    <span class="mdl-chip__text">Contact Chip</span>


<!-- Deletable Contact Chip -->

<span class="mdl-chip mdl-chip--contact mdl-chip--deletable">

    <img class="mdl-chip__contact" src="assets/images/_smarty/user-min.jpg"></img>

    <span class="mdl-chip__text">Deletable Contact Chip</span>

    <a href="#" class="mdl-chip__action"><i class="material-icons">cancel</i></a>


MDL class Effect Remarks
mdl-chip Defines element as an MDL chip container Required on "outer" container
mdl-chip--contact Defines an MDL chip as a contact style chip Optional, goes on "outer" container
mdl-chip__text Defines element as the chip's text Required on "inner" text container
mdl-chip__action Defines element as the chip's action Required on "inner" action container, if present
mdl-chip__contact Defines element as the chip's contact container Required on "inner" contact container, if the mdl-chip--contact class is present on "outer" container