Typography

Headings

h1 Heading Level 1

h2 Heading Level 2

h3 Heading Level 3

h4 Heading Level 4

h5 Heading Level 5
h6 Heading Level 6

Example Usage

        
            <h1>h1 Heading Level 1</h1>
        
    

Standard Copy

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Lists

  • This is a list item in an unordered list
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
  • Lists can be nested inside of each other
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is the last list item

Example Usage

        
            <ul>
            <li>This is a list item in an unordered list</li>
            <li>
            Lists can be nested inside of each other
            <ul>
            <li>This is a nested list item</li>
            <li>This is another nested list item in an unordered list</li>
            </ul>
            </li>
            </ul>
        
    
  • This is a clean list with no styles ul.reset-list
  • This is a clean list with no styles #2

Example Usage

        
            <ul class="reset-list">
            <li>This is a clean list with no styles <code>ul.reset-list</code></li>
            <li>This is a clean list with no styles #2</li>
            </ul>
        
    
  1. This is a list item in an ordered list
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
  3. Lists can be nested inside of each other
    1. This is a nested list item
    2. This is another nested list item in an ordered list
  4. This is the last list item

Example Usage

        
            <ol>
            <li>This is a list item in an unordered list</li>
            <li>This is the last list item</li>
            </ol>
        
    

Iconography

Misc

.icon-asc-dsc
.icon-arrow-left
.icon-arrow-right
.icon-search
.icon-account
.icon-bag
.icon-close
.icon-alert

Social

.icon-twitter
.icon-facebook
.icon-instagram
.icon-pinterest
.icon-mail

Credit Cards

.icon-cc-visa
.icon-cc-mastercard
.icon-cc-discover
.icon-cc-amex
.icon-cc-paypal

Example Usage

        
            <i class="icon-star-o"></i>
            <i class="icon-plus-circle"></i>
            <i class="icon-search-plus"></i>Text Beside
        
    

Messages

    • Success! Your order has been submitted.

Example Usage

        
            <ul class="messages">
            <li class="success-msg">
            <ul>
            <li>
            Message text
            <li>
            <ul>
            </li>
            </ul>
        
    
    • Success! Your order has been submitted.
    • Invalid password or email address provided.
    • Please check the email address matches the format of john.doe@domain.com

Example Usage

        
            <ul class="messages">
            <li class="success-msg">
            <ul>
            <li>
            Success! Message text
            <li>
            <ul>
            </li>
            </ul>
            <ul class="messages">
            <li class="error-msg">
            <ul>
            <li>
            Invalid password or email address provided.
            <li>
            <li>
            Please check the email address matches the format of john.doe@domain.com
            <li>
            <ul>
            </li>
            </ul>
        
    

Forms

Basic Example

Individual form controls automatically receive some global styling. All text based input, textarea, and select elements are set to width: 100%; by default. Labels and Placeholders are visible by default. Add the .sr-only helper class to labels that you don't want to display.

Example Usage

        
            <form>
            <ul class="form-list">
            <li>
            <label for="email">Email Address</label>
            <div class="input-box">
            <input type="email" name="email" id="email" class="input-text" placeholder="Email Address" />
            </div>
            </li>
            <li>
            <label for="membership">Membership Type</label>
            <div class="input-box">
            <select class="select" name="membership" id="membership">
            <option value="" selected>Membership Type</option>
            <option value="1">Random Value 01</option>
            <option value="2">Random Value 02</option>
            <option value="3">Random Value 03</option>
            </select>
            </div>
            </li>
            <li class="control">
            <div class="custom-checkbox">
            <input type="checkbox" name="newsletter" id="newsletter" class="checkbox" />
            <label for="newsletter">Newsletter Sign Up</label>
            </div>
            </li>
            </ul>
            <div class="buttons-set">
            <button type="submit" class="button button-default">Submit</button>
            </div>
            </form>
        
    

Inline Form

Add a class of .inline-form to your form to have inline controls. For these inline forms, you can hide the labels using the .sr-only class.

Example Usage

        
            <form class="inline-form">
            <label for="search" class="sr-only">Search</label>
            <div class="input-box">
            <input type="search" name="search" id="search" class="input-text" placeholder="Search" />
            </div>
            <button class="button button-default" type="submit">Submit</button>
            </form>
        
    

Horizontal Form

