Kitchen Sink

This page is here to show off styles for standard page elements such as typography, form elements, etc.
These are hard coded in an alternate page template file, named page.styles.liquid.

Typography

Headings

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six

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

Rich Text Editor Type

RTE heading one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis non turpis a rhoncus. Morbi vel euismod felis. Quisque volutpat ipsum dolor. Nulla bibendum dignissim dignissim. Suspendisse et tincidunt orci, convallis accumsan massa. Aliquam aliquet fringilla vehicula. Quisque ultricies metus ut fermentum sollicitudin. Morbi commodo massa eu scelerisque aliquam. Aenean volutpat felis sed mauris mollis condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus in ligula nec urna pretium eleifend vitae non orci. Curabitur sit amet nisi porta, faucibus velit nec, ultrices nisi. Nullam et lorem rhoncus, dignissim elit id, consequat arcu. Ut eget magna cursus, eleifend elit id, aliquet quam. Phasellus a rutrum purus.

Suspendisse commodo lacinia lectus quis bibendum. Donec pulvinar pulvinar vulputate. Vivamus eget metus suscipit, tincidunt elit in, posuere ante. Proin pretium massa magna, at dapibus tortor mattis ac. Nunc mauris eros, pulvinar at est in, efficitur lacinia urna. Phasellus tempus eleifend volutpat. Praesent et molestie urna.

RTE heading two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis non turpis a rhoncus. Morbi vel euismod felis. Quisque volutpat ipsum dolor. Nulla bibendum dignissim dignissim. Suspendisse et tincidunt orci, convallis accumsan massa. Aliquam aliquet fringilla vehicula. Quisque ultricies metus ut fermentum sollicitudin. Morbi commodo massa eu scelerisque aliquam. Aenean volutpat felis sed mauris mollis condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus in ligula nec urna pretium eleifend vitae non orci. Curabitur sit amet nisi porta, faucibus velit nec, ultrices nisi. Nullam et lorem rhoncus, dignissim elit id, consequat arcu. Ut eget magna cursus, eleifend elit id, aliquet quam. Phasellus a rutrum purus.

Suspendisse commodo lacinia lectus quis bibendum. Donec pulvinar pulvinar vulputate. Vivamus eget metus suscipit, tincidunt elit in, posuere ante. Proin pretium massa magna, at dapibus tortor mattis ac. Nunc mauris eros, pulvinar at est in, efficitur lacinia urna. Phasellus tempus eleifend volutpat. Praesent et molestie urna.

RTE heading three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis non turpis a rhoncus. Morbi vel euismod felis. Quisque volutpat ipsum dolor. Nulla bibendum dignissim dignissim. Suspendisse et tincidunt orci, convallis accumsan massa. Aliquam aliquet fringilla vehicula. Quisque ultricies metus ut fermentum sollicitudin. Morbi commodo massa eu scelerisque aliquam. Aenean volutpat felis sed mauris mollis condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus in ligula nec urna pretium eleifend vitae non orci. Curabitur sit amet nisi porta, faucibus velit nec, ultrices nisi. Nullam et lorem rhoncus, dignissim elit id, consequat arcu. Ut eget magna cursus, eleifend elit id, aliquet quam. Phasellus a rutrum purus.

Suspendisse commodo lacinia lectus quis bibendum. Donec pulvinar pulvinar vulputate. Vivamus eget metus suscipit, tincidunt elit in, posuere ante. Proin pretium massa magna, at dapibus tortor mattis ac. Nunc mauris eros, pulvinar at est in, efficitur lacinia urna. Phasellus tempus eleifend volutpat. Praesent et molestie urna.

RTE heading four

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis non turpis a rhoncus. Morbi vel euismod felis. Quisque volutpat ipsum dolor. Nulla bibendum dignissim dignissim. Suspendisse et tincidunt orci, convallis accumsan massa. Aliquam aliquet fringilla vehicula. Quisque ultricies metus ut fermentum sollicitudin. Morbi commodo massa eu scelerisque aliquam. Aenean volutpat felis sed mauris mollis condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus in ligula nec urna pretium eleifend vitae non orci. Curabitur sit amet nisi porta, faucibus velit nec, ultrices nisi. Nullam et lorem rhoncus, dignissim elit id, consequat arcu. Ut eget magna cursus, eleifend elit id, aliquet quam. Phasellus a rutrum purus.

