Style Guide

Shadow

Image Wrapper 1:1

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

Font Family

Utilities for controlling the font family of an element.
Font sans
The quick brown fox jumps over the lazy dog.
Font serif
The quick brown fox jumps over the lazy dog.
Font mono
The quick brown fox jumps over the lazy dog.

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 headinga 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
Neutral
50
100
200
300
400
500
600
700
800
900
Red
50
100
200
300
400
500
600
700
800
900
Orange
50
100
200
300
400
500
600
700
800
900
Amber
50
100
200
300
400
500
600
700
800
900
Yellow
50
100
200
300
400
500
600
700
800
900
Lime
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
Cyan
50
100
200
300
400
500
600
700
800
900
Sky
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
Violet
50
100
200
300
400
500
600
700
800
900
Purple
50
100
200
300
400
500
600
700
800
900
Pink
50
100
200
300
400
500
600
700
800
900
Rose
50
100
200
300
400
500
600
700
800
900
Social
Twitter
Facebook
LinkedIn
Other
White
Black
Primary
Accent
Gradient__1
Gradient__02
Gradient__03
Gradient__04

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 300
outbox
Text Teal 300
outbox
Text Blue 300
outbox
Text Purple 200

Avatar

Avatar classes are applied to the image so that it scales with the parent element. Use Avatar xs, Avatar sm, Avatar md, Avatar lg, Avatar xl, Avatar 2xl, Avatar 3xl or Avatar 4xl classes to change size.
Avatar xs
Avatar sm
Avatar md
Avatar lg
Avatar xl
Avatar 2xl
Avatar 3xl

Rounded

Rounded xs
Rounded sm
Rounded md
Rounded lg
Rounded xl
Rounded 2xl
Rounded 2xl
Rounded 2xl
This is some text inside of a div block.
This is some text inside of a div block.