Cards

You can use cards for place your content.

Base

Card Panel

<div class="card-panel">Card Panel</div>

Colored

Blue Card Panel

Red Card Panel

Teal Card Panel

<div class="card-panel blue white-text">Blue Card Panel</div>
<br>
<div class="card-panel red white-text">Red Card Panel</div>
<br>
<div class="card-panel teal white-text">Teal Card Panel</div>

With Title

Title

Content

<div class="card">
  <div class="title">
    <h5>Title</h5>
  </div>
  <div class="content">Content</div>
</div>

With Minimize Button

Title

Content

<div class="card">
  <div class="title">
    <h5>Title</h5>
    <a class="minimize" href="#">
      <i class="mdi-navigation-expand-less"></i>
    </a>
  </div>
  <div class="content">Content</div>
</div>

With Close Button

Title

Content

<div class="card">
  <div class="title">
    <h5>Title</h5>
    <a class="close" href="#">
      <i class="mdi-content-clear"></i>
    </a>
  </div>
  <div class="content">Content</div>
</div>

Full

Title

Content

<div class="card">
  <div class="title">
    <h5>Title</h5>
    <a class="close" href="#">
      <i class="mdi-content-clear"></i>
    </a>
    <a class="minimize" href="#">
      <i class="mdi-navigation-expand-less"></i>
    </a>
  </div>
  <div class="content">Content</div>
</div>

Image Card

Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

This is a link

<div class="card">
  <div class="card-image">
    <img src="assets/_con/images/image-2.jpeg">
    <span class="card-title">Card Title</span>
  </div>
  <div class="content">
    I am a very simple card. I am good at containing small bits of information.
    I am convenient because I require little markup to use effectively.
  </div>
  <div class="card-action">
    <a href="#!">This is a link</a>
  </div>
</div>

Card Reveal

Card Title

This is a link

Card Title

Here is some more information about this product that is only revealed once clicked on.

<div class="card of-h">
  <div class="card-image waves-effect waves-block waves-light">
    <img class="activator" src="assets/_con/images/image-1.jpg">
  </div>
  <div class="content">
    <span class="card-title activator grey-text text-darken-4">Card Title<i class="mdi-navigation-more-vert right"></i></span>
    <p><a href="#">This is a link</a></p>
  </div>
  <div class="card-reveal">
    <span class="card-title grey-text text-darken-4">Card Title <i class="mdi-content-clear right"></i></span>
    <p>Here is some more information about this product that is only revealed once clicked on.</p>
  </div>
</div>

Card Sizes

Small Card Title
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
This is a link
Medium Card Title
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
This is a link
Large Card Title
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
This is a link

Sortable

Use sortable classname for enable Sortable plugin on card.

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6

<div class="row sortable">

  <div class="col l2 m6 s12">
    <div class="card-panel">
      Card 1
    </div>
  </div>
  
  <div class="col l2 m6 s12">
    <div class="card-panel">
      Card 2
    </div>
  </div>
  ...
</div>