Cards

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

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

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

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

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

        <li class="bas-ui-list-item bas-ui-list-avatar bas-ui-list-truncate bas-ui-list-secondary-content">
            <img class="circle" src="/assets/img/avatar/avatar_1.jpg">
            <div class="bas-ui-list-body">
                <h6 class="bas-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="bas-ui-list-secondary-content-body shades-text-black-hover"><i class="mdi mdi-close-circle bas-ui-icon bas-ui-icon-18"></i></a>
        </li>

        <li class="bas-ui-list-item bas-ui-list-avatar bas-ui-list-truncate bas-ui-list-secondary-content">
            <img class="circle" src="/assets/img/avatar/avatar_2.jpg">
            <div class="bas-ui-list-body">
                <h6 class="bas-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="bas-ui-list-secondary-content-body shades-text-black-hover"><i class="mdi mdi-close-circle bas-ui-icon bas-ui-icon-18"></i></a>
        </li>

        <li class="bas-ui-list-item bas-ui-list-avatar bas-ui-list-truncate bas-ui-list-secondary-content">
            <img class="circle" src="/assets/img/avatar/avatar_3.jpg">
            <div class="bas-ui-list-body">
                <h6 class="bas-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="bas-ui-list-secondary-content-body shades-text-black-hover"><i class="mdi mdi-close-circle bas-ui-icon bas-ui-icon-18"></i></a>
        </li>

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

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

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