WHY SMARTY?

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.

RECENTLY VISITED
CONTACT INFO
  • 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

EXPLORE COMPONENTS

MATERIAL COMPONENTS

MATERIAL : CARDS

The Material Design Lite (MDL) card component is a user interface element representing a virtual piece of paper that contains related data — such as a photo, some text, and a link — that are all about a single subject.

Cards are a convenient means of coherently displaying related content that is composed of different types of objects. They are also well-suited for presenting similar objects whose size or supported actions can vary considerably, like photos with captions of variable length. Cards have a constant width and a variable height, depending on their content.

HOW TO ENABLE MATERIAL 
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

Welcome

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...
Get Started

Wide
Show Code 
<!-- WIDE CARD -->
<div class="demo-card-wide mdl-card mdl-shadow--2dp">
  <!-- h-50, h-100, h-150, h-200, heitgh-250, etc -->
  <div class="mdl-card__title h-200 text-white"  style="background: url('demo_files/images/mdl-art-min.jpg') center / cover;">
    <h2 class="mdl-card__title-text">Welcome</h2>
  </div>
  <div class="mdl-card__supporting-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Mauris sagittis pellentesque lacus eleifend lacinia...
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <a href="#" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Get Started
    </a>
  </div>
  <!-- text-white, text-black, text-yellow, etc (see essentials.css)-->
  <div class="mdl-card__menu text-white">
    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
      <i class="material-icons">share</i>
    </button>
  </div>
</div>

Update

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis.
View Updates

Square
Show Code 
<!-- SQUARE CARD -->
<div class="demo-card-square mdl-card mdl-shadow--2dp h-300 fw-300">
  <!-- 
  	fw-50, fw-100, fw-150, fw-200, fw-250, etc 
  	h-50, h-100, h-150, h-200, heitgh-250, etc 
  	-->
  <div class="mdl-card__title mdl-card--expand" style="background: url('demo_files/images/mdl-art-min.jpg') top left 15% no-repeat #46B6AC;">
    <!-- text-white, text-black, text-yellow, etc (see essentials.css)-->
    <h2 class="mdl-card__title-text text-white">Update</h2>
  </div>
  <div class="mdl-card__supporting-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Aenan convallis.
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <a href="#" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      View Updates
    </a>
  </div>
</div>
Image.jpg

Image

Featured event:
May 24, 2016
7-11pm

Add to Calendar
event

Event
Show Code 
<!-- IMAGE -->
<!-- 
fw-50, fw-100, fw-150, fw-200, fw-250, etc 
h-50, h-100, h-150, h-200, heitgh-250, etc 
-->
<div class="mdl-card-image mdl-card mdl-shadow--2dp fw-250 h-250" style="background: url('demo_files/images/mdl-art-min.jpg') center / cover;">
  <div class="mdl-card__title mdl-card--expand"></div>
  <div class="mdl-card__actions">
    <span class="mdl-card-image__filename">Image.jpg</span>
  </div>
</div>

<!-- EVENT -->
<!-- 
fw-50, fw-100, fw-150, fw-200, fw-250, etc 
h-50, h-100, h-150, h-200, heitgh-250, etc 
-->
<div class="mdl-card-event mdl-card mdl-shadow--2dp fw-250 h-250 bg-blue text-white">
  <div class="mdl-card__title mdl-card--expand text-white">
    <h4 class="text-white fs-25">
      Featured event:<br>
      May 24, 2016<br>
      7-11pm
    </h4>
  </div>
  <div class="mdl-card__actions mdl-card--border text-white">
    <a href="#" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect text-white">
      Add to Calendar
    </a>
    <div class="mdl-layout-spacer"></div>
    <i class="material-icons">event</i>
  </div>
</div>

Auckland Sky Tower
New Zealand

The Sky Tower is an observation and telecommunications tower located in Auckland, New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure in the Southern Hemisphere.
Wikipedia entry
Auckland Sky Tower, taken March 24th, 2014
The Sky Tower is an observation and telecommunications tower located in Auckland, New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure in the Southern Hemisphere.
Show Code 
<!-- NO SHADOW -->
<div class="mdl-card mdl-mobile-fullwidth">
  <div class="mdl-card__title pl-0 pr-0">
     <h2 class="mdl-card__title-text fs-20">
     	Auckland Sky Tower <br> 
     	<span class="fs-15">New Zealand</span>
     </h2>
  </div>
  <div class="mdl-card__media">
    <img class="p-6 img-fluid" src="demo_files/images/mdl-art-min.jpg" alt="">
  </div>
  <div class="mdl-card__supporting-text pl-0 pr-0">
  	The Sky Tower is an observation and telecommunications tower located in Auckland,
  	New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure
  	in the Southern Hemisphere.
  </div>
  <div class="mdl-card__actions">
     <a href="http://en.wikipedia.org/wiki/Sky_Tower_%28Auckland%29" target="_blank">Wikipedia entry</a>
  </div>
</div>

<!-- SHADOW LEVEL 3 -->
<div class="mdl-card mdl-mobile-fullwidth mdl-shadow--4dp">
  <div class="mdl-card__media">
  	<img class="p-6 img-fluid" src="demo_files/images/mdl-art-min.jpg" alt="">
  </div>
  <div class="mdl-card__supporting-text">
    <b>Auckland Sky Tower, taken March 24th, 2014</b>
  </div>
  <div class="mdl-card__supporting-text">
  The Sky Tower is an observation and telecommunications tower located in Auckland,
  New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure
  in the Southern Hemisphere.
  </div>
</div>
MDL class Effect Remarks
mdl-card Defines div element as an MDL card container Required on "outer" div
mdl-card--border Adds a border to the card section that it's applied to Used on the "inner" divs
mdl-shadow--2dp through mdl-shadow--16dp Assigns variable shadow depths (2, 3, 4, 6, 8, or 16) to card Optional, goes on "outer" div; if omitted, no shadow is present
mdl-card__title Defines div as a card title container Required on "inner" title div
mdl-card__title-text Assigns appropriate text characteristics to card title Required on head tag (H1 - H6) inside title div
mdl-card__subtitle-text Assigns text characteristics to a card subtitle Optional. Should be a child of the title element.
mdl-card__media Defines div as a card media container Required on "inner" media div
mdl-card__supporting-text Defines div as a card body text container and assigns appropriate text characteristics to body text Required on "inner" body text div; text goes directly inside the div with no intervening containers
mdl-card__actions Defines div as a card actions container and assigns appropriate text characteristics to actions text Required on "inner" actions div; content goes directly inside the div with no intervening containers
mdl-card__menu Defines element as top right menu button Optional. Should be a child of the mdl-card element.