icon arrow-down icon arrow-left icon arrow-right icon arrow-up icon bars logo of american-express logo of visa logo of mastercard logo of paypal icon stripe logo of discover icon credit-card icon mail icon facebook icon rss icon google-plus icon instagram icon linkedin icon phone icon pinterest icon play-btn icon add btn icon search icon shopping-cart icon tag icon close little close icon icon trash icon user icon vimeo icon whatsapp icon youtube icon oxxo icon spei icon twitter icon fancy icon grid view icon list icon like icon tumblr icon map-marker icon chat icon play-circle icon caret-right

Styles cheatsheet

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_cheatsheet.liquid.


Typography

Headings

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
H6 Heading

RTE headings

RTE H1 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

RTE H2 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

RTE H3 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

RTE H4 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

RTE H5 Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

RTE H6 Heading

Paragraph

This is a text link tincidunt quisque tristique. This is underlined text. Sollicitudin eros sapien, ultrices primis. This is Bold Emphasized text volutpat tempor tur duis mattis dapibus, felis amet faucibus. fames etiam sit enim fermentum etiam quam eros velit aptent netus faucibus duis lectus integer malesuada, mattis tempus commodos. Bibendum vehicula nam turpis faucibus. Voluptas sadips ipsums amet untras.Sollicitudin eros sapien, ultrices primis. This is Bold text volutpat tempor tur duis mattis dapibus, felis amet faucibus. fames etiam sit enim fermentum etiam quam eros velit aptent netus faucibus.Duis lectus integer malesuada mattis tempus commodoiam molestie taciti eleifend donec fames platea molestie donec, bibendum vehicula nam turpis faucibus. Quisque eget turpis sem. Phasellus varius tempor tellus.

Donec ut ultrices turpis. Ut eleifend ex lorem. Nunc suscipit euismod augue nec luctus. Sed mollis volutpat lorem, non ornare leo placerat a. Aenean elit augue, rutrum at dui eu, sollicitudin facilisis velit. Ut faucibus est et lacinia ullamcorper. Maecenas eu aliquet nunc.


Type styles


Bloquote

Duis ex mauris, faucibus nec dolor eget, semper tempor neque. Nam eleifend pulvinar lorem, at maximus nulla sollicitudin vitae. Suspendisse ut facilisis ipsum. Aenean laoreet lacus ac elit hendrerit aliquam. In vel mauris condimentum, sollicitudin ante sed, bibendum quam.


Ordered and unordered list

No bullet ul
.no-bullets
  • One
  • Two
  • Three
  • Four
Round bullet ul (default)
.disc
  • One
  • Two
  • Three
  • Four
Square bullet ul
.square
  • One
  • Two
  • Three
  • Four
Inline List ul
.inline-list
  • One
  • Two
  • Three
  • Four
Numeric bullet ol (default)
  1. One
  2. Two
  3. Three
  4. Four
Alpha bullet ol
.alpha
  1. One
  2. Two
  3. Three
  4. Four

Forms

Default form elements


Invisible labels

Add a class of hidden-label 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

Buttons

Default button: .btn
Default button

Secondary button: .btn .btn--secondary
Secondary button

Disabled button: disabled
Button disabled

Full-width button: .btn .btn--full
Wide button (no defaults)


Icons

light


Example svg:

Svg code Icon
<svg class='icon' style='fill:{{ settings.header_social_bar_icons }};'><use xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#arrow-up'></use></svg>
<svg class='icon' style='fill:{{ settings.header_social_bar_icons }};'><use xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#arrow-right'></use></svg>
<svg class='icon' style='fill:{{ settings.header_social_bar_icons }};'><use xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#arrow-down'></use></svg>
<svg class='icon' style='fill:{{ settings.header_social_bar_icons }};'><use xmlns:xlink='http://www.w3.org/1999/xlink' xlink:href='#arrow-left'></use></svg>