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 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
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
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
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
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
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
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
- Ordered list item
- Ordered list item
- 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
- Profile
- Settings
- Check
[↓] Column sm
···[→] Row sm
···[→] Row sm
···[→] Row sm
- Profile
- Settings
- Check
[↓] Column sm
···[→] Row sm
···[→] Row sm
···[→] Row sm
- Profile
- Settings
- Check
[↓] Column sm
···[→] Row sm
···[→] Row sm
···[→] Row sm
Sizing sm
- Profile
- Settings
- Check
[↓] Column xs
···[→] Row xs
···[→] Row xs
···[→] Row xs
- Profile
- Settings
- Check
[↓] Column sm
···[→] Row xs
···[→] Row xs
···[→] Row xs
- Profile
- Settings
- Check
[↓] Column sm
···[→] Row xs
···[→] Row xs
···[→] Row xs
Sizing lg
- Profile
- Settings
- Check
[↓] Column sm
···[→] Row sm
···[→] Row sm
···[→] Row sm
- Profile
- Settings
- Check
[↓] Column md
···[→] Row sm
···[→] Row sm
···[→] Row sm
- Profile
- Settings
- 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
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.
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.
Text Green 300
Text Teal 300
Text Blue 300
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.
