@@include('./parts/head.html', { "plugin_fa_icons": true, "plugin_mdi_icons": true, "plugin_ion_icons": true, "plugin_wi_icons": true, "plugin_rickshaw": false, "plugin_nvd3": false, "plugin_flot": false, "plugin_sparkline": false, "plugin_markitup": false, "plugin_ckeditor": false, "plugin_select2": false, "plugin_dropzone": false, "plugin_tagsinput": false, "plugin_clockpicker": false, "plugin_pikaday": false, "plugin_spectrum": false, "plugin_inputmask": false, "plugin_parsley": false, "plugin_gmaps": false, "plugin_jvectormap": false, "plugin_datatables": false, "plugin_fullcalendar": false, "plugin_simpleweather": false, "plugin_prettify": true, "plugin_animatecss": false, "plugin_wowjs": false, "plugin_photoswipe": false, "plugin_isotope": false, "plugin_videojs": false }) @@include('./parts/top-navbar.html') @@include('./parts/sidebar.html', { "page": "ui-cards", "classes": "yay-shrink yay-hide-to-small yay-gestures" })

@@include('./parts/title.html', { "title": "Cards", "crumbs": "

" }) 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.

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

@@include('./parts/search-bar.html') @@include('./parts/chat.html') @@include('./parts/foot.html', { "copyright": true })