Typography

Heading one

Heading two

Heading three

Heading four

Heading five

Heading six

RTE headings

Display headings

Display 1

Display 2

Display 3

Display 4

Paragraphs

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

• 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

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.

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 %}

Buttons

Default button Default button (no defaults) Button disabled

Wide button (no defaults)

Miscellaneous elements

Horizontal Rules

SVG icons

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

Payment icons

• Liquid error (templates/page.styles line 287): Could not find asset snippets/icon-amazon_payments.liquid
• Liquid error (templates/page.styles line 288): Could not find asset snippets/icon-american_express.liquid
• Liquid error (templates/page.styles line 289): Could not find asset snippets/icon-bitcoin.liquid
• Liquid error (templates/page.styles line 290): Could not find asset snippets/icon-cirrus.liquid
• Liquid error (templates/page.styles line 291): Could not find asset snippets/icon-dankort.liquid
• Liquid error (templates/page.styles line 292): Could not find asset snippets/icon-diners_club.liquid
• Liquid error (templates/page.styles line 293): Could not find asset snippets/icon-discover.liquid
• Liquid error (templates/page.styles line 294): Could not find asset snippets/icon-dogecoin.liquid
• Liquid error (templates/page.styles line 295): Could not find asset snippets/icon-dwolla.liquid
• Liquid error (templates/page.styles line 296): Could not find asset snippets/icon-forbrugsforeningen.liquid
• Liquid error (templates/page.styles line 297): Could not find asset snippets/icon-interac.liquid
• Liquid error (templates/page.styles line 298): Could not find asset snippets/icon-jcb.liquid
• Liquid error (templates/page.styles line 299): Could not find asset snippets/icon-litecoin.liquid
• Liquid error (templates/page.styles line 300): Could not find asset snippets/icon-maestro.liquid
• Liquid error (templates/page.styles line 301): Could not find asset snippets/icon-master.liquid
• Liquid error (templates/page.styles line 302): Could not find asset snippets/icon-paypal.liquid
• Liquid error (templates/page.styles line 303): Could not find asset snippets/icon-visa.liquid

Social icons

General icons

Accordion

• Lorem ipsum

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.

• Repellat Odit Aliquid

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.

• Dolor sit Amet

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.

Tabs

Modal

Responsive Videos

Images