Add a class of .horizontal-form to your form to have inline labels. Doing so changes .form-list li to behave as grid rows, so no need for .row.

Example Usage

        
            <form class="horizontal-form">
            <ul class="form-list">
            <li>
            <label class="col-md-3" for="email">Email Address</label>
            <div class="input-box col-md-9">
            <input type="email" name="email" id="email" class="input-text" placeholder="Email Address" />
            </div>
            </li>
            <li>
            <label class="col-md-3" for="password">Password</label>
            <div class="input-box col-md-9">
            <input type="password" name="password" id="password" class="input-text" placeholder="Password" />
            </div>
            </li>
            <li>
            <div class="buttons-set col-md-9 pull-right">
            <button type="submit" class="button button-default">Submit</button>
            </div>
            </li>
            </ul>
            </form>
        
    

Grid Form

Add a class of .grid-form to your form to create a grid layout. Doing so changes .form-list li to behave as grid rows, so no need for .row.

Example Usage

        
            <form class="grid-form">
            <ul class="form-list">
            <li>
            <div class="col-md-6">
            <label for="fname" class="sr-only">First Name</label>
            <div class="input-box">
            <input type="text" name="fname" id="fname" class="input-text" placeholder="First Name" />
            </div>
            </div>
            <div class="col-md-6">
            <label for="lname" class="sr-only">Last Name</label>
            <div class="input-box">
            <input type="text" name="lname" id="lname" class="input-text" placeholder="Last Name" />
            </div>
            </div>
            </li>
            <li>
            <div class="col-md-4">
            <label for="address" class="sr-only">Address</label>
            <div class="input-box">
            <input type="text" name="address" id="address" class="input-text" placeholder="Address" />
            </div>
            </div>
            <div class="col-md-4">
            <label for="city" class="sr-only">City</label>
            <div class="input-box">
            <input type="text" name="city" id="city" class="input-text" placeholder="City" />
            </div>
            </div>
            <div class="col-md-4">
            <label for="state" class="sr-only">State</label>
            <div class="input-box">
            <input type="text" name="state" id="state" class="input-text" placeholder="State" />
            </div>
            </div>
            </li>
            </ul>
            <div class="buttons-set">
            <button type="submit" class="button button-default">Submit</button>
            </div>
            </form>
        
    

Disabled States

Adding the disabled attribute will prevent users from interacting with the input. By default disabled inputs are lighter.

Example Usage

        
            <form>
            <ul class="form-list">
            <li>
            <label class="sr-only" for="email">Email Address</label>
            <div class="input-box">
            <input type="email" name="email" id="email" class="input-text" placeholder="Email Address" disabled />
            </div>
            </li>
            </ul>
            </form>
        
    

Styled Checkboxes & Radio Buttons

Custom Styled checkboxes and radio buttons using only CSS. Wrap you the label and input in a div with the class .custom-checkbox or .custom-radio

Example Usage

        
            <form>
            <ul class="form-list">
            <li class="control">
            <div class="custom-checkbox">
            <input type="checkbox" name="salmon" id="salmon" class="checkbox" checked />
            <label for="salmon">Salmon</label>
            </div>
            <div class="custom-checkbox">
            <input type="checkbox" name="chicken" id="chicken" class="checkbox" />
            <label for="chicken">Chicken</label>
            </div>
            <div class="custom-checkbox">
            <input type="checkbox" name="beef" id="beef" class="checkbox" disabled />
            <label for="beef">Beef</label>
            </div>
            </li>
            <li class="control">
            <div class="custom-radio">
            <input type="radio" name="beverage" id="beer" class="radio" checked />
            <label for="beer">Beer</label>
            </div>
            <div class="custom-radio">
            <input type="radio" name="beverage" id="wine" class="radio" />
            <label for="wine">Wine</label>
            </div>
            <div class="custom-radio">
            <input type="radio" name="beverage" id="soda" class="radio" disabled />
            <label for="soda">Soda</label>
            </div>
            </li>
            </ul>
            </form>
        
    

Buttons

Basic Example

Use the .button class on an a, button, or input element. By default buttons are set to be inline-block elements, but transition to be block level elements at the @grid-float-breakpoint. Create additional button styles by using the .button-variant(...) mixin.

Anchor
Anchor
Anchor
Anchor

