CSS

Header

<header class="header">
 <div class="header__title">Header</div>
</header>

Header with Shadow

<header class="header header--shadow bg-white">
    <div class="title">Header with Shadow</div>
</header>

Header Custom Colors

<header class="header header--shadow bg-blue text-white">
 <div class="header__title">Header Colors</div>
</header>

Header with Buttons

<header class="header header--shadow bg-lime text-black">
  	<div class="header__buttons">
		<button class="button button--icon button--ripple text-white">
			<i class="icon material-icons">menu</i>
		</button>
	</div>
    <div class="header__title">Header Buttons</div>
    <div class="header__buttons">
		<a class="button button--icon button--ripple">
			<i class="material-icons">search</i>
		</a>
	</div>
</header>

Header Caption

<header class="header header--shadow header--caption">
 <div class="header__title">
    Header
    <div class="header__caption">header caption</div>
 </div>
</header>

Content

<section class="content content--padding">
  <h1>Main Content</h1>
</section>

Content + Header

<section class="content content--padding has-header">
  <h1>Content with header</h1>
</section>

Content + Footer

<section class="content content--padding has-header has-footer">
  <h1>Content with footer</h1>
</section>

Footer

<footer class="footer">
 <div class="footer__title">Footer</div>
</footer>

Footer Colors

<footer class="footer bg-yellow text-black">
 <div class="footer__title">Footer Colors</div>
</footer>

Footer Buttons

<footer class="footer bg-yellow text-black">
<div class="footer__buttons">
    <button class="button button--icon button--ripple text-black">
	    <i class="icon mdi mdi-pencil"></i>
    </button>
</div>
 <div class="footer__title">Buttons</div>
</footer>

Buttons

<button class="button button--raised bg-blue text-white">Button</button>
<button class="button button--raised bg-red text-white">Button</button>
<button class="button button--raised bg-green text-white">Button</button>

Different Sizes

<button class="button button--small button--raised bg-blue text-white">Button</button>
<button class="button button--raised bg-red text-white">Button</button>
<button class="button button--large button--raised bg-green text-white">Button</button>

Colors Button

<button class="button button--raised bg-blue text-white">Button</button>
<button class="button button--raised bg-red text-white">Button</button>
<button class="button button--raised bg-green text-white">Button</button>

Raised Buttons

<button class="button button--raised bg-blue text-white">Button</button>
<button class="button button--raised bg-red text-white">Button</button>
<button class="button button--raised bg-green text-white">Button</button>

Full Width Block Buttons

<button class="button button--raised button--block bg-blue text-white">Button</button>
<button class="button button--raised button--block bg-red text-white">Button</button>
<button class="button button--raised button--block bg-green text-white">Button</button>

Flat Buttons

<button class="button button--flat button--block text-blue">Button</button>
<button class="button button--flat button--block text-red">Button</button>

Icon Buttons

<button class="button button--icon bg-blue text-white"> <i class="icon mdi mdi-pencil"></i> </button>
<button class="button button--icon bg-red text-white"> <i class="icon mdi mdi-pencil"></i> </button>
<button class="button button--icon bg-green text-white"> <i class="icon mdi mdi-pencil"></i> </button>

Fab Buttons

<button class="button button--raised button--block bg-blue text-white">Button</button>
<button class="button button--raised button--block bg-red text-white">Button</button>
<button class="button button--raised button--block bg-green text-white">Button</button>

Floating Buttons

<button class="button bg-blue text-white button--fab button--fab-floating">
    <i class="icon mdi mdi-pencil"></i>
</button>

Ripple Effect

<button class="button button--raised ripple bg-blue text-white">Button</button>

Lists

<ul class="list">
  <li class="list__item">Html5</li>
  <li class="list__item">PHP</li>
  <li class="list__item">NodeJS</li>
  <li class="list__item">Ruby</li>
  <li class="list__item">JavaScript</li>
  <li class="list__item">Java</li>
<ul>

Lists Subheader

