Style Guide
This guide covers the basic usage of the template as well as an overview of the structure. If you require assistance please don't hesitate to get in touch via email.
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;
Container Small
Container Medium
Container Large
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 Small
Shadow Medium
Shadow Large
Typography
Headings
All HTML headings, <h1> through <h6>, are available.
Class
Suffix
Properties
Heading
H1
font-size: 3rem;
line-height: 1.2;
line-height: 1.2;
H2
font-size: 2.25rem;
line-height: 1.2;
line-height: 1.2;
H3
font-size: 1.875rem;
line-height: 1.2;
line-height: 1.2;
H4
font-size: 1.5rem;
line-height: 1.25;
line-height: 1.25;
H5
font-size: 1.25rem;
line-height: 1.25;
line-height: 1.25;
H6
font-size: 1rem;
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;
xSmall
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;
xLarge
font-size: 4.5em;
line-height: 1rem;
line-height: 1rem;
Huge
font-size: 5em;
line-height: 1rem;
line-height: 1rem;
Title xSmall
The quick brown fox jumps over the lazy dog.
Title Small
The quick brown fox jumps over the lazy dog.
Title Medium
The quick brown fox jumps over the lazy dog.
Title Large
The quick brown fox jumps over the lazy dog.
Title xLarge
The quick brown fox jumps over the lazy dog.
Title Huge
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
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.
Forms
