Cards

// Basic
.eq-ui-card
  .eq-ui-card-title
    h2.eq-ui-card-title-text Welcome
  .eq-ui-card-supporting-text
    | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    | Mauris sagittis pellentesque lacus eleifend lacinia...
  .eq-ui-card-actions.eq-ui-card-border
    a.btn.btn-default.eq-ui-btn-flat.eq-ui-waves.eq-ui-secondary-color-text Get Started
  .eq-ui-card-menu
    ul.right.eq-ui-nav-menu
      li.eq-ui-nav-menu-item-icon
        a.btn.btn-default.eq-ui-btn-flat.eq-ui-btn-fab.eq-ui-btn-menu-fab.eq-ui-waves
          i.mdi.mdi-dots-vertical.icon


// Panel
.eq-ui-card
  .eq-ui-card-supporting-text
    | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet eros quis sapien mollis congue eu a libero. Fusce blandit purus vel est sodales, consequat gravida felis condimentum. Suspendisse quis odio pulvinar neque condimentum congue ut et nisl. Cras nec neque eu urna euismod iaculis. Mauris facilisis arcu at eros porttitor, non consectetur ante rhoncus.

<!-- Basic -->
<div class="eq-ui-card">
    <div class="eq-ui-card-title">
        <h2 class="eq-ui-card-title-text">Welcome</h2>
    </div>
    <div class="eq-ui-card-supporting-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Mauris sagittis pellentesque lacus eleifend lacinia...
    </div>
    <div class="eq-ui-card-actions eq-ui-card-border">
        <a class="btn btn-default eq-ui-btn-flat eq-ui-waves eq-ui-secondary-color-text">Get Started</a>
    </div>
    <div class="eq-ui-card-menu">
        <ul class="right eq-ui-nav-menu">
            <li class="eq-ui-nav-menu-item-icon">
                <a class="btn btn-default eq-ui-btn-flat eq-ui-btn-fab eq-ui-btn-menu-fab eq-ui-waves">
                    <i class="mdi mdi-dots-vertical icon"></i>
                </a>
            </li>
        </ul>
    </div>
</div>

<!-- Panel -->
<div class="eq-ui-card">
    <div class="eq-ui-card-supporting-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet eros quis sapien mollis congue eu a libero. Fusce blandit purus vel est sodales, consequat gravida felis condimentum. Suspendisse quis odio pulvinar neque condimentum congue ut et nisl. Cras nec neque eu urna euismod iaculis. Mauris facilisis arcu at eros porttitor, non consectetur ante rhoncus.
    </div>
</div>

.eq-ui-card
  .eq-ui-card-title
    h2.eq-ui-card-title-text Welcome
  .eq-ui-card-supporting-text
    | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    | Mauris sagittis pellentesque lacus eleifend lacinia...
  .eq-ui-card-actions.eq-ui-card-border
    a.btn.btn-default.eq-ui-btn-flat.eq-ui-waves.eq-ui-secondary-color-text Get Started
  .eq-ui-card-menu
    ul.right.eq-ui-nav-menu
      li.eq-ui-nav-menu-item-icon
        a.btn.btn-default.eq-ui-btn-flat.eq-ui-btn-fab.eq-ui-btn-menu-fab.eq-ui-waves
          i.mdi.mdi-dots-vertical.icon

// With Dropdown
.eq-ui-card.doc-margin-bottom
    .eq-ui-card-image.waves-effect.waves-block.waves-light
        img.dropdown-trigger(data-target='dropdown-test', data-hover='false', data-below-origin='true', height='180', src='/assets/img/doc/welcome_card.jpg')
    .eq-ui-card-title
        h2.eq-ui-card-title-text
            | Welcome
            a.btn.dropdown-trigger.btn-default.right.eq-ui-btn-flat.eq-ui-btn-fab.eq-ui-btn-menu-fab.eq-ui-waves(data-target='dropdown-test', data-hover='false', data-below-origin='true')
                i.mdi.mdi-dots-vertical.icon
    .eq-ui-card-supporting-text.eq-ui-card-border
        | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        | Mauris sagittis pellentesque lacus eleifend lacinia...
    .eq-ui-card-actions.eq-ui-card-border
        a.btn.btn-default.eq-ui-btn-flat.eq-ui-waves.eq-ui-secondary-color-text Get Started

    // Dropdown Structure
    #dropdown-test.eq-ui-dropdown.eq-ui-dropdown-right-bottom
        .eq-ui-card-title
            h2.eq-ui-card-title-text
                | Get Started
                a.btn.btn-default.right.eq-ui-btn-flat.eq-ui-btn-fab.eq-ui-btn-menu-fab.eq-ui-waves.eq-ui-dropdown-close.waves-effect
                    i.mdi.mdi-close.eq-ui-icon
        .eq-ui-card-supporting-text.eq-ui-card-border
            | Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            | Mauris sagittis pellentesque lacus eleifend lacinia...
        .eq-ui-card-actions.eq-ui-card-border
            a.btn.btn-default.eq-ui-btn-flat.eq-ui-waves.eq-ui-secondary-color-text Get Started

