5.1 Typography

Headers and Body Text

Heading One

Heading Two

Heading Three

Heading Four

Heading Five

Heading Six

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.

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

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

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

Blockquotes

Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

The author of the quote

List Types

5.2 Forms

Vertical

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.

Horizontal (default)

Invisible Labels

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

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

Input Groups

5.3 Buttons

5.4 Notes and Errors

Use notes as helpers on forms, or brief messages to your customers.

5.5 Misc. Elements

Horizontal Rules

Default

hr

Invisible

hr.hr--clear

Small

hr.hr--small

5.6 Icon Font

Icon font for social and payment icons, specific to each theme. Import assets/icons.json into IcoMoon to make any changes to the set. These icons are bulletproof, meaning they can have text fallbacks when @font-face isn't supported.