Web Style Guide

Typography

Headings

Heading 1

Example Text


Heading 2

Example Text


Heading 3

Example Text


Heading 4

Example Text


Heading 5

Example Text

Heading 6

Example Text

Example Usage

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

  1. <ul>
  2. <li>This is a list item in an unordered list</li>
  3. <li>
  4. Lists can be nested inside of each other
  5. <ul>
  6. <li>This is a nested list item</li>
  7. <li>This is another nested list item in an unordered list</li>
  8. </ul>
  9. </li>
  10. </ul>
  • This is a clean list with no styles ul.reset-list
  • This is a clean list with no styles #2

Example Usage

  1. <ul class="reset-list">
  2. <li>This is a clean list with no styles <code>ul.reset-list</code></li>
  3. <li>This is a clean list with no styles #2</li>
  4. </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

  1. <ol>
  2. <li>This is a list item in an unordered list</li>
  3. <li>This is the last list item</li>
  4. </ol>

Colors

Colors

Base Gray
#323232

Gray
#464646

Gray
#979790

Gray
#B4B4AC

White
#ECECE7

Brand Primary
#43B02A

Brand Secondary
#2D9E13

Brand Tertiary
#FEDB00

Iconography

Misc

.icon-play
.icon-bag
.icon-batching-now
.icon-search
.icon-mobile-menu
.icon-star
.icon-star-outlined

Arrow/Angle Indicators

.icon-arrow-dropdown
.icon-close-modal
.icon-close
.icon-plus
.icon-minus

Social

.icon-snapchat
.icon-facebook
.icon-instagram
.icon-pinterest
.icon-twitter
.icon-youtube

Example Usage

  1. <span class="icon-pinterest"></span>
  2. <span class="icon-facebook"></span>
  3. <span class="icon-twitter"></span>

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.
    • Welcome!
    • Invalid password or email address provided.
    • Please check the email address matches the format of [email protected]

Example Usage

                                
<ul class="messages">
    <li class="success-msg">
        <ul>
            <li>Success! Your order has been submitted.</li>
        </ul>
    </li>
    <li class="note-msg">
        <ul>
            <li>Welcome!</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 [email protected]</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 action="" method="post">
    <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 action="" method="post" 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 action="" method="post" class="horizontal-form">
    <ul class="form-list">
        <li>
            <label class="col-sm-3" for="email">Email Address</label>
            <div class="input-box col-sm-9">
                <input type="email" name="email" id="email" class="input-text" placeholder="Email Address" />
            </div>
        </li>
        <li>
            <label class="col-sm-3" for="password">Password</label>
            <div class="input-box col-sm-9">
                <input type="password" name="password" id="password" class="input-text" placeholder="Password" />
            </div>
        </li>
        <li>
            <div class="buttons-set col-sm-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 action="" method="post" class="grid-form">
    <ul class="form-list">
        <li>
            <div class="col-sm-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-sm-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-sm-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-sm-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-sm-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 action="" method="post">
    <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 action="" method="post">
    <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

Standard Buttons

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

Small Buttons

Example Usage

                    
<div class="buttons-set">
    <button type="submit" class="button button-default button-small">Default Small Button</button>
    <button type="submit" class="button button-alternate button-small">Alternate Small Button</button>
</div>
                    
                
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

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>
</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>
</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-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-8
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-6
.col-sm-6

Example Usage

                    
<div class="grid-container">
    <div class="row">
        <div class="col-sm-4">
            One third
        </div>
        <div class="col-sm-4">
            One third
        </div>
        <div class="col-sm-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 Cell 1 Table Cell 2 Table Cell 3 Table Cell 4
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4

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.

Item Price Quantity Total
Product Name
  • Item specs
  • Item specs
  • Item specs
$1000.00 2 $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. Use .current to indicate the current page.

Example Usage

                                
<div class="toolbar">
    <div class="toolbar">
        <ul class="items pages-items" aria-labelledby="paging-label">
            <li class="item pages-item-previous">
                <a class="action  previous" href="#" title="Previous">
                    <span class="label">Page</span>
                    <span>Previous</span>
                </a>
            </li>
            <li class="item">
                <a href="#" class="page">
                    <span class="label">Page</span>
                    <span>1</span>
                </a>
            </li>
            <li class="item current">
                <strong class="page">
                    <span class="label">You're currently reading page</span>
                    <span>2</span>
                </strong>
            </li>
            <li class="item">
                <a href="#" class="page">
                    <span class="label">Page</span>
                    <span>3</span>
                </a>
            </li>
            <li class="item">
                <a href="#" class="page">
                    <span class="label">Page</span>
                    <span>4</span>
                </a>
            </li>
            <li class="item">
                <a href="#" class="page">
                    <span class="label">Page</span>
                    <span>5</span>
                </a>
            </li>
            <li class="item pages-item-next">
                <a class="action  next" href="#" title="Next">
                    <span class="label">Page</span>
                    <span>Next</span>
                </a>
            </li>
        </ul>
    <div>
<div>
                                
                            

Responsive Embeds

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

Example Usage

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

Tabs

Product Info Tabs