<div class="eq-ui-card">
    <div class="eq-ui-card-title">
        <h2 class="eq-ui-card-title-text">Welcome</h2>
    </div>
    <div class="eq-ui-card-supporting-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Mauris sagittis pellentesque lacus eleifend lacinia...
    </div>
    <div class="eq-ui-card-actions eq-ui-card-border">
        <a class="btn btn-default eq-ui-btn-flat eq-ui-waves eq-ui-secondary-color-text">Get Started</a>
    </div>
    <div class="eq-ui-card-menu">
        <ul class="right eq-ui-nav-menu">
            <li class="eq-ui-nav-menu-item-icon">
                <a class="btn btn-default eq-ui-btn-flat eq-ui-btn-fab eq-ui-btn-menu-fab eq-ui-waves">
                    <i class="mdi mdi-dots-vertical icon"></i>
                </a>
            </li>
        </ul>
    </div>
</div>

// With Dropdown
<div class="eq-ui-card doc-margin-bottom">
    <div class="eq-ui-card-image waves-effect waves-block waves-light">
      <img data-target="dropdown-test" data-hover='false' data-below-origin='true' class="dropdown-trigger" height="180" src="/assets/img/doc/welcome_card.jpg">
    </div>
    <div class="eq-ui-card-title">

    <h2 class="eq-ui-card-title-text">Welcome<a data-target="dropdown-test" data-hover='false' data-below-origin='true' class="btn dropdown-trigger btn-default right eq-ui-btn-flat eq-ui-btn-fab eq-ui-btn-menu-fab eq-ui-waves"><i class="mdi mdi-dots-vertical icon"></i></a></h2>

    </div>
    <div class="eq-ui-card-supporting-text eq-ui-card-border">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Mauris sagittis pellentesque lacus eleifend lacinia...
    </div>
    <div class="eq-ui-card-actions eq-ui-card-border">
        <a class="btn btn-default eq-ui-btn-flat eq-ui-waves eq-ui-secondary-color-text">Get Started</a>
    </div>

    <!-- Dropdown Structure -->
    <div id="dropdown-test" class="eq-ui-dropdown eq-ui-dropdown-right-bottom">
    <div class="eq-ui-card-title">
        <h2 class="eq-ui-card-title-text">Get Started<a class="btn btn-default right eq-ui-btn-flat eq-ui-btn-fab eq-ui-btn-menu-fab eq-ui-waves eq-ui-dropdown-close waves-effect"><i class="mdi mdi-close eq-ui-icon"></i></a></h2>
    </div>
    <div class="eq-ui-card-supporting-text eq-ui-card-border">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Mauris sagittis pellentesque lacus eleifend lacinia...
    </div>
     <div class="eq-ui-card-actions eq-ui-card-border">
        <a class="btn btn-default eq-ui-btn-flat eq-ui-waves eq-ui-secondary-color-text">Get Started</a>
    </div>
    </div>
</div>