Suspendisse commodo lacinia lectus quis bibendum. Donec pulvinar pulvinar vulputate. Vivamus eget metus suscipit, tincidunt elit in, posuere ante. Proin pretium massa magna, at dapibus tortor mattis ac. Nunc mauris eros, pulvinar at est in, efficitur lacinia urna. Phasellus tempus eleifend volutpat. Praesent et molestie urna.

RTE heading five

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis non turpis a rhoncus. Morbi vel euismod felis. Quisque volutpat ipsum dolor. Nulla bibendum dignissim dignissim. Suspendisse et tincidunt orci, convallis accumsan massa. Aliquam aliquet fringilla vehicula. Quisque ultricies metus ut fermentum sollicitudin. Morbi commodo massa eu scelerisque aliquam. Aenean volutpat felis sed mauris mollis condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus in ligula nec urna pretium eleifend vitae non orci. Curabitur sit amet nisi porta, faucibus velit nec, ultrices nisi. Nullam et lorem rhoncus, dignissim elit id, consequat arcu. Ut eget magna cursus, eleifend elit id, aliquet quam. Phasellus a rutrum purus.

Suspendisse commodo lacinia lectus quis bibendum. Donec pulvinar pulvinar vulputate. Vivamus eget metus suscipit, tincidunt elit in, posuere ante. Proin pretium massa magna, at dapibus tortor mattis ac. Nunc mauris eros, pulvinar at est in, efficitur lacinia urna. Phasellus tempus eleifend volutpat. Praesent et molestie urna.

RTE heading six

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse venenatis non turpis a rhoncus. Morbi vel euismod felis. Quisque volutpat ipsum dolor. Nulla bibendum dignissim dignissim. Suspendisse et tincidunt orci, convallis accumsan massa. Aliquam aliquet fringilla vehicula. Quisque ultricies metus ut fermentum sollicitudin. Morbi commodo massa eu scelerisque aliquam. Aenean volutpat felis sed mauris mollis condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus in ligula nec urna pretium eleifend vitae non orci. Curabitur sit amet nisi porta, faucibus velit nec, ultrices nisi. Nullam et lorem rhoncus, dignissim elit id, consequat arcu. Ut eget magna cursus, eleifend elit id, aliquet quam. Phasellus a rutrum purus.

Suspendisse commodo lacinia lectus quis bibendum. Donec pulvinar pulvinar vulputate. Vivamus eget metus suscipit, tincidunt elit in, posuere ante. Proin pretium massa magna, at dapibus tortor mattis ac. Nunc mauris eros, pulvinar at est in, efficitur lacinia urna. Phasellus tempus eleifend volutpat. Praesent et molestie urna.

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

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

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

This is a standard note
This is a success message

This is an error message.

  • Bullets can offer more insight to the error

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

Primary

Normal button

Outlined button

Disabled button

Disabled button

Wide button

Secondary

Normal button

Outlined button

Disabled button

Disabled button

Wide button

Tertiary

Normal button

Outlined button

Disabled button

Disabled button

Wide button

Sized

Mini button

Small button

Normal button

Large button

Mega button

Animated

Loading button

Computer Says No

Other

Link button

Text button

Button with Icon

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


Sections

These may break at times, or not include our latest creations. Talk to a developer to change this.

Slideshow

Hero

Image with text overlay

Use overlay text to give your customers insight into your brand. Select imagery and text that relates to your style and story.

Feature Row

Image with text

Pair large text with an image to give focus to your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.

Call To Action

Section Heading

This section can contain a call to action, and link to a product or page with the button below. All elements are optional.

View More

Featured Collection

Collection List

Featured Collections

Featured Product

Featured Products

Latest Blog Posts