Aliquam cursus magna eleifend odio blandit, id pretium felis tincidunt. Aliquam nec luctus eros. Aliquam nisi purus, cursus eu est fringilla, rhoncus ultricies enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer dictum ex ut diam luctus ornare. Duis sed lacus sit amet mauris vestibulum blandit vel quis tortor. Phasellus gravida iaculis ex vel pharetra. Quisque sagittis eros massa, eget dignissim massa suscipit scelerisque. Quisque pretium augue id turpis varius, viverra hendrerit turpis dapibus. Donec pulvinar, ante a commodo vehicula, ligula augue condimentum odio, luctus blandit ante ex ut elit. Vestibulum finibus ligula quis ex varius suscipit. Nunc urna eros, maximus vitae pharetra non, blandit eu tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum neque eget mauris vulputate scelerisque. Sed hendrerit mi nec neque pulvinar vestibulum. Nunc laoreet eu turpis sed rhoncus. Curabitur non sagittis mauris. Vivamus nunc felis, facilisis ac vulputate sed, pulvinar ut ipsum. Sed ipsum sapien, lobortis ut dignissim molestie, tincidunt vel sapien. Maecenas nec luctus leo. Nunc ac pulvinar nibh. Aenean tempor ac sem sit amet egestas. Pellentesque orci leo, ultrices vel ligula at, congue accumsan ante. Ut gravida suscipit sapien, sed feugiat risus condimentum a. Cras a elit dui. Mauris vitae orci quis urna finibus tempor lacinia id diam. Praesent lobortis odio sed maximus volutpat. Phasellus diam orci, sodales in leo malesuada, auctor egestas diam.

Example Usage

            
<div class="product info detailed">
    <div id="productInfoTabs" class="product data items">
        <div id="tab-label-1" class="data item title" data-role="collapsible">
        <a id="tab-label-1-title" class="data switch" tabindex="-1" href="#1" data-toggle="switch">
            Title 1
        </a>
    </div>
    <div id="tab-label-2" class="data item title" data-role="collapsible">
        <a id="tab-label-2-title" class="data switch" tabindex="-1" href="#2" data-toggle="switch">
            Title 2
        </a>
    </div>
        <div id="1" class="data item content" data-role="content">
            <p>Tab 1 Content...</p>
        </div>
        <div id="2" class="data item content" data-role="content">
            <p>Tab 2 Content...</p>
        </div>
    </div>
</div>
<script type="text/javascript" xml="space">
    require([
        "jquery",
        "mage/tabs"
    ], function($){
        $(function () {
            $("#productInfoTabs").tabs();
        });
    });
</script>
            
        

Accordion

Content 1
Title 2
Content 2
Title 3
Content 3

Example Usage

  1. <div id="element-accordion">
  2. <div data-role="collapsible">
  3. <div data-role="trigger"><span>Title 1</span></div>
  4. </div>
  5. <div data-role="content">
  6. <div class="accordion-content-wrapper">Content 1</div>
  7. </div>
  8. <div data-role="collapsible">
  9. <div data-role="trigger"><span>Title 2</span></div>
  10. </div>
  11. <div data-role="content">
  12. <div class="accordion-content-wrapper">Content 2</div>
  13. </div>
  14. <div data-role="collapsible">
  15. <div data-role="trigger"><span>Title 3</span></div>
  16. </div>
  17. <div data-role="content">
  18. <div class="accordion-content-wrapper">Content 3</div>
  19. </div>
  20. </div>
  21. <script>
  22. require(
  23. [
  24. 'jquery',
  25. ],
  26. function($) {
  27. $("#element-accordion").accordion({ multipleCollapsible: true});
  28. }
  29. );
  30. </script>

Calendar

Example Usage

                                
<form action="" method="post">
    <label for="date" class="sr-only">Date</label>
    <div class="input-box">
        <input name="date" id="date" class="input-text calendar" placeholder="Date"/>
    </div>
</form>
<script>
    require(
        [
            'jquery',
            "mage/calendar"
        ],
        function($) {
            $(".calendar").calendar();
        }
    );
</script>

                                
                            

Modals

Example Usage

                
<button type="button" id="popup-modal-trigger" class="btn btn-primary">Open Popup Model</button>
<div id="popup-modal">
    <h1>Title</h1>
    <div>Content.....</div>
</div>
<script>
    require(
        [
            'jquery',
            "mage/calendar"
        ],
        function($, modal) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                title: 'Popup Modal Title',
                buttons: [{
                    text: $.mage.__('Continue'),
                    class: '',
                    click: function () {
                        this.closeModal();
                    }
                }]
            };

            var popup = modal(options, $('#popup-modal'));

            $('#popup-modal-trigger').on('click',function(){
                $('#popup-modal').modal('openModal');
            });
        }
    );
</script>

                
            

Tooltip

Default Tooltip - Bottom Position

Show default tooltip
This is a tooltip - default position

Tooltip - Top Position

Show top tooltip
This is a tooltip - top position

Tooltip - Left Position

Show left tooltip
This is a tooltip - left position

Tooltip - Right Position

Show right tooltip
This is a tooltip - right position

Example Usage

            
<div class="tooltip wrapper">
    <span class="tooltip toggle">Show default tooltip</span>
    <div class="tooltip content">
        <span>This is a tooltip - default position</span>
    </div>
</div>
<div class="tooltip wrapper top">
    <span class="tooltip toggle">Show top tooltip</span>
    <div class="tooltip content">
        <span>This is a tooltip - top position</span>
    </div>
</div>
            
        

Product Grid

Product List