// With Table
.eq-ui-card.eq-ui-card-with-table
  .eq-ui-card-title
    h2.eq-ui-card-title-text List Materials
  table.table.eq-ui-data-table.eq-ui-with-checkbox
    thead
      tr
        th
          input#checkbox-all.eq-ui-input.filled-in(type='checkbox')
          label(for='checkbox-all')
        th.eq-ui-data-table-cell-non-numeric Material
        th Quantity
        th Unit price
    tbody
      tr
        td
          input#checkbox-1.eq-ui-input.filled-in(type='checkbox')
          label(for='checkbox-1')
        td.eq-ui-data-table-cell-non-numeric Acrylic (Transparent)
        td 25
        td $2.90
      tr
        td
          input#checkbox-2.eq-ui-input.filled-in(type='checkbox')
          label(for='checkbox-2')
        td.eq-ui-data-table-cell-non-numeric Plywood (Birch)
        td 50
        td $1.25
      tr
        td
          input#checkbox-3.eq-ui-input.filled-in(type='checkbox')
          label(for='checkbox-3')
        td.eq-ui-data-table-cell-non-numeric Laminate (Gold on Blue)
        td 10
        td $2.35
  .eq-ui-card-actions.eq-ui-card-border
    ul.right.eq-ui-nav-menu
      li Rows per page:
      li
        a(href='#')
          | 10
          i.mdi.mdi-menu-down.icon.icon-right(style='margin-left: 5px;')
      li
        a 1 - 3 of 100
      li.eq-ui-nav-menu-item-icon
        a.btn.btn-default.eq-ui-btn-flat.eq-ui-btn-fab.eq-ui-btn-menu-fab.eq-ui-waves
          i.mdi.mdi-chevron-left.icon
      li.eq-ui-nav-menu-item-icon
        a.btn.btn-default.eq-ui-btn-flat.eq-ui-btn-fab.eq-ui-btn-menu-fab.eq-ui-waves
          i.mdi.mdi-chevron-right.icon
  .eq-ui-card-menu
    ul.right.eq-ui-nav-menu
      li.eq-ui-nav-menu-item-icon
        .eq-ui-search.eq-ui-search-expandable
          input(type='text', placeholder='Search')
          a.eq-ui-search-icon-left.eq-ui-serach-expandable-show.btn.btn-default.eq-ui-btn-flat.eq-ui-btn-fab.eq-ui-btn-menu-fab.eq-ui-waves
            i.mdi.mdi.mdi-magnify.icon
          i.eq-ui-search-clear.mdi.mdi-close.icon.icon-right.icon-18
      li.eq-ui-nav-menu-item-icon
        a.btn.btn-default.eq-ui-btn-flat.eq-ui-btn-fab.eq-ui-btn-menu-fab.eq-ui-waves
          i.mdi.mdi-filter-variant.icon
      li.eq-ui-nav-menu-item-icon
        a.btn.btn-default.eq-ui-btn-flat.eq-ui-btn-fab.eq-ui-btn-menu-fab.eq-ui-waves
          i.mdi.mdi-dots-vertical.icon

// With List
.eq-ui-card.eq-ui-card-with-list
  .eq-ui-card-title.eq-ui-card-border
    h2.eq-ui-card-title-text Messages
  ul.eq-ui-list.eq-ui-hoverable
    li.eq-ui-list-item.eq-ui-list-avatar.eq-ui-list-truncate.eq-ui-list-secondary-content
      img.circle(src='assets/img/doc/avatar/avatar_1.jpg')
      .eq-ui-list-body
        h6.eq-ui-list-title Title
        | Duis bibendum nisl quis tellus rutrum, ut aliquet massa interdum. Mauris sit amet nisl augue. Nullam turpis mauris, aliquam in fermentum non, malesuada faucibus orci.
      a.eq-ui-list-secondary-content-body.shades-text-black-hover
        i.mdi.mdi-close-circle.icon.icon-18
    li.eq-ui-list-item.eq-ui-list-avatar.eq-ui-list-truncate.eq-ui-list-secondary-content
      img.circle(src='assets/img/doc/avatar/avatar_2.jpg')
      .eq-ui-list-body
        h6.eq-ui-list-title Title
        | Duis bibendum nisl quis tellus rutrum, ut aliquet massa interdum. Mauris sit amet nisl augue. Nullam turpis mauris, aliquam in fermentum non, malesuada faucibus orci.
      a.eq-ui-list-secondary-content-body.shades-text-black-hover
        i.mdi.mdi-close-circle.icon.icon-18
    li.eq-ui-list-item.eq-ui-list-avatar.eq-ui-list-truncate.eq-ui-list-secondary-content
      img.circle(src='assets/img/doc/avatar/avatar_3.jpg')
      .eq-ui-list-body
        h6.eq-ui-list-title Title
        | Duis bibendum nisl quis tellus rutrum, ut aliquet massa interdum. Mauris sit amet nisl augue. Nullam turpis mauris, aliquam in fermentum non, malesuada faucibus orci.
      a.eq-ui-list-secondary-content-body.shades-text-black-hover
        i.mdi.mdi-close-circle.icon.icon-18
  .eq-ui-card-actions.eq-ui-card-border.center
    a.btn.btn-default.eq-ui-btn-flat.eq-ui-waves.shades-text-black View all
  .eq-ui-card-menu
    ul.right.eq-ui-nav-menu
      li.eq-ui-nav-menu-item-icon
        a.btn.btn-default.eq-ui-btn-flat.eq-ui-btn-fab.eq-ui-btn-menu-fab.eq-ui-waves
          i.mdi.mdi-check-all.icon

