Styles

This page is here to show off styles for standard page elements such as typography, form elements, and icons. These are hard coded in an alternate page template file, named page.styles.liquid.

---

Typography

Heading one

Heading two

Heading three

Heading four

Heading five

Heading six

Paragraph text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In erat mauris, faucibus quis pharetra sit amet, pretium ac libero. Etiam vehicula eleifend bibendum. Morbi gravida metus ut sapien condimentum sodales mollis augue sodales. Vestibulum quis quam at sem placerat aliquet. Curabitur a felis at sapien ullamcorper fermentum. Mauris molestie arcu et lectus iaculis sit amet eleifend eros posuere. Fusce nec porta orci.

Integer vitae neque odio, a sollicitudin lorem. Aenean orci mauris, tristique luctus fermentum eu, feugiat vel massa. Fusce sem sem, egestas nec vulputate vel, pretium sit amet mi. Fusce ut nisl id risus facilisis euismod. Curabitur et elementum purus. Duis tincidunt fringilla eleifend. Morbi id lorem eu ante adipiscing feugiat. Sed congue erat in enim eleifend dignissim at in nisl. Donec tortor mauris, mollis vel pretium vitae, lacinia nec sapien. Donec erat neque, ullamcorper tincidunt iaculis sit amet, pharetra bibendum ipsum. Nunc mattis risus ac ante consequat nec pulvinar neque molestie. Etiam interdum nunc at metus lacinia non varius erat dignissim. Integer elementum, felis id facilisis vulputate, ipsum tellus venenatis dui, at blandit nibh massa in dolor. Cras a ultricies sapien. Vivamus adipiscing feugiat pharetra.

Accent Text

Accent text can be used in various situations, but shares common traits: font family, weight, letter spacing, and transform (uppercase).

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

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

Blockquotes

Lists

---

Responsive tables

Order	Date	Payment Status	Fulfillment Status	Total
#1001	December 22, 2015	Authorized	Unfulfilled	$43.03
#1002	December 23, 2015	Authorized	Unfulfilled	$44.03
#1003	December 24, 2015	Authorized	Unfulfilled	$45.03
#1004	December 25, 2015	Authorized	Unfulfilled	$46.03
#1005	December 26, 2015	Authorized	Unfulfilled	$47.03
#1006	December 27, 2015	Authorized	Unfulfilled	$48.03

---

Forms

Default form elements

Horizontal Label Horizontal Label 2 -- Choose -- Option 1 Option 2 Option 3 Checkbox Label

Invisible labels

Add a class of hidden-label to a label to visually hide it, while keeping it accessible to screen readers. Use the placeholder attribute as your visible label.

Note: The placeholder attribute only works in IE10+, so invisible labels are disabled in IE9 and below.

First Name Last Name Email

---

Vertical forms (customer, contact, etc)

You cannot add a class directly to most liquid form elements (e.g. {% form 'contact' %}). Instead, wrap the form in a div with the class .form-vertical to achieve the same effect.

Text Field Placeholder Disabled Field Label Text Field (Error) Select Field -- Choose -- Option 1 Option 2 Option 3

Checkboxes

Checkbox Field
Checkbox Field
Checkbox Field

Radios

Option1
Option1
Option1

Textarea File Field

Notes and form errors

Example usage:

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

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

---

Buttons

Default button

Secondary button

Button disabled

Small button Small secondary button

Wide button

---

Miscellaneous elements

Horizontal Rules

Default hr

---

Small hr.hr--small

---

Invisible hr.hr--clear

---

---

SVG icons

Payment icons

Social icons

General icons