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.
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 --> <span class="mdl-chip"> <span class="mdl-chip__text">Basic Chip</span> </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> </span> <!-- Button Chip --> <button type="button" class="mdl-chip"> <span class="mdl-chip__text">Button Chip</span> </button>
<!-- 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> </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> </span>
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 |