Style Guide

Icons

<span class="icon icon-user"></span>
<span class="icon icon-login"></span>
<span class="icon icon-search"></span>
<span class="icon icon-facebook"></span>
<span class="icon icon-twitter"></span>
<span class="icon icon-instagram"></span>
<span class="icon icon-spotify"></span>
<span class="icon icon-vimeo"></span>
<span class="icon icon-expand"></span>
<span class="icon icon-trash"></span>
<span class="icon icon-star"></span>
<span class="icon icon-calendar"></span>
<span class="icon icon-arrow-up"></span>
<span class="icon icon-arrow-down"></span>
<span class="icon icon-flag"></span>
<span class="icon icon-gift"></span>
<span class="icon icon-heart-border"></span>
<span class="icon icon-menu"></span>
<span class="icon icon-plus"></span>
<span class="icon icon-location"></span>
<span class="icon icon-cart"></span>

Heading Line

Heading Line

<h3 class="title heading-line"><span>Heading Line</span></h3>
Test Button
  
Test Button
  
Test Button
  
Test Button
  
Test Button
<div class="btn btn-mini">Test Button</div>
<div class="btn btn-small">Test Button</div>
<div class="btn btn-mini btn-primary">Test Button</div>
<div class="btn btn-small btn-primary">Test Button</div>
<div class="btn btn-ghost">Test Button</div>

Table

Test Head Test Head Test Head Test Head Test Head Test Head
Test Content Test Content Test Content Test Content Test Content Test Content
Test Content Test Content Test Content Test Content Test Content Test Content
<div class="table-wrapper">
    <table class="table">
        <tr>
            <th>Test Head</th>
            <th>Test Head</th>
            <th>Test Head</th>
            <th>Test Head</th>
            <th>Test Head</th>
            <th>Test Head</th>
        </tr>
        <tr>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
        </tr>
        <tr>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
        </tr>
    </table>
</div>

Table with borders

Test Head Test Head Test Head Test Head Test Head Test Head
Test Content Test Content Test Content Test Content Test Content Test Content
Test Content Test Content Test Content Test Content Test Content Test Content
<div class="table-wrapper">
    <table class="table table-bordered">
        <tr>
            <th>Test Head</th>
            <th>Test Head</th>
            <th>Test Head</th>
            <th>Test Head</th>
            <th>Test Head</th>
            <th>Test Head</th>
        </tr>
        <tr>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
        </tr>
        <tr>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
        </tr>
    </table>
</div>

Inverse Table

Test Head Test Head Test Head Test Head Test Head Test Head
Test Content Test Content Test Content Test Content Test Content Test Content
Test Content Test Content Test Content Test Content Test Content Test Content
<div class="table-wrapper">
    <table class="table table-inverse">
        <tr>
            <th>Test Head</th>
            <th>Test Head</th>
            <th>Test Head</th>
            <th>Test Head</th>
            <th>Test Head</th>
            <th>Test Head</th>
        </tr>
        <tr>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
        </tr>
        <tr>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
        </tr>
    </table>
</div>

Inverse Table with borders

Test Head Test Head Test Head Test Head Test Head Test Head
Test Content Test Content Test Content Test Content Test Content Test Content
Test Content Test Content Test Content Test Content Test Content Test Content
<div class="table-wrapper">
    <table class="table table-inverse table-bordered">
        <tr>
            <th>Test Head</th>
            <th>Test Head</th>
            <th>Test Head</th>
            <th>Test Head</th>
            <th>Test Head</th>
            <th>Test Head</th>
        </tr>
        <tr>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
        </tr>
        <tr>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
            <td>Test Content</td>
        </tr>
    </table>
</div>

Cart Table

Item Qty Price Subtotal
Product Name Product Name
$100.00 100.00
<div class="cart table-wrapper">
    <table class="cart items data table">
        <thead>
            <tr>
                <th class="col item">Item</th>
                <th class="col qty">Qty</th>
                <th class="col price">Price</th>
                <th class="col subtotal">Subtotal</th>
            </tr>
        </thead>
        <tbody class="cart item">
            <tr class="item-info">
                <td data-th="Item" class="col item">
                    <strong class="product-item-top-name"><a href="#">Product Name</a></strong>
                    <a href="#" title="Product Name" class="product-item-photo">
                        <span class="product-image-container">
                            <span class="product-image-wrapper">
                                <img class="product-image-photo" src="#" alt="Product Name"></span>
                        </span>
                    </a>
                    <div class="product-item-details">
                        <strong class="product-item-name"><a href="#">Product Name</a></strong>
                    </div>
                </td>
                <td class="col qty" data-th="Qty">
                    <div class="field qty">
                        <label class="label">
                            <span>Qty</span>
                        </label>
                        <div class="control qty">
                            <input value="1" type="number" title="Qty" class="input-text qty">
                        </div>
                    </div>
                </td>
                <td class="col price" data-th="Price">
                    <span>
                        <span class="cart-price">
                            <span class="price">$100.00</span>
                        </span>
                    </span>
                </td>
                <td class="col subtotal" data-th="Subtotal">
                    <span>
                        <span class="cart-price">
                            <span class="price">100.00</span>
                        </span>
                    </span>
                </td>
            </tr>
            <tr class="item-actions">
                <td colspan="100">
                    <div class="actions-toolbar">
                        <a class="action action-edit btn-primary btn btn-mini" href="#">
                            <span>Edit</span>
                        </a>
                        <a href="#" class="action action-delete btn-primary btn btn-mini">
                            <span>Remove item</span>
                        </a>        
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>