<ul class="list">
    <li class="list__subheader">Front-end</li>
	<li class="list__item">Html5</li>
    <li class="list__item">CSS</li>
    <li class="list__item">JavaScript</li>
    <li class="list__subheader">Back-end</li>
    <li class="list__item">Java</li>
    <li class="list__item">NodeJS</li>
    <li class="list__item">PHP</li>
    <li class="list__item">Ruby</li>
<ul>

List Caption

<ul class="list">
 <li class="list__subheader">Chat</li>
 <li class="list__item"> 
     <div class="list__primary">
        <img src="http://lorempixel.com/60/60/people/1" width="40" height="40" class="img-circle">
     </div>
     <div class="list__content"> 
         Fred 
         <div class="list__caption">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         </div> 
     </div>
 </li>
 <li class="list__item"> 
     <div class="list__primary">
        <img src="http://lorempixel.com/60/60/people/2" width="40" height="40" class="img-circle">
     </div>
     <div class="list__content"> 
         Lisa 
         <div class="list__caption">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         </div> 
     </div>
 </li>
 <li class="list__item"> 
     <div class="list__primary">
        <img src="http://lorempixel.com/60/60/people/3" width="40" height="40" class="img-circle">
     </div>
     <div class="list__content"> 
         John
         <div class="list__caption">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
         </div> 
     </div>
 </li>
<ul>

Lists Icon

<ul class="list">
 <li class="list__subheader">Icon left</li>
 <li class="list__item"> 
    <div class="list__primary">
        <i class="icon mdi mdi-inbox"></i>
    </div>
    <div class="list__content">Inbox</div>
 </li>
 
 <li class="list__item"> 
    <div class="list__primary">
        <i class="icon mdi mdi-star-circle"></i>
    </div>
    <div class="list__content">Starred</div>
 </li>
 
 <div class="list__divider list__divider--pushed"></div>
 <div class="list__subheader list__subheader--pushed">Icon Circled</div>
 
 <li class="list__item"> 
     <div class="list__primary">
        <i class="icon icon--circled bg-green color-white mdi mdi-inbox"></i>
     </div>
     <div class="list__content"> All mail </div>
 </li>
 
 <li class="list__item"> 
     <div class="list__primary">
        <i class="icon icon--circled bg-red color-white mdi mdi-delete"></i>
     </div>
     <div class="list__content"> Trash </div>
 </li>
 <div class="list__divider list__divider--pushed"></div>
 <div class="list__subheader list__subheader--pushed">Icon Right</div>
 
 <li class="list__item"> 
     <div class="list__primary">
        <i class="icon icon--circled bg-grey color-white mdi mdi-inbox"></i>
     </div>
     <div class="list__content"> Inbox </div>
     <div class="list__secondary">
        <i class="icon color-grey mdi mdi-information-outline"></i>
     </div>
 </li>
 
 <li class="list__item"> 
     <div class="list__primary">
        <i class="icon icon--circled bg-grey color-white mdi mdi-delete"></i>
     </div>
     <div class="list__content"> Trash </div>
     <div class="list__secondary">
        <i class="icon color-grey mdi mdi-information-outline"></i>
     </div>
 </li>
<ul>

Lists Image

