Type Hierarchy

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.

Classed headings

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six

RTE headings

RTE heading one

RTE heading two

RTE heading three

RTE heading four

RTE heading five
RTE heading six

Signature Headings

Signature Headline

Stylish Divider

Smaller Version

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.

Paragraph Size Medium

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.

Paragraphs Size Small

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.

Type styles

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

  • One
  • Two
  • Three
  • Four
  • Hochwertiger und wasserabweisender Canvas
  • Immer modischer Look durch austauschbares Flap (vegan)
  • Zwei Flaps in jedem Modell enthalten (schwarzes Flap + jeweilige Farbe), bei schwarzen Modellen nur schwarzer Flap enthalten
  • Extra Stauraum für Laptop (15", L: 32cm, B: 27cm), Leitzordner und Trinkflasche
  • Trolleyhalterung auf der Rückseite
  • Maße: 28 cm (L), 40 cm (H), 15 cm (B); Volumen: 17L
  • Kostenfreier Versand
  • 30 Tage Retour
  • Family owned production
  1. One
  2. Two
  3. Three
  4. Four
  • 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 Flex-Based 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

Horicontal forms

Checkboxes
Radios
This is a standard note
This is a success message

This is an error message.

  • Bullets can offer more insight to the error

Buttons

Button

Button Medium

Button Small

Secondary Button

Button Disabled

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