Web Style Guide

Colors

#090d16

#6d6e71

#d8d8d8

#0973ba

#27aae1

#f6e27f

#f6f6f6

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

Exception: Warning: include(): Filename cannot be empty in /app/qejtaqcekwe74/app/design/frontend/Grabagun/default/Magento_Theme/templates/styleguide/styleguide.phtml on line 62

Messages

Exception: Warning: include(): Filename cannot be empty in /app/qejtaqcekwe74/app/design/frontend/Grabagun/default/Magento_Theme/templates/styleguide/styleguide.phtml on line 62

Forms

Exception: Warning: include(): Filename cannot be empty in /app/qejtaqcekwe74/app/design/frontend/Grabagun/default/Magento_Theme/templates/styleguide/styleguide.phtml on line 62

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

Exception: Warning: include(): Filename cannot be empty in /app/qejtaqcekwe74/app/design/frontend/Grabagun/default/Magento_Theme/templates/styleguide/styleguide.phtml on line 62

Tables

Exception: Warning: include(): Filename cannot be empty in /app/qejtaqcekwe74/app/design/frontend/Grabagun/default/Magento_Theme/templates/styleguide/styleguide.phtml on line 62

Pagination

Exception: Warning: include(): Filename cannot be empty in /app/qejtaqcekwe74/app/design/frontend/Grabagun/default/Magento_Theme/templates/styleguide/styleguide.phtml on line 62

Accordion

Exception: Warning: include(): Filename cannot be empty in /app/qejtaqcekwe74/app/design/frontend/Grabagun/default/Magento_Theme/templates/styleguide/styleguide.phtml on line 62

Product Grid

Exception: Warning: include(): Filename cannot be empty in /app/qejtaqcekwe74/app/design/frontend/Grabagun/default/Magento_Theme/templates/styleguide/styleguide.phtml on line 62

Product List

Exception: Warning: include(): Filename cannot be empty in /app/qejtaqcekwe74/app/design/frontend/Grabagun/default/Magento_Theme/templates/styleguide/styleguide.phtml on line 62