<!--  With Table -->
<div class="eq-ui-card eq-ui-card-with-table">
    <div class="eq-ui-card-title">
        <h2 class="eq-ui-card-title-text">List Materials</h2>
    </div>
    <table class="table eq-ui-data-table eq-ui-with-checkbox">
        <thead>
        <tr>
            <th>
                <input type="checkbox" class="eq-ui-input filled-in" id="checkbox-all" />
                <label for="checkbox-all"></label>
            </th>
            <th class="eq-ui-data-table-cell-non-numeric">Material</th>
            <th>Quantity</th>
            <th>Unit price</th>
        </tr>
        </thead>

        <tbody>
        <tr>
            <td>
                <input type="checkbox" class="eq-ui-input filled-in" id="checkbox-1" />
                <label for="checkbox-1"></label>
            </td>
            <td class="eq-ui-data-table-cell-non-numeric">Acrylic (Transparent)</td>
            <td>25</td>
            <td>$2.90</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="eq-ui-input filled-in" id="checkbox-2" />
                <label for="checkbox-2"></label>
            </td>
            <td class="eq-ui-data-table-cell-non-numeric">Plywood (Birch)</td>
            <td>50</td>
            <td>$1.25</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="eq-ui-input filled-in" id="checkbox-3" />
                <label for="checkbox-3"></label>
            </td>
            <td class="eq-ui-data-table-cell-non-numeric">Laminate (Gold on Blue)</td>
            <td>10</td>
            <td>$2.35</td>
        </tr>
        </tbody>
    </table>
    <div class="eq-ui-card-actions eq-ui-card-border">
        <ul class="right eq-ui-nav-menu">
            <li>Rows per page:</li>
            <li><a href="#">10<i class="mdi mdi-menu-down icon icon-right" style="margin-left: 5px;"></i></a></li>
            <li><a>1 - 3 of 100</a></li>
            <li class="eq-ui-nav-menu-item-icon">
                <a class="btn btn-default eq-ui-btn-flat eq-ui-btn-fab eq-ui-btn-menu-fab eq-ui-waves">
                    <i class="mdi mdi-chevron-left icon"></i>
                </a>
            </li>
            <li class="eq-ui-nav-menu-item-icon">
                <a class="btn btn-default eq-ui-btn-flat eq-ui-btn-fab eq-ui-btn-menu-fab eq-ui-waves">
                    <i class="mdi mdi-chevron-right icon"></i>
                </a>
            </li>
        </ul>
    </div>
    <div class="eq-ui-card-menu">
        <ul class="right eq-ui-nav-menu">
            <li class="eq-ui-nav-menu-item-icon">
                <div class="eq-ui-search eq-ui-search-expandable">
                    <input type="text" placeholder="Search">
                    <a class="eq-ui-search-icon-left eq-ui-serach-expandable-show btn btn-default eq-ui-btn-flat eq-ui-btn-fab eq-ui-btn-menu-fab eq-ui-waves">
                        <i class="mdi mdi mdi-magnify icon"></i>
                    </a>
                    <i class="eq-ui-search-clear mdi mdi-close icon icon-right icon-18"></i>
                </div>
            </li>
            <li class="eq-ui-nav-menu-item-icon">
                <a class="btn btn-default eq-ui-btn-flat eq-ui-btn-fab eq-ui-btn-menu-fab eq-ui-waves">
                    <i class="mdi mdi-filter-variant icon"></i>
                </a>
            </li>
            <li class="eq-ui-nav-menu-item-icon">
                <a class="btn btn-default eq-ui-btn-flat eq-ui-btn-fab eq-ui-btn-menu-fab eq-ui-waves">
                    <i class="mdi mdi-dots-vertical icon"></i>
                </a>
            </li>
        </ul>
    </div>
</div>

