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.

Heading 1

Heading 1 class

Heading 1 in RTE

Heading 1 class in rte

Heading 2

Heading 2 class

Heading 2 in RTE

Heading 2 class in rte

Heading 3

Heading 3 class

Heading 3 in RTE

Heading 3 class in rte

Heading 4

Heading 4 class

Heading 4 in RTE

Heading 4 class in rte

Heading 5

Heading 5 class

Heading 5 in RTE

Heading 5 class in rte

Heading 6

Heading 6 class

Heading 6 in RTE

Heading 6 class in rte

Unordered List ul (default)
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

Numeric List ol
One
Two
Three
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.
The author of the quote

Label

A tag Button

A tag Button secondary

A tag Button tertiary

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.

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

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.

Styles