Example Usage

        
            <div class="buttons-set">
            <button type="submit" class="button button-default">Submit</button>
            <a href="#" class="button button-default">Anchor</a>
            <input type="submit" class="button button-default" value="Submit">
            </div>
        
    

Disabled States

Add the disabled attribute to buttons to prevent a user from interacting with the element. By default disabled buttons appear lighter.

Example Usage

        
            <div class="buttons-set">
            <button type="submit" class="button button-default" disabled>Submit</button>
            <button type="submit" class="button button-alternate" disabled>Cancel</button>
            </div>
        
    

Block Buttons

Add the .button-block class to your button to have it been width: 100%;.

Example Usage

        
            <div class="buttons-set">
            <button type="submit" class="button button-default button-block">Submit</button>
            <button type="submit" class="button button-alternate button-block" disabled>Cancel</button>
            </div>
        
    

Grid

Using the grid system, we can make complex layouts using a minimal amount of markup. Grid columns are based on 12 columns and utilize the same naming convention and functionality as Bootstrap.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Example Usage

        
            <div class="grid-container">
            <div class="row">
            <div class="col-md-4">
            One third
            <div>
            <div class="col-md-4">
            One third
            <div>
            <div class="col-md-4">
            One third
            <div>
            </div>
            </div>
        
    

Tables

Standard Data Table + Responsive Stacking

Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5

Example Usage

        
            <table class="table table-striped table-stacked">
            <colgroup>
            <col/>
            <col/>
            <col/>
            <col/>
            <col/>
            </colgroup>
            <thead>
            <tr>
            <th>Table Heading 1</th>
            <th>Table Heading 2</th>
            <th>Table Heading 3</th>
            <th>Table Heading 4</th>
            <th>Table Heading 5</th>
            </tr>
            </thead>
            <tbody>
            <tr>
            <td data-header="Table Heading 1">Table Cell 1</td>
            <td data-header="Table Heading 2">Table Cell 2</td>
            <td data-header="Table Heading 3">Table Cell 3</td>
            <td data-header="Table Heading 4">Table Cell 4</td>
            <td data-header="Table Heading 5">Table Cell 5</td>
            </tr>
            </tbody>
            </table>
        
    

Product Info Tables

Product tables appear in areas like the Shopping Cart, Checkout Review and My Account Order History. They typically include the information displayed below. Using a few helper classes, we can streamline the layout of these types of tables. Adding a .product-table class, in addition to the .table-stacked class gives us these styles.

Product Price Quantity Total  

Product Name

  • Item specs
  • Item specs
  • Item specs
$1000.00 Update $2000.00

Product Name

  • Item specs
  • Item specs
  • Item specs
$1000.00 Update $2000.00

Example Usage

        
            <table class="table table-stacked product-table">
            <colgroup>
            <col/>
            <col/>
            <col/>
            <col/>
            </colgroup>
            <thead>
            <tr>
            <th>Item</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Total</th>
            </tr>
            </thead>
            <tbody>
            <tr>
            <td>
            <a href="#" class="product-image">
            <img src="http://placehold.it/200x150" />
            </a>
            <div class="product-info">
            <a href="#">Product Name</a>
            <ul>
            <li>Item specs</li>
            <li>Item specs</li>
            <li>Item specs</li>
            </ul>
            </div>
            </td>
            <td data-header="Subtotal">$1000.00</td>
            <td data-header="Quantity">2</td>
            <td data-header="Total">$2000.00</td>
            </tr>
            </tbody>
            </table>
        
    

Pagination

Basic Example

Simple paginate with a customizable display. Use .disabled for unclickable links and .active to indicate the current page.

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5

Example Usage

        
            <ol class="pagination">
            <li class="disabled">
            <span class="previous">Prev</span>
            </li>
            <li class="active">
            <span>1</span>
            </li>
            <li>
            <a href="#">2</a>
            </li>
            <li>
            <a href="#">3</a>
            </li>
            <li>
            <a href="#">4</a>
            </li>
            <li>
            <a href="#">5</a>
            </li>
            <li>
            <a href="#" class="next">Next</a>
            </li>
            </ol>
        
    

Responsive Embeds

  • .responsive-embed-16by9
  • .responsive-embed-4by3

Example Usage

        
            <div class="responsive-embed responsive-embed-16-9">
            <iframe>
            ...
            </iframe>
            </div>
        
    


Accordion

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Products Grid

Image Hover Effect