<!--  With List -->
<div class="eq-ui-card eq-ui-card-with-list">
    <div class="eq-ui-card-title eq-ui-card-border">
        <h2 class="eq-ui-card-title-text">Messages</h2>
    </div>
    <ul class="eq-ui-list eq-ui-hoverable">

        <li class="eq-ui-list-item eq-ui-list-avatar eq-ui-list-truncate eq-ui-list-secondary-content">
            <img class="circle" src="assets/img/doc/avatar/avatar_1.jpg">
            <div class="eq-ui-list-body">
                <h6 class="eq-ui-list-title">Title</h6>
                Duis bibendum nisl quis tellus rutrum, ut aliquet massa interdum. Mauris sit amet nisl augue. Nullam turpis mauris, aliquam in fermentum non, malesuada faucibus orci.
            </div>
            <a class="eq-ui-list-secondary-content-body shades-text-black-hover"><i class="mdi mdi-close-circle icon icon-18"></i></a>
        </li>

        <li class="eq-ui-list-item eq-ui-list-avatar eq-ui-list-truncate eq-ui-list-secondary-content">
            <img class="circle" src="assets/img/doc/avatar/avatar_2.jpg">
            <div class="eq-ui-list-body">
                <h6 class="eq-ui-list-title">Title</h6>
                Duis bibendum nisl quis tellus rutrum, ut aliquet massa interdum. Mauris sit amet nisl augue. Nullam turpis mauris, aliquam in fermentum non, malesuada faucibus orci.
            </div>
            <a class="eq-ui-list-secondary-content-body shades-text-black-hover"><i class="mdi mdi-close-circle icon icon-18"></i></a>
        </li>

        <li class="eq-ui-list-item eq-ui-list-avatar eq-ui-list-truncate eq-ui-list-secondary-content">
            <img class="circle" src="assets/img/doc/avatar/avatar_3.jpg">
            <div class="eq-ui-list-body">
                <h6 class="eq-ui-list-title">Title</h6>
                Duis bibendum nisl quis tellus rutrum, ut aliquet massa interdum. Mauris sit amet nisl augue. Nullam turpis mauris, aliquam in fermentum non, malesuada faucibus orci.
            </div>
            <a class="eq-ui-list-secondary-content-body shades-text-black-hover"><i class="mdi mdi-close-circle icon icon-18"></i></a>
        </li>

    </ul>
    <div class="eq-ui-card-actions eq-ui-card-border center">
        <a class="btn btn-default eq-ui-btn-flat eq-ui-waves shades-text-black">View all</a>
    </div>
    <div class="eq-ui-card-menu">
        <ul class="right eq-ui-nav-menu">
            <li class="eq-ui-nav-menu-item-icon">
                <a class="btn btn-default eq-ui-btn-flat eq-ui-btn-fab eq-ui-btn-menu-fab eq-ui-waves">
                    <i class="mdi mdi-check-all icon"></i>
                </a>
            </li>
        </ul>
    </div>
</div>

// Image
.eq-ui-card.eq-ui-card-image
  .eq-ui-card-title.eq-ui-card-title-expand
  .eq-ui-card-actions
    span.shades-text-white Image.jpg

// Event
.eq-ui-card.eq-ui-card-event.eq-ui-primary-color
  .eq-ui-card-title.eq-ui-card-title-expand
    h4.shades-text-white
      | Featured event:
      br
      | May 24, 2016
      br
      | 7-11pm
  .eq-ui-card-actions.eq-ui-card-border
    a.btn.btn-default.eq-ui-btn-flat.eq-ui-waves.shades-text-white Add to Calendar
    i.mdi.mdi-calendar.icon.icon-right.icon-24.shades-text-white

<!-- Image -->
<div class="eq-ui-card eq-ui-card-image">
    <div class="eq-ui-card-title eq-ui-card-title-expand"></div>
    <div class="eq-ui-card-actions">
        <span class="shades-text-white">Image.jpg</span>
    </div>
</div>

<!-- Event -->
 <div class="eq-ui-card eq-ui-card-event eq-ui-primary-color">
    <div class="eq-ui-card-title eq-ui-card-title-expand">
        <h4 class="shades-text-white">
            Featured event:<br>
            May 24, 2016<br>
            7-11pm
        </h4>
    </div>
    <div class="eq-ui-card-actions eq-ui-card-border">
        <a class="btn btn-default eq-ui-btn-flat eq-ui-waves shades-text-white">Add to Calendar</a>
        <i class="mdi mdi-calendar icon icon-right icon-24 shades-text-white"></i>
    </div>
</div>