<ul class="list">
 <li class="list__subheader">Contacts</li>
 <li class="list__item list__item--separator-pushed"> 
     <div class="list__primary">
        <img src="http://lorempixel.com/60/60/people/1" width="40" height="40" class="img-circle">
     </div>
     <div class="list__content"> Fred </div>
     <div class="list__secondary">
        <i class="icon mdi mdi-phone text-grey"></i>
     </div>
 </li>
 <li class="list__item list__item--separator-pushed"> 
     <div class="list__primary">
        <img src="http://lorempixel.com/60/60/people/2" width="40" height="40" class="img-circle">
     </div>
     <div class="list__content"> Lisa </div>
     <div class="list__secondary">
        <i class="icon mdi mdi-phone text-grey"></i>
     </div>
 </li>
 <li class="list__item list__item--separator-pushed"> 
     <div class="list__primary">
        <img src="http://lorempixel.com/60/60/people/3" width="40" height="40" class="img-circle">
     </div>
     <div class="list__content"> John</div>
     <div class="list__secondary">
        <i class="icon mdi mdi-phone text-grey"></i>
     </div>
 </li>
 
 <li class="list__separator"></li>
 <li class="list__subheader">Favorites</li>
 <li class="list__item list__item--separator-pushed"> 
     <div class="list__primary">
        <img src="http://lorempixel.com/60/60/people/5" width="40" height="40" class="img-circle">
     </div>
     <div class="list__content"> Brad </div>
     <div class="list__secondary">
        <i class="icon mdi mdi-phone text-grey"></i>
     </div>
 </li>
 <li class="list__item list__item--separator-pushed"> 
     <div class="list__primary">
        <img src="http://lorempixel.com/60/60/people/6" width="40" height="40" class="img-circle">
     </div>
     <div class="list__content"> Will </div>
     <div class="list__secondary">
        <i class="icon mdi mdi-phone text-grey"></i>
     </div>
 </li>
 <li class="list__item list__item--separator-pushed"> 
     <div class="list__primary">
        <img src="http://lorempixel.com/60/60/people/4" width="40" height="40" class="img-circle">
     </div>
     <div class="list__content"> Item 01 </div>
     <div class="list__secondary">
        <i class="icon mdi mdi-phone text-grey"></i>
     </div>
 </li>
 
 <ul>

Lists Ripple Effect

<ul class="list">
 <li class="list__item list__item--separator-pushed ripple"> 
     <div class="list__primary">
        <img src="http://lorempixel.com/60/60/people/1" width="40" height="40" class="img-circle">
     </div>
     <div class="list__content"> Fred </div>
 </li>
 <ul>

Cards

<div class="list card">
 <div class="list__item card__text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Mauris sagittis pellentesque lacus eleifend lacinia...
 </div>
</div>

Cards

<div class="list card">
 <div class="list__item card__image">
  <img src="http://lorempixel.com/640/480/abstract/" class="card__image--pic">
  <h2 class="card__image--title">Welcome</h2>
  <div class="card__image--menu">
    <button class="button button--icon button--ripple">
     <i class="icon material-icons">share</i>
    </button>
  </div>
 </div>
 <div class="list__item card__text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Mauris sagittis pellentesque lacus eleifend lacinia...
 </div>
 <div class="list__item card__actions">
  <button class="button button--flat button--ripple color-blue">GET STARTED</button>
 </div>
</div>

Card Avatar

<div class="list card">
 <div class="list__item card__avatar">
     <div class="list_primary">
        <img ng-src="http://lorempixel.com/50/50/people" class="img-circle"></img>
     </div>
     <div class="list_content">
        Alice Maria
     </div>
 </div>
 <div class="list__item card__image">
     <img src="http://lorempixel.com/640/480/food/" class="card__image--pic">
     <h2 class="card__image--title">Welcome</h2>
     <div class="card__image--menu">
         <button class="button button--icon button--ripple">
            <i class="icon material-icons">share</i>
         </button>
     </div>
 </div>
 <div class="list__item card__text">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 Mauris sagittis pellentesque lacus eleifend lacinia...
 </div>
 <div class="list__item card__actions">
     <button class="button button--flat button--ripple text-blue">LIKE</button>
     <button class="button button--flat button--ripple text-blue">SHARED</button>
 </div>
</div>

Background Image

<div class="list card card--background-image" style="background: url('http://lorempixel.com/640/480/people/')">
 <div class="list__item card__title">
    <h2 class="card__title--text">Welcome</h2>
 </div>
 <div class="list__item card__text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Mauris sagittis pellentesque lacus eleifend lacinia...
 </div>
 <div class="list__item card__actions">
  <button class="button button--flat button--ripple color-blue">GET STARTED</button>
 </div>
</div>

Text Field

<div class="text-field">
  <input type="text" class="text-field__input" placeholder="Last name">
  <div class="text-field__border"></div>
</div>

Label Animate

<div class="text-field">
  <input type="text" class="text-field__input" placeholder="Last name">
  <div class="text-field__border"></div>
</div>

Text Icon

<div class="text-field">
  <input type="text" class="text-field__input" placeholder="Last name">
  <div class="text-field__border"></div>
</div>

Switch

<div class="switch">
    <input type="checkbox" id="switch1" class="switch__input">
    <label for="switch1" class="switch__label">Switch</label>
