Style Guide

Shadow

Opacity

10
15
20
30
40
50
60
70
75
80
90

Images

Image Wrapper 1:1
Image Wrapper 16:9
Image Wrapper 3:2
Image Wrapper 4:3

Headings

All HTML headings, <h1> through <h6>, are available.
All H1 Headings

Heading h1

All H2 Headings

Heading h2

All H3 Headings

Heading h3

All H4 Headings

Heading h4

All H5 Headings
Heading h5
All H6 Headings
Heading h6
Heading h1 through Heading h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.
Title 3xl

The quick brown fox jumps over the lazy dog.

Title 2xl

The quick brown fox jumps over the lazy dog.

Title xl

The quick brown fox jumps over the lazy dog.

Title lg

The quick brown fox jumps over the lazy dog.

Title md

The quick brown fox jumps over the lazy dog.

Title sm

The quick brown fox jumps over the lazy dog.

Title xs

The quick brown fox jumps over the lazy dog.

Font [Title]

The quick brown fox jumps over the lazy dog.

Text sizing

Text 2xl
The quick brown fox jumps over the lazy dog.
Text xl
The quick brown fox jumps over the lazy dog.
Text lg
The quick brown fox jumps over the lazy dog.
Text base
The quick brown fox jumps over the lazy dog.
Text sm
The quick brown fox jumps over the lazy dog.
Text xs
The quick brown fox jumps over the lazy dog.

Font style

Italic
The quick brown fox jumps over the lazy dog.
Not italic
The quick brown fox jumps over the lazy dog.

Font weight

Font Weight [Extralight]
The quick brown fox jumps over the lazy dog.
Font Weight [Light]
The quick brown fox jumps over the lazy dog.
Font Weight [Normal]
The quick brown fox jumps over the lazy dog.
Font Weight [Medium]
The quick brown fox jumps over the lazy dog.
Font Weight [Semibold]
The quick brown fox jumps over the lazy dog.
Font Weight [Bold]
The quick brown fox jumps over the lazy dog.
Font Weight [Extrabold]
The quick brown fox jumps over the lazy dog.
Font Weight [Black]
The quick brown fox jumps over the lazy dog.

Letter spacing

Letters Tighter
The quick brown fox jumps over the lazy dog.
Letters Tight
The quick brown fox jumps over the lazy dog.
Letters Normal
The quick brown fox jumps over the lazy dog.
Letters Loose
The quick brown fox jumps over the lazy dog.
Letters Looser
The quick brown fox jumps over the lazy dog.

Line height

Leading None
Was ist die Welt? Ein ewiges Gedicht,
Daraus der Geist der Gottheit strahlt und glüht,
Daraus der Wein der Weisheit schäumt und sprüht,
Daraus der Laut der Liebe zu uns spricht
Leading Tighter
Was ist die Welt? Ein ewiges Gedicht,
Daraus der Geist der Gottheit strahlt und glüht,
Daraus der Wein der Weisheit schäumt und sprüht,
Daraus der Laut der Liebe zu uns spricht
Leading Tight
Was ist die Welt? Ein ewiges Gedicht,
Daraus der Geist der Gottheit strahlt und glüht,
Daraus der Wein der Weisheit schäumt und sprüht,
Daraus der Laut der Liebe zu uns spricht
Leading Normal
Was ist die Welt? Ein ewiges Gedicht,
Daraus der Geist der Gottheit strahlt und glüht,
Daraus der Wein der Weisheit schäumt und sprüht,
Daraus der Laut der Liebe zu uns spricht
Leading Loose
Was ist die Welt? Ein ewiges Gedicht,
Daraus der Geist der Gottheit strahlt und glüht,
Daraus der Wein der Weisheit schäumt und sprüht,
Daraus der Laut der Liebe zu uns spricht
Leading Looser
Was ist die Welt? Ein ewiges Gedicht,
Daraus der Geist der Gottheit strahlt und glüht,
Daraus der Wein der Weisheit schäumt und sprüht,
Daraus der Laut der Liebe zu uns spricht

All colors

