Headings

Heading one

Heading two

Heading three

Heading four

Heading five

Heading six

RTE Headings

Paragraphs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.

Suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.

Type styles

• Strong
• Emphasis
• Inline link
• Strike
• ^Sup

Default Responsive Table

A .table-wrapper-overflow wrapping class will ensure the table stretches 100% width, and has a horizontal scroll if needed on smaller devices.

The default table is styled with a .table class

              
                <div class="table-wrapper-overflow">
                  <table class="table">
                    ...
                  </table>
                </div>
              
            

Responsive Stacking Table

We add a class of .table-responsive-stack to the table element. On smaller screens, the table will tunr our rows into block-level columns that stack. This is achieved by using data-label on the td elements. These are then converted into the headings/labels for each entry on the column.

              <td data-label="Date">December 22, 2015</td>
            

Default form elements

Form Couple

Wrap two .form__item in a .form__couple element to display them in equal size in one row on larger screens.

Alerts and errors

Example usage:

            
            {% if form.posted_successfully? %}
              <p class="alert alert--success">Thanks for submitting the form</p>
            {% endif %}

            {% if form.errors %}
              <div class="alert alert--error">
                {{ form.errors | default_errors }}
              </div>
            {% endif %}
            
          

This is a standard note

This is a success message

This is an error message.

• Default btn

  Shop Now

• Primary btn btn--primary

  Shop Now

• Secondary btn btn--secondary

  Our Story

• Ghost btn btn--ghost

  Our Story

• Small btn btn--small

  Our Story

• Large btn btn--large

  Our Story

• Stretched btn btn--stretched

  Shop Now

• Full-width btn btn--full

  Shop Now

• Minimum width btn btn--min-width

  Shop Now

• Loading btn btn--loading

  Add to Bag

• Disabled disabled

  Button disabled

Button Group

Button Group Equal Sized

.button-group .button-group--equal-size

Social icons

Payment icons

Header Icons

UI Icons

Other Icons

Default Modal

Fullscreen Modal

Default Collapsible

The default implementation means only one collapsible can be open.

Collapsibles - Keep Multiple Open

This implementations allows multiple collapsibles to be open. Add the data-keep-multiple-collapsibles-open attribute to whatever element is wrapping the collapsibles

              
          <div class="collapsibles-wrapper" data-keep-multiple-collapsibles-open>
            <div class="collapsible">
              <button class="collapsible__heading">
                Collapsible 1<span class="collapsible__icon"></span>
              </button>

              <div class="collapsible__panel">
                <div class="collapsible__panel-content">
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</p>
                </div>
              </div>
            </div>

            ...

            ...

          </div>