Overline

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 1

HEADING 2

HEADING THREE

HEADING FOUR

HEADING FIVE
HEADING SIX

RTE headings

RTE heading one

RTE heading two

RTE heading three

RTE heading four

RTE heading five
RTE heading six

Paragraphs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

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

Product title

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

Responsive tables

8/S

10/S

12/M

14/M

16/L

18/L

Bust (cm)

87 92 97 102 107 112

Waist (cm)

70 75 80 85 90 95

Hips (cm)

95 100 105 110 115 120



8/S

10/S

12/M

14/M

16/L

18/L

Bust (in)

34¼ 36¼ 38¼ 40¼ 42¼ 44¼

Waist (in)

27¾ 29¾ 31¾ 33¾ 35¾ 37¾

Hips (in)

37½ 39½ 41½ 43½ 45½ 47½

Forms

Default form elements

Invisible labels

Add a class of label-hidden 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.


Vertical forms (customer, contact, etc)

No styles for this exist in Slate, but are used in most themes. Style elements inside a form/div with class `form-vertical` to see your styles here.

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.

Checkboxes

Radios

Notes and form errors

No note styles exist in Slate but are commonly added to handle form errors. Example styles:

    .note {
      padding: 20px;
      border: 1px solid #ccc;
    }

    .note--success {
      border-color: green;
      background-color: lightgreen;
    }

    .note--error {
      border-color: red;
      background-color: lightred;
    }
  

Example usage:

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

    {% if form.errors %}
      <div class="note note--error">
        {{ form.errors | default_errors }}
      </div>
    {% endif %}
  
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

Default button (no defaults)

Button disabled

Wide button (no defaults)


Miscellaneous elements

Horizontal Rules

There are no default hr styles in Slate, but these are common ones to add.

Default hr


Invisible hr.hr--clear


Small hr.hr--small



SVG icons

Read more about using, creating, and editing SVG icons in Slate's documentation.

Payment icons

  • Liquid error (templates/page.styles line 421): Could not find asset snippets/icon-amazon_payments.liquid
  • Liquid error (templates/page.styles line 422): Could not find asset snippets/icon-american_express.liquid
  • Liquid error (templates/page.styles line 423): Could not find asset snippets/icon-bitcoin.liquid
  • Liquid error (templates/page.styles line 424): Could not find asset snippets/icon-cirrus.liquid
  • Liquid error (templates/page.styles line 425): Could not find asset snippets/icon-dankort.liquid
  • Liquid error (templates/page.styles line 426): Could not find asset snippets/icon-diners_club.liquid
  • Liquid error (templates/page.styles line 427): Could not find asset snippets/icon-discover.liquid
  • Liquid error (templates/page.styles line 428): Could not find asset snippets/icon-dogecoin.liquid
  • Liquid error (templates/page.styles line 429): Could not find asset snippets/icon-dwolla.liquid
  • Liquid error (templates/page.styles line 430): Could not find asset snippets/icon-forbrugsforeningen.liquid
  • Liquid error (templates/page.styles line 431): Could not find asset snippets/icon-interac.liquid
  • Liquid error (templates/page.styles line 432): Could not find asset snippets/icon-jcb.liquid
  • Liquid error (templates/page.styles line 433): Could not find asset snippets/icon-litecoin.liquid
  • Liquid error (templates/page.styles line 434): Could not find asset snippets/icon-maestro.liquid
  • Liquid error (templates/page.styles line 435): Could not find asset snippets/icon-master.liquid
  • Liquid error (templates/page.styles line 436): Could not find asset snippets/icon-paypal.liquid
  • Liquid error (templates/page.styles line 437): Could not find asset snippets/icon-visa.liquid

Social icons

General icons

  • Liquid error (templates/page.styles line 454): Could not find asset snippets/icon-arrow-down.liquid