Style Guide
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 containing the section main-page-styles.liquid.
Typography
Headline 1
Headline 2
Headline 3
Headline 4
Headline 5
Headline 6
Paragraphs
Extra large
Large
Medium
Standard
Small
Bold (Faro)
Medium (Faro)
Regular (Faro)
Regular (Nib)
Capitalised
Uppercased
Type styles
- Strong
- Emphasis
- Inline link
Strike- Sup
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
Lists
|
|
Numeric bullet
|
|
Child lists (to match the RTE styles) |
|
Rich text styles
Headline 2
Lorem, ipsum dolor sit amet strong text elit. Necessitatibus dolore beatae inline link molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!
Lorem, ipsum dolor sit amet strong text elit. Necessitatibus dolore beatae inline link molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!
Headline 3
Lorem, ipsum dolor sit amet strong text elit. Necessitatibus dolore beatae inline link molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!
Lorem, ipsum dolor sit amet strong text elit. Necessitatibus dolore beatae inline link molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!
Headline 4
Lorem, ipsum dolor sit amet strong text elit. Necessitatibus dolore beatae inline link molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!
Lorem, ipsum dolor sit amet strong text elit. Necessitatibus dolore beatae inline link molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!
Headline 5
Lorem, ipsum dolor sit amet strong text elit. Necessitatibus dolore beatae inline link molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!
Lorem, ipsum dolor sit amet strong text elit. Necessitatibus dolore beatae inline link molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!
Headline 6
Lorem, ipsum dolor sit amet strong text elit. Necessitatibus dolore beatae inline link molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!
Lorem, ipsum dolor sit amet strong text elit. Necessitatibus dolore beatae inline link molestias voluptas cumque facilis, recusandae omnis, nihil magni culpa tenetur quo aperiam, earum nisi at pariatur impedit voluptates quia!
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
- One
- Two
- Three, with child list
- First sub item
- Second sub item
- Third sub item, with child list
- Third level item
- Another third level item
- Four
Default 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 |
Columns
Forms
Buttons
Badges
Color schemes
Primary
Lorem dolor sit amet consectetur adipisicing elit. Eos laboriosam amet quibusdam dolor? Consectetur doloremque placeat, fuga recusandae quod aspernatur et incidunt. Architecto, dolorem? Placeat, suscipit? Soluta beatae cum tempora.
Secondary
Lorem dolor sit amet consectetur adipisicing elit. Eos laboriosam amet quibusdam dolor? Consectetur doloremque placeat, fuga recusandae quod aspernatur et incidunt. Architecto, dolorem? Placeat, suscipit? Soluta beatae cum tempora.
Tertiary
Lorem dolor sit amet consectetur adipisicing elit. Eos laboriosam amet quibusdam dolor? Consectetur doloremque placeat, fuga recusandae quod aspernatur et incidunt. Architecto, dolorem? Placeat, suscipit? Soluta beatae cum tempora.
Quaternary
Lorem dolor sit amet consectetur adipisicing elit. Eos laboriosam amet quibusdam dolor? Consectetur doloremque placeat, fuga recusandae quod aspernatur et incidunt. Architecto, dolorem? Placeat, suscipit? Soluta beatae cum tempora.
Apple green
Lorem dolor sit amet consectetur adipisicing elit. Eos laboriosam amet quibusdam dolor? Consectetur doloremque placeat, fuga recusandae quod aspernatur et incidunt. Architecto, dolorem? Placeat, suscipit? Soluta beatae cum tempora.
Light sand
Lorem dolor sit amet consectetur adipisicing elit. Eos laboriosam amet quibusdam dolor? Consectetur doloremque placeat, fuga recusandae quod aspernatur et incidunt. Architecto, dolorem? Placeat, suscipit? Soluta beatae cum tempora.
Yellow green
Lorem dolor sit amet consectetur adipisicing elit. Eos laboriosam amet quibusdam dolor? Consectetur doloremque placeat, fuga recusandae quod aspernatur et incidunt. Architecto, dolorem? Placeat, suscipit? Soluta beatae cum tempora.
Yellow
Lorem dolor sit amet consectetur adipisicing elit. Eos laboriosam amet quibusdam dolor? Consectetur doloremque placeat, fuga recusandae quod aspernatur et incidunt. Architecto, dolorem? Placeat, suscipit? Soluta beatae cum tempora.
Blue
Lorem dolor sit amet consectetur adipisicing elit. Eos laboriosam amet quibusdam dolor? Consectetur doloremque placeat, fuga recusandae quod aspernatur et incidunt. Architecto, dolorem? Placeat, suscipit? Soluta beatae cum tempora.
Gray
Lorem dolor sit amet consectetur adipisicing elit. Eos laboriosam amet quibusdam dolor? Consectetur doloremque placeat, fuga recusandae quod aspernatur et incidunt. Architecto, dolorem? Placeat, suscipit? Soluta beatae cum tempora.
Background schemes
Dark green
Lorem dolor sit amet consectetur adipisicing elit. Eos laboriosam amet quibusdam dolor? Consectetur doloremque placeat, fuga recusandae quod aspernatur et incidunt. Architecto, dolorem? Placeat, suscipit? Soluta beatae cum tempora.
Green
Lorem dolor sit amet consectetur adipisicing elit. Eos laboriosam amet quibusdam dolor? Consectetur doloremque placeat, fuga recusandae quod aspernatur et incidunt. Architecto, dolorem? Placeat, suscipit? Soluta beatae cum tempora.
Light sand
Lorem dolor sit amet consectetur adipisicing elit. Eos laboriosam amet quibusdam dolor? Consectetur doloremque placeat, fuga recusandae quod aspernatur et incidunt. Architecto, dolorem? Placeat, suscipit? Soluta beatae cum tempora.
Sea green
Lorem dolor sit amet consectetur adipisicing elit. Eos laboriosam amet quibusdam dolor? Consectetur doloremque placeat, fuga recusandae quod aspernatur et incidunt. Architecto, dolorem? Placeat, suscipit? Soluta beatae cum tempora.
Turquoise
Lorem dolor sit amet consectetur adipisicing elit. Eos laboriosam amet quibusdam dolor? Consectetur doloremque placeat, fuga recusandae quod aspernatur et incidunt. Architecto, dolorem? Placeat, suscipit? Soluta beatae cum tempora.
Collapsibles
SVG icons
Custom icosn (Line Awesome)
CBT icons
Payment icons
Social icons