</div>

<div class="switch">
    <input type="checkbox" id="switch2" class="switch__input" checked>
    <label for="switch2" class="switch__label">Switch with help</label>
    <span class="switch__help">Lorem ipsum dolor sit amet.</span>
</div>

<div class="switch">
    <input type="checkbox" id="switch3" class="switch__input" disabled>
    <label for="switch3" class="switch__label">Switch disabled</label>
</div>

<div class="switch">
    <input type="checkbox" id="switch4" class="switch__input" disabled checked>
    <label for="switch4" class="switch__label">Checked and disabled</label>
</div>

Checkbox

<div class="checkbox">
    <input type="checkbox" id="checkbox1" class="checkbox__input">
    <label for="checkbox1" class="checkbox__label">Checkbox</label>
</div>

<div class="checkbox">
    <input type="checkbox" id="checkbox3" class="checkbox__input" disabled="">
    <label for="checkbox3" class="checkbox__label">Checkbox disabled</label>
    <span class="checkbox__help">Lorem ipsum dolor sit amet.</span>
</div>

<div class="checkbox checkbox--standalone">
    <input type="checkbox" id="checkbox5" class="checkbox__input">
    <label for="checkbox5" class="checkbox__label"></label>
</div>

Radio Button

<div class="radio-group">

	<div class="radio-button">
   		<input type="radio" id="radio1" name="radio1" class="radio-button__input">
    	 <label for="radio1" class="radio-button__label">Radio Button 1</label>
    </div>

 	<div class="radio-button">
   		<input type="radio" id="radio2" name="radio1" class="radio-button__input">
     	<label for="radio2" class="radio-button__label">Radio Button 2</label>
     	<span class="radio-button__help">Lorem ipsum dolor sit amet.</span>
 	</div>
 	
</div>

<div class="radio-button">
    <input type="radio" id="radio3" class="radio-button__input" disabled>
    <label for="radio3" class="radio-button__label">Radio disabled</label>
</div>

<div class="radio-button">
    <input type="radio" id="radio4" class="radio-button__input" disabled checked>
    <label for="radio4" class="radio-button__label">Radio checked and disabled</label>
</div>

Select

<div class="select">
  <label class="select__label"></label>
  <select class="select__input">
  	<option></option>
  </select>
  <div class="select__border"></div>
</div>

Range Slider

<div class="range">
  <input type="range"></label>
</div>

Tabs

<div class="sub-header header--shadow">
    <div class="tab-bar bg-indigo tab-bar--text-white tab-bar--indicator-bottom-white">
      <div class="tab-bar__item ripple active">
        TEXT 1
      </div>
      <div class="tab-bar__item ripple">
        TEXT 2
      </div>
      <div class="tab-bar__item ripple">
        TEXT 3
      </div>
    </div>
  </div>

Tabs Icons

<div class="sub-header header--shadow">
    <div class="tab-bar bg-indigo tab-bar--text-white tab-bar--indicator-bottom-white">
      <div class="tab-bar__item ripple active">
        <i class="icon mdi mdi-home"></i>
      </div>
      <div class="tab-bar__item ripple">
        <i class="icon mdi mdi-comment"></i>
      </div>
      <div class="tab-bar__item ripple">
        <i class="icon mdi mdi-bell-outline"></i>
      </div>
    </div>
  </div>

Tabs Bottom

<div class="footer">
    <div class="tab-bar bg-white tab-bar--text-black tab-bar--indicator-top-black">
      <div class="tab-bar__item ripple active">
        <i class="icon mdi mdi-home"></i>
      </div>
      <div class="tab-bar__item ripple">
        <i class="icon mdi mdi-comment"></i>
      </div>
      <div class="tab-bar__item ripple">
        <i class="icon mdi mdi-bell-outline"></i>
      </div>
    </div>
  </div>

Grid

The grid cells naturally space themselves equally and expand to fit the entire row.

<div class="row">
            <div class="cell">
                <div class="Demo">.cell</div>
            </div>
            <div class="cell">
                <div class="Demo">.cell</div>
            </div>
</div>

Cell Padding

