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
- 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
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
|
|
Numeric bullet |
|
Child lists (to match the RTE styles) |
|
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.
Notes and form errors
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
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
the active community
Join our active community for news, tips and
inspiration to get active and live life without limit.
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.