Style Guide
This guide covers the basic usage of the template as well as an overview of the template structure. If you require assistance please don't hesitate to get in touch via email on the Template Support Page.
Layout
Containers
Containers are a fundamental building block that contain, pad, and align your content within a given device or viewport.
The container class sets the max-width of an element to match the min-width of the current breakpoint. This is useful if you’d prefer to design for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport.
To center containers use the native Webflow Container.
The container class sets the max-width of an element to match the min-width of the current breakpoint. This is useful if you’d prefer to design for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport.
To center containers use the native Webflow Container.
Class
Suffix
Properties
Container
None
width: 100%;
sm (640px)
max-width: 40em;
md (768px)
max-width: 48em;
lg (1024px)
max-width: 64em;
xl (1280px)
max-width: 80em;
2xl (1536px)
max-width: 96em;
Container sm
Container md
Container lg
Container xl
Container 2xl
Container
To center containers use the native Webflow Container. You can add a Container element from the Layout section in the Elements panel (A).
Layout
Aspect ratios
Use generated pseudo elements to make an element maintain the aspect ratio of your choosing.
Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:
Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:
Class
Suffix
Properties
Ratio
1:1
square
16:9
16:9 aspect ratio
3:2
3:2 aspect ratio
4:3
4:3 aspect ratio
Ratio 1:1
Ratio 16:9
Ratio 3:2
Ratio 4:3
Layout
Shadows
Use generated pseudo elements to make an element maintain the aspect ratio of your choosing.
Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:
Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:
Class
Suffix
Properties
Ratio
1:1
square
16:9
16:9 aspect ratio
3:2
3:2 aspect ratio
4:3
4:3 aspect ratio
Shadow sm
Shadow
Shadow md
Typography
Headings
All HTML headings, <h1> through <h6>, are available.
Class
Suffix
Properties
Heading
H1
font-size: 3em;
line-height: 1.2;
line-height: 1.2;
H2
font-size: 2.25em;
line-height: 1.2;
line-height: 1.2;
H3
font-size: 1.875em;
line-height: 1.2;
line-height: 1.2;
H4
font-size: 1.5em;
line-height: 1.2;
line-height: 1.2;
H5
font-size: 1.25em;
line-height: 1.2;
line-height: 1.2;
H6
font-size: 1em;
line-height: 1.2;
line-height: 1.2;
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.
Typography
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.
Class
Combo
Properties
Title
None
font-family: Inter Display;
text-color: black;
text-color: black;
X-Small
font-size: 2.5em;
line-height: 1rem;
line-height: 1rem;
Small
font-size: 3em;
line-height: 1rem;
line-height: 1rem;
Medium
font-size: 3.5em;
line-height: 1rem;
line-height: 1rem;
Large
font-size: 4em;
line-height: 1rem;
line-height: 1rem;
X-Large
font-size: 4.5em;
line-height: 1rem;
line-height: 1rem;
2X-Large
font-size: 5em;
line-height: 1rem;
line-height: 1rem;
Title
The quick brown fox jumps over the lazy dog.
Title xs
The quick brown fox jumps over the lazy dog.
Title sm
The quick brown fox jumps over the lazy dog.
Title md
The quick brown fox jumps over the lazy dog.
Title lg
The quick brown fox jumps over the lazy dog.
Title xl
The quick brown fox jumps over the lazy dog.
Title 2xl
The quick brown fox jumps over the lazy dog.
Typography
Font Style
Utilities for controlling the style of text.
Class
Properties
Italic
font-style: italic;
Not Italic
font-style: normal;
Italic
The quick brown fox jumps over the lazy dog.
Not Italic
The quick brown fox jumps over the lazy dog.
Typography
.png)
Font Weight
Utilities for controlling the font weight of an element.
Class
Suffix
Properties
Font
Extralight
font-weight: 200;
Light
font-weight: 300;
Normal
font-weight: 400;
Medium
font-weight: 500;
Semibold
font-weight: 600;
Bold
font-weight: 700;
Extrabold
font-weight: 800;
Font Extralight
The quick brown fox jumps over the lazy dog.
Font Light
The quick brown fox jumps over the lazy dog.
Font Normal
The quick brown fox jumps over the lazy dog.
Font Medium
The quick brown fox jumps over the lazy dog.
Font Semibold
The quick brown fox jumps over the lazy dog.
Font Bold
The quick brown fox jumps over the lazy dog.
Font Extrabold
The quick brown fox jumps over the lazy dog.
Font Black
The quick brown fox jumps over the lazy dog.
Colors
Gradients
Gradient #01
Gradient #02
Gradient #03
Gradient #04
Gradient #05
Gradient #06
Gradient #07
Gradient #08
Gradient #09
A monthly digest of the latest news, articles, and resources.
