Styles

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

Fonts

Adjust css to match weight will styles for specific project

• Roboto
• Normal
• Normal Italic
• Medium
• Medium Italic
• SemiBold
• Bold
• ExtraBold
• Black
• Black Italic
• Oswald
• Normal
• Medium
• Medium Italic
• SemiBold
• SemiBold Italic
• Bold
• Bold Italic
• ExtraBold
• Black

Heading one

Heading two

Heading three

Heading four

Heading five

Heading six

RTE headings

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

ul (default)	One Two Three Four
Numeric bullet ol (default)	One Two Three 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

Horizontal Label Horizontal Label 2 -- Choose -- Option 1 Option 2 Option 3 Checkbox Label

Invisible labels

Add a class of show-for-sr 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.

First Name Last Name Email

---

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.

Text Field Placeholder Disabled Field Label Search input Text Field (Error) Select Field -- Choose -- Option 1 Option 2 Option 3 Input Group

$

Custom select dropdown, but technically not a select element Liquid error: Could not find asset snippets/custom-select-dropdown.liquid

Checkboxes

Checkbox Field
Checkbox Field
Checkbox Field

Radios

Option1
Option1
Option1

Textarea File Field

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

Button Group

---

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.

Payment icons

Social icons

General icons

Foundation Elements

Dropdown Menu

• Item 1
  • Item 1A
  • Item 1B
  • Item 1C
• Item 2
  • Item 2A
  • Item 2B
  • Item 2C
• Item 3
• Item 4

Drilldown Menu

• One
• Two
  • Two A
  • Two B
  • Two C
  • Two D
• Three
• Four

Responsive Accordion Tabs

• Accordion 1
  Lobortis ex aliquet volutpat condimentum tincidunt nisl metus platea eleifend magnis cubilia proin phasellus risus consectetur molestie id nec ad
• Accordion 2
  Class ex ad aenean quisque augue volutpat morbi sed lacinia Class ex ad aenean quisque augue volutpat morbi sed lacinia
• Accordion 3
  Elit urna mi penatibus fringilla euismod mattis ultricies sociosqu inceptos ligula habitant pulvinar nostra aliquet cras tincidunt massa convallis eu

Accordion

• Accordion 1

  Panel 1. Lorem ipsum dolor

  Nowhere to Go
• Accordion 2

  Panel 2. Lorem ipsum dolor

  Nowhere to Go
• Accordion 3

  Panel 3. Lorem ipsum dolor

  Nowhere to Go

Tabs

• Tab 1
• Tab 2
• Tab 3
• Tab 4
• Tab 5
• Tab 6

Interchange - Background Image

Images

Unsplash Background Image

Unsplash Image

Bgset Using Shopify Image Object (Imgix optional)

Bgset Using Asset Image (Imgix optional)

Asset or Metafield Image (Imgix optional)

Shopify Image Object (Imgix optional)