<div class="row row--gutters">
            <div class="cell">
                <div class="Demo">.cell</div>
            </div>
            <div class="cell">
                <div class="Demo">.cell</div>
            </div>
</div>

Flexible Cells

<div class="row row--gutters row--flex-cells">
            <div class="cell">
                <div class="Demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis..</div>
            </div>
            <div class="cell">
                <div class="Demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus
                    ipsum, eleifend non ipsum id, suscipit ultricies neque.</div>
            </div>
</div>

Custom Size

<div class="row row--gutters">
            <div class="cell cell--4">
                <div class="Demo">.cell--4</div>
            </div>
            <div class="cell cell--8">
                <div class="Demo">.cell--8</div>
            </div>
</div>

Responsive Cells

<div class="row row--gutters row--full row--responsive">
            <div class="cell">
                <div class="Demo">Cell Responsive</div>
            </div>
            <div class="cell">
                <div class="Demo">Cell Responsive</div>
            </div>
</div>

Alignment

<p>Align Top</p>
        <div class="row row--gutters row--top">
            <div class="cell">
                <div class="Demo">.cell</div>
            </div>
            <div class="cell">
                <div class="Demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu.</div>
            </div>
            <div class="cell">
                <div class="Demo">.cell</div>
            </div>
        </div>
        <h4>Align Bottom</h4>
        <div class="row row--gutters row--bottom">
            <div class="cell">
                <div class="Demo">.cell</div>
            </div>
            <div class="cell">
                <div class="Demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu.</div>
            </div>
            <div class="cell">
                <div class="Demo">.cell</div>
            </div>
        </div>
        <h4>Align Center</h4>
        <div class="row row--gutters row--center">
            <div class="cell">
                <div class="Demo">.cell</div>
            </div>
            <div class="cell">
                <div class="Demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu.</div>
            </div>
</div>

Alignment Cells

<div class="row row--gutters">
            <div class="cell cell--top">
                <div class="Demo">.cell</div>
            </div>
            <div class="cell">
                <div class="Demo">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
            </div>
            <div class="cell cell--center">
                <div class="Demo">.cell</div>
            </div>
            <div class="cell cell--bottom">
                <div class="Demo">.cell</div>
            </div>
</div>

Colors

