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) dialog component allows for verification of user actions, simple data input, and alerts to provide extra information to users.

Note: Dialogs use the HTML <dialog> element, which currently has very limited cross-browser support. To ensure support across all modern browsers, please consider using a polyfill or creating your own. There is no polyfill included with MDL.

Smarty note: Desktop browsers may support this feature but mobile browsers do not! We recommend you bootstrap modals. In the future, all browsers may support <dialog> but for now, please, avoid using it.

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

Allow data collection?

Allowing us to collect data will let us get you the information you want faster.

<!-- 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>


MDL class Effect Remarks
mdl-dialog Defines the container of the dialog component. Required on dialog container.


MDL class Effect Remarks
mdl-dialog__title Defines the title container in the dialog. Optional on title container.
mdl-dialog__content Defines the content container of the dialog. Required on content container.
mdl-dialog__actions Defines the actions container in the dialog. Required on action container.


MDL class Effect Remarks
mdl-dialog__actions--full-width Modifies the actions to each take the full width of the container. This makes each take their own line. Optional on action container.