Colors
Brand
Text
Backgrounds
Borders

Headings

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six


Paragraphs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam adipisci voluptatibus omnis incidunt doloribus fugiat amet id reprehenderit molestias maiores fuga repellendus qui, harum distinctio quidem repellat quas officia, a dolorum sequi est. Temporibus cumque perspiciatis voluptas nisi adipisci aperiam facilis error, dolorem, nihil ut consectetur, harum excepturi tempore quidem tempora rem illum aliquid necessitatibus! Deserunt non possimus molestiae quam. Accusamus, at quidem eius porro! Animi laboriosam reprehenderit eos velit unde, officia facilis ea sit quibusdam repellendus illum repudiandae accusamus, aspernatur consectetur itaque doloribus assumenda qui dicta, eius nobis laudantium obcaecati iusto delectus doloremque. Magni maxime expedita maiores ex omnis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, quo, incidunt. Illo quae id voluptate, corrupti quaerat commodi quidem aperiam a placeat aut eius consectetur in ipsa sunt debitis molestias est blanditiis quas eveniet nemo corporis labore ipsam assumenda laborum voluptatem. Eos ipsum eius ad commodi eaque quas obcaecati facere.

  • One
  • Two
  • Three
  • Four


Form Elements

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