<ul class="list">
    <li class="list__item">
        <div class="list__content text-red">.text-red</div>
        <div class="list__secondary bg-red text-white" style="padding: 4px;">
            .bg-red
        </div>
    </li>
    <li class="list__item">
        <div class="list__content text-pink">.text-pink</div>
        <div class="list__secondary bg-pink text-white" style="padding: 4px;">
            .bg-pink
        </div>
    </li>
    <li class="list__item">
        <div class="list__content text-purple">.text-purple</div>
        <div class="list__secondary bg-purple text-white" style="padding: 4px;">
            .bg-purple
        </div>
    </li>
    <li class="list__item">
        <div class="list__content text-deep-purple">.deep-purple</div>
        <div class="list__secondary bg-deep-purple text-white" style="padding: 4px;">
            .bg-deep-purple
        </div>
    </li>
    <li class="list__item">
        <div class="list__content text-indigo">.text-indigo</div>
        <div class="list__secondary bg-indigo text-white" style="padding: 4px;">
            .bg-indigo
        </div>
    </li>
    <li class="list__item">
        <div class="list__content text-blue">.text-blue</div>
        <div class="list__secondary bg-blue text-white" style="padding: 4px;">
            .bg-blue
        </div>
    </li>
    <li class="list__item">
        <div class="list__content text-light-blue">.text-light-blue</div>
        <div class="list__secondary bg-light-blue text-white" style="padding: 4px;">
            .bg-light-blue
        </div>
    </li>
    <li class="list__item">
        <div class="list__content text-cyan">.text-cyan</div>
        <div class="list__secondary bg-cyan text-white" style="padding: 4px;">
            .bg-cyan
        </div>
    </li>
    <li class="list__item">
        <div class="list__content text-teal">.text-teal</div>
        <div class="list__secondary bg-teal text-white" style="padding: 4px;">
            .bg-teal
        </div>
    </li>
    <li class="list__item">
        <div class="list__content text-green">.text-green</div>
        <div class="list__secondary bg-green text-white" style="padding: 4px;">
            .bg-green
        </div>
    </li>
    <li class="list__item">
        <div class="list__content text-light-green">.text-light-green</div>
        <div class="list__secondary bg-light-green text-white" style="padding: 4px;">
            .bg-light-green
        </div>
    </li>
    <li class="list__item">
        <div class="list__content text-lime">.text-lime</div>
        <div class="list__secondary bg-lime text-white" style="padding: 4px;">
            .bg-lime
        </div>
    </li>
    <li class="list__item">
        <div class="list__content text-yellow">.text-yellow</div>
        <div class="list__secondary bg-yellow text-white" style="padding: 4px;">
            .bg-yellow
        </div>
    </li>
    <li class="list__item">
        <div class="list__content text-amber">.text-amber</div>
        <div class="list__secondary bg-amber text-white" style="padding: 4px;">
            .bg-amber
        </div>
    </li>
    <li class="list__item">
        <div class="list__content text-orange">.text-orange</div>
        <div class="list__secondary bg-orange text-white" style="padding: 4px;">
            .bg-orange
        </div>
    </li>
    <li class="list__item">
        <div class="list__content text-deep-orange">.text-deep-orange</div>
        <div class="list__secondary bg-deep-orange text-white" style="padding: 4px;">
            .bg-deep-orange
        </div>
    </li>
    <li class="list__item">
        <div class="list__content text-brown">.text-brown</div>
        <div class="list__secondary bg-brown text-white" style="padding: 4px;">
            .bg-brown
        </div>
    </li>
    <li class="list__item">
        <div class="list__content text-grey">.text-grey</div>
        <div class="list__secondary bg-grey text-white" style="padding: 4px;">
            .bg-grey
        </div>
    </li>
    <li class="list__item">
        <div class="list__content text-blue-grey">.text-blue-grey</div>
        <div class="list__secondary bg-blue-grey text-white" style="padding: 4px;">
            .bg-blue-grey
        </div>
    </li>
    <li class="list__item">
        <div class="list__content text-black">.text-black</div>
        <div class="list__secondary bg-black text-white" style="padding: 4px;">
            .bg-black
        </div>
    </li>
    <li class="list__item">
        <div class="list__content text-black">.text-white</div>
        <div class="list__secondary bg-white text-black" style="padding: 4px;">
            .bg-white
        </div>
    </li>
</ul>

Icons

PhonePack provide Material Design iconic font based on Austin Andrews work. Simple icons

Simply use mdi class with mdi-{icon} modifier to display icon. You can get icon labels here.

<i class="icon mdi mdi-basket"></i>
<i class="icon mdi mdi-account"></i>
<i class="icon mdi mdi-account-box-outline"></i>
<i class="icon mdi mdi-apps"></i>
<i class="icon mdi mdi-basket"></i>
<i class="icon mdi mdi-beaker-empty-outline"></i>
<i class="icon mdi mdi-camcorder"></i>
<i class="icon mdi mdi-cast"></i>
<i class="icon mdi mdi-comment-outline"></i>
<i class="icon mdi mdi-earth"></i>
<i class="icon mdi mdi-heart-outline"></i>
<i class="icon mdi mdi-phone"></i>
<i class="icon mdi mdi-bluetooth"></i>
<i class="icon mdi mdi-cart"></i>
<i class="icon mdi mdi-thumb-up"></i>

Styled Icons

<i class="icon text-red mdi mdi-basket"></i> 
<i class="icon text-blue mdi mdi-basket"></i> 
<i class="icon text-green mdi mdi-basket"></i> 
<i class="icon text-yellow mdi mdi-basket"></i> 
<i class="icon text-purple mdi mdi-basket"></i> 
<i class="icon icon--circled bg-red mdi mdi-account"></i> 
<i class="icon icon--circled bg-blue mdi mdi-account"></i> 
<i class="icon icon--circled bg-green mdi mdi-account"></i> 
<i class="icon icon--circled bg-yellow mdi mdi-account"></i> 
<i class="icon icon--circled bg-purple mdi mdi-account"></i>