{{ page.title }}

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 one

Heading two

Heading three

Heading four

Heading five

Heading six

---

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.

---

Blockquotes

Lists

---

Responsive 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

---

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.

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

    .errors {
      border-color: red;
      background-color: lightred;
    }
  

Example usage:

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

    {% raw %}{% if form.errors %}{% endraw %}
      <div class="note errors">
        {% raw %}{{ form.errors | default_errors }}{% endraw %}
      </div>
    {% raw %}{% endif %}{% endraw %}
  

---

Buttons

Primary button

Secondary button

Button disabled

Small Button

---

Default hr

---

Invisible hr.hr--clear

---