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
Buttons
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.