Styleguide

Typography

H1 Avenir Heavy 42px (font-weight: 700)

H2 Avenir Heavy 28px (font-weight: 700)

H3 Avenir Heavy 21px (font-weight: 700)

H4 Avenir Heavy 14px (font-weight: 700)

H5 Avenir Heavy 12px (font-weight: 700)
H4 Avenir Heavy 12px (font-weight: 700)

Body Copy Avenir Book 14px - 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.

  • 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
  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
            
            <ul class="styled">
                <li>
                    Item
                </li>
            </ul>
            
            
            <ol class="styled">
                <li>
                    Item
                </li>
            </ol>
            
        

Iconography

icon-logo
icon-account-fill
icon-account
icon-arrow
icon-cart-fill
icon-cart
icon-chat-fill
icon-chat
icon-close
icon-compare
icon-email-fill
icon-email
icon-email-share
icon-facebook
icon-linkedin
icon-phone-fill
icon-phone
icon-pinterest
icon-search_close
icon-search
icon-secure
icon-star
icon-twitter
icon-wishlist-fill
icon-wishlist
icon-visa
icon-mastercard
icon-discover
icon-amex
icon-search-alt
icon-prev
icon-next
icon-print
icon-download
Example Usage
            
                <i class="icon-account"></i>
                <i class="icon-account-fill"></i>
                <i class="icon-amex"></i>Text Beside
            
        

Messages

    • Success! Your order has been submitted.
    • Invalid password or email address provided.
Example Usage
            
            <ul class="messages">
                <li class="success-msg">
                    <ul>
                        <li>
                            Message text
                        <li>
                    <ul>
                </li>
            </ul>
            
        

Forms

  • Required
Example Usage
        
        <form>
            <ul class="form-list">
                <li class="fields">
                    <div class="field">
                        A 50% width field
                    </div>
                    <div class="field">
                        A 50% width field
                    </div>
                <li>
                <li class="field-group">
                    <div class="field">
                        A grouped full-width field
                    </div>
                    <div class="field">
                        A grouped full-width field
                    </div>
                <li>
                ...
                ...
            </ul>
        </form>
        
    

Buttons

Anchor Link Button
Example Usage
        
        <div class="buttons-set">
            <button type="submit" class="button button-default">Default Button<button>
            <button type="submit" class="button button-alternate">Alternate Button<button>
            <a href="#" class="button button-default">Anchor<button>
            <a href="#" class="button link">Button styled like a link<button>
        </div>
        
    

Grid

.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

Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 4 Table Heading 5 Table Heading 6
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5 View Order | Reorder
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5 Table Cell 5
Example Usage
        
        <table class="stacked striped">
            ...
            <tbody>
                <tr>
                    <td data-header="Table Heading">Table Cell<td>
                    <td data-header="Table Heading">Table Cell<td>
                    <td data-header="Table Heading">Table Cell<td>
                </tr>
            </tbody>
        </table>
        
    

Pagination

  1. Previous
  2. 1
  3. 2
  4. 3
  5. 4
  6. 5
  7. Next
Example Usage
        
        <ol class="pagination">
            <li>
                <a href="#">
                    <span class="sr-only">Previous<span>
                    <i class="icon-caret-left"></i>
                <a>
            </li>
            <li>
                <a href="#">
                    1
                <a>
            </li>
            <li>
                <a href="#">
                    ...
                <a>
            </li>
        </ol>
        
    

Tab Style

Tab 1
This is my content 1.
Tab 2
This is my content 2.
Tab 3
This is my content 3.
Tab 4
This is my content 4.
Tab 5
This is my content 5.

Content Grids