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, named page.styles.liquid.

Read more in Slate's documentation.


Typography

# H Tags

Heading one

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.

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.

Heading two

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

Heading three

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.

Heading four

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.

Heading five

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.

Heading six

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.

# Type styles

# 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

ul (default)
  • One
  • Two
  • Three
  • Four
Numeric bullet ol (default)
  1. One
  2. Two
  3. Three
  4. Four
Child lists (to match the RTE styles)
  • 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

# Helpers

Class Property Result
xxs --text-xxs

Lorem

xs --text-xs

Lorem

sm --text-sm

Lorem

md --text-md

Lorem

lg --text-lg

Lorem

xl --text-xl

Lorem

xxl --text-xxl

Lorem

xxxl --text-xxxl

Lorem


Components

# Loading

# Swatches

# Pagination

# Carousel

# Breadcrumbs

# Tabs

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.
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.

# Accordion


Forms

# Default form elements

# Checkboxes

# Radios

# Misc

# Notes and form errors

This is a standard note

This is a success message

This is an error message.

  • Bullets can offer more insight to the error

Buttons

Default button

Secondary button

Tertiary button

Button disabled

Secondary button disabled

Tertiary button

Wide button (no defaults)

Full button (no defaults)


SVG icons

Upload svg files into the assets/icons directory and then render out the images using the icons snippet.
Parameters include:

Parameter Usage Default
icon Name of svg file None
direction Applies a rotation. Accepted values are up, right, down, left None
width Width in px auto
height Height in px 20
alt Image alt attribute None

# Payment icons

  • Amazon Payments
  • American Express
  • Apple Pay
  • Bitcoin
  • Discover
  • Master
  • PayPal
  • Visa

# Social icons

  • Facebook
  • Instagram
  • Pinterest
  • Snapchat
  • Twitter
  • YouTube

# General icons

  • login/register
  • Wishlist
  • Search
  • Stores
  • Open
  • Cart
  • Bag
  • Close
  • Remove
  • Add