Primaries and grays controlled by the Global Swatch feature.
Slate
50
100
200
300
400
500
600
700
800
900
Gray
50
100
200
300
400
500
600
700
800
900
Red
50
100
200
300
400
500
600
700
800
900
Yellow
50
100
200
300
400
500
600
700
800
900
Green
50
100
200
300
400
500
600
700
800
900
Teal
50
100
200
300
400
500
600
700
800
900
Blue
50
100
200
300
400
500
600
700
800
900
Indigo
50
100
200
300
400
500
600
700
800
900
Purple
50
100
200
300
400
500
600
700
800
900
Other
White
Black
Primary
Accent

Unstyled lists

  • Unordered list item
  • Unordered list item
  • Unordered list item
[↓] Unordered list
  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
[↓] Ordered list

Vertical spacings [↓]

You can add vertical spacings between lists with modifier classes. Use Column xxs, Column xs, Column sm, Column base, Column md or Column lg classes.
  • List item
  • List item
  • List item
[↓] Column xxs: 0.125em
  • List item
  • List item
  • List item
[↓] Column xs: 0.25em
  • List item
  • List item
  • List item
[↓] Column sm: 0.5em
  • List item
  • List item
  • List item
[↓] Column base: 1em
  • List item
  • List item
  • List item
[↓] Column md: 1.5em
  • List item
  • List item
  • List item
[↓] Column lg: 2em

Horizontal spacings [→]

You can add horizontal spacings between lists with modifier classes. Use Row xxs, Row xs, Row sm, Row base, Row md or Row lg classes.
  • Item #1
  • Item #2
  • Item #3
[→] Row xxs: 0.25em
  • Item #1
  • Item #2
  • Item #3
[→] Row xs: 0.375em
  • Item #1
  • Item #2
  • Item #3
[→] Row sm: 0.5em
  • Item #1
  • Item #2
  • Item #3
[→] Row base: 1em
  • Item #1
  • Item #2
  • Item #3
[→] Row md: 1.5em
  • Item #1
  • Item #2
  • Item #3
[→] Row lg: 2em

List with icon

You can combine both lists to become the checked lists or list with other icons. Use Material icons, Material icons rounded, Material icons sharp or Material icons outlined classes specific icon.
Sizing lg
  • person
    Profile
  • tune
    Settings
  • check
    Check
[↓] Column sm
···[→] Row sm
···[→] Row sm
···[→] Row sm
  • person
    Profile
  • tune
    Settings
  • check
    Check
[↓] Column sm
···[→] Row sm
···[→] Row sm
···[→] Row sm
  • person
    Profile
  • tune
    Settings
  • check
    Check
[↓] Column sm
···[→] Row sm
···[→] Row sm
···[→] Row sm
Sizing sm
  • person
    Profile
  • tune
    Settings
  • check
    Check
[↓] Column xs
···[→] Row xs
···[→] Row xs
···[→] Row xs
  • person
    Profile
  • tune
    Settings
  • check
    Check
[↓] Column sm
···[→] Row xs
···[→] Row xs
···[→] Row xs
  • person
    Profile
  • tune
    Settings
  • check
    Check
[↓] Column sm
···[→] Row xs
···[→] Row xs
···[→] Row xs
Sizing lg
  • person
    Profile
  • tune
    Settings
  • check
    Check
[↓] Column sm
···[→] Row sm
···[→] Row sm
···[→] Row sm
  • person
    Profile
  • tune
    Settings
  • check
    Check
[↓] Column md
···[→] Row sm
···[→] Row sm
···[→] Row sm
  • person
    Profile
  • tune
    Settings
  • check
    Check
[↓] Column md
···[→] Row sm
···[→] Row sm
···[→] Row sm

Curved Sections

Get help from hundred of web components, sections, and ready-to-use templates to grow your business online.

Curve bottom on text

Get help from hundred of web components, sections, and ready-to-use templates to grow your business online.

Curve top on text

Horizontal steps

1
Photography
All photography is sourced from Unsplash and Pexels. All Icons from Material Library and Flaticon or Icons8 and are free to use in your projects.
2
Typography
Typography licensed under the SIL Open Font License, and is free for personal and commercial use.

Changing the color and size of Material Icons

Simply apply the text color or size class to the icon.
outbox
Text Green 500
outbox
Text Gray 500
outbox
Blue 500
outbox
Purple 500
This is some text inside of a div block.
This is some text inside of a div block.