Cards

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

With Image

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