Padding

The Knockout padding suite is built to anticipate needs across viewports & to adjust accordingly, so applying a viewport-specific modifier class should only be necessary when the intended behavior is exceptional. This means that, for instance, Padding - L may have 2 columns of left/right padding at desktop, & only a half column of padding at mobile. These behaviors can be adjusted on a per-project basis, but any adjustments should be made across all padding & margin classes in order to maintain consistency.

All classes convert to VW units above 1440px & to PX units at 1920px.

Tip: There are modifier classes for each viewport, but you must switch to tablet view to see tablet classes & mobile view to see mobile classes.

All-sides padding

Padding - XXL
This is some text inside of a div block.
Padding - XL
This is some text inside of a div block.
Padding - L
This is some text inside of a div block.
Padding - M
This is some text inside of a div block.
Padding - S
This is some text inside of a div block.
Padding - XS
This is some text inside of a div block.
Padding - XXS
This is some text inside of a div block.
Padding - 0
This is some text inside of a div block.
Tablet viewport icon.
More classes available at tablet viewport
Padding Tab - XXL
This is some text inside of a div block.
Padding Tab - XL
This is some text inside of a div block.
Padding Tab - L
This is some text inside of a div block.
Padding Tab - M
This is some text inside of a div block.
Padding Tab - S
This is some text inside of a div block.
Padding Tab - XS
This is some text inside of a div block.
Padding Tab - XXS
This is some text inside of a div block.
Padding Tab - 0
This is some text inside of a div block.
Mobile viewport icon.
More classes available at mobile viewport
Padding Mob - XXL
This is some text inside of a div block.
Padding Mob - XL
This is some text inside of a div block.
Padding Mob - L
This is some text inside of a div block.
Padding Mob - M
This is some text inside of a div block.
Padding Mob - S
This is some text inside of a div block.
Padding Mob - XS
This is some text inside of a div block.
Padding Mob - XXS
This is some text inside of a div block.
Padding Mob - 0
This is some text inside of a div block.

Side-specific padding

These padding classes can be used on their own or to override the all-sides padding classes.

Padding Top - XXL
This is some text inside of a div block.
Padding Top - XL
This is some text inside of a div block.
Padding Top - L
This is some text inside of a div block.
Padding Top - M
This is some text inside of a div block.
Padding Top - S
This is some text inside of a div block.
Padding Top - XS
This is some text inside of a div block.
Padding Top - XXS
This is some text inside of a div block.
Padding Top - 0
This is some text inside of a div block.
Tablet viewport icon.
More classes available at tablet viewport
Padding Top Tab - XXL
This is some text inside of a div block.
Padding Top Tab - XL
This is some text inside of a div block.
Padding Top Tab - L
This is some text inside of a div block.
Padding Top Tab - M
This is some text inside of a div block.
Padding Top Tab - S
This is some text inside of a div block.
Padding Top Tab - XS
This is some text inside of a div block.
Padding Top Tab - XXS
This is some text inside of a div block.
Padding Top Tab - 0
This is some text inside of a div block.
Mobile viewport icon.
More classes available at mobile viewport
Padding Top Mob - XXL
This is some text inside of a div block.
Padding Top Mob - XL
This is some text inside of a div block.
Padding Top Mob - L
This is some text inside of a div block.
Padding Top Mob - M
This is some text inside of a div block.
Padding Top Mob - S
This is some text inside of a div block.
Padding Top Mob - XS
This is some text inside of a div block.
Padding Top Mob - XXS
This is some text inside of a div block.
Padding Top Mob - 0
This is some text inside of a div block.
Padding Right - XXL
This is some text inside of a div block.
Padding Right - XL
This is some text inside of a div block.
Padding Right - L
This is some text inside of a div block.
Padding Right - M
This is some text inside of a div block.
Padding Right - S
This is some text inside of a div block.
Padding Right - XS
This is some text inside of a div block.
Padding Right - XXS
This is some text inside of a div block.
Padding Right - 0
This is some text inside of a div block.
Tablet viewport icon.
More classes available at tablet viewport
Padding Right Tab - XXL
This is some text inside of a div block.
Padding Right Tab - XL
This is some text inside of a div block.
Padding Right Tab - L
This is some text inside of a div block.
Padding Right Tab - M
This is some text inside of a div block.
Padding Right Tab - S
This is some text inside of a div block.
Padding Right Tab - XS
This is some text inside of a div block.
Padding Right Tab - XXS
This is some text inside of a div block.
Padding Right Tab - 0
This is some text inside of a div block.
Mobile viewport icon.
More classes available at mobile viewport
Padding Right Mob - XXL
This is some text inside of a div block.
Padding Right Mob - XL
This is some text inside of a div block.
Padding Right Mob - L
This is some text inside of a div block.
Padding Right Mob - M
This is some text inside of a div block.
Padding Right Mob - S
This is some text inside of a div block.
Padding Right Mob - XS
This is some text inside of a div block.
Padding Right Mob - XXS
This is some text inside of a div block.
Padding Right Mob - 0
This is some text inside of a div block.
Padding Bottom - XXL
This is some text inside of a div block.
Padding Bottom - XL
This is some text inside of a div block.
Padding Bottom - L
This is some text inside of a div block.
Padding Bottom - M
This is some text inside of a div block.
Padding Bottom - S
This is some text inside of a div block.
Padding Bottom - XS
This is some text inside of a div block.
This is some text inside of a div block.
Padding Bottom - XXS
This is some text inside of a div block.
Padding Bottom - 0
This is some text inside of a div block.
Tablet viewport icon.
More classes available at tablet viewport
Padding Bottom Tab - XXL
This is some text inside of a div block.
Padding Bottom Tab - XL
This is some text inside of a div block.
Padding Bottom Tab - L
This is some text inside of a div block.
Padding Bottom Tab - M
This is some text inside of a div block.
Padding Bottom Tab - S
This is some text inside of a div block.
Padding Bottom Tab - XS
This is some text inside of a div block.
Padding Bottom Tab - XXS
This is some text inside of a div block.
Padding Bottom Tab - 0
This is some text inside of a div block.
Mobile viewport icon.
More classes available at mobile viewport
Padding Bottom Mob - XXL
This is some text inside of a div block.
Padding Bottom Mob - XL
This is some text inside of a div block.
Padding Bottom Mob - L
This is some text inside of a div block.
Padding Bottom Mob - M
This is some text inside of a div block.
Padding Bottom Mob - S
This is some text inside of a div block.
Padding Bottom Mob - XS
This is some text inside of a div block.
Padding Bottom Mob - XXS
This is some text inside of a div block.
Padding Bottom Mob - 0
This is some text inside of a div block.
Padding Left - XXL
This is some text inside of a div block.
Padding Left - XL
This is some text inside of a div block.
Padding Left - L
This is some text inside of a div block.
Padding Left - M
This is some text inside of a div block.
Padding Left - S
This is some text inside of a div block.
Padding Left - XS
This is some text inside of a div block.
Padding Left - XXS
This is some text inside of a div block.
Padding Left - 0
This is some text inside of a div block.
Tablet viewport icon.
More classes available at tablet viewport
Padding Left Tab - XXL
This is some text inside of a div block.
Padding Left Tab - XL
This is some text inside of a div block.
Padding Left Tab - L
This is some text inside of a div block.
Padding Left Tab - M
This is some text inside of a div block.
Padding Left Tab - S
This is some text inside of a div block.
Padding Left Tab - XS
This is some text inside of a div block.
Padding Left Tab - XXS
This is some text inside of a div block.
Padding Left Tab - 0
This is some text inside of a div block.
Mobile viewport icon.
More classes available at mobile viewport
Padding Left Mob - XXL
This is some text inside of a div block.
Padding Left Mob - XL
This is some text inside of a div block.
Padding Left Mob - L
This is some text inside of a div block.
Padding Left Mob - M
This is some text inside of a div block.
Padding Left Mob - S
This is some text inside of a div block.
Padding Left Mob - XS
This is some text inside of a div block.
Padding Left Mob - XXS
This is some text inside of a div block.
Padding Left Mob - 0
This is some text inside of a div block.
Padding Y - XXL
This is some text inside of a div block.
Padding Y - XL
This is some text inside of a div block.
Padding Y - L
This is some text inside of a div block.
Padding Y - M
This is some text inside of a div block.
Padding Y - S
This is some text inside of a div block.
Padding Y - XS
This is some text inside of a div block.
Padding Y - XXS
This is some text inside of a div block.
Padding Y - 0
This is some text inside of a div block.
Tablet viewport icon.
More classes available at tablet viewport
Padding Y Tab - XXL
This is some text inside of a div block.
Padding Y Tab - XL
This is some text inside of a div block.
Padding Y Tab - L
This is some text inside of a div block.
Padding Y Tab - M
This is some text inside of a div block.
Padding Y Tab - S
This is some text inside of a div block.
Padding Y Tab - XS
This is some text inside of a div block.
Padding Y Tab - XXS
This is some text inside of a div block.
Padding Y Tab - 0
This is some text inside of a div block.
Mobile viewport icon.
More classes available at mobile viewport
Padding Y Mob - XXL
This is some text inside of a div block.
Padding Y Mob - XL
This is some text inside of a div block.
Padding Y Mob - L
This is some text inside of a div block.
Padding Y Mob - M
This is some text inside of a div block.
Padding Y Mob - S
This is some text inside of a div block.
Padding Y Mob - XS
This is some text inside of a div block.
Padding Y Mob - XXS
This is some text inside of a div block.
Padding Y Mob - 0
This is some text inside of a div block.
Padding X - XXL
This is some text inside of a div block.
Padding X - XL
This is some text inside of a div block.
Padding X - L
This is some text inside of a div block.
Padding X - M
This is some text inside of a div block.
Padding X - S
This is some text inside of a div block.
Padding X - XS
This is some text inside of a div block.
Padding X - XXS
This is some text inside of a div block.
Padding X - 0
This is some text inside of a div block.
Tablet viewport icon.
More classes available at tablet viewport
Padding X Tab - XXL
This is some text inside of a div block.
Padding X Tab - XL
This is some text inside of a div block.
Padding X Tab - L
This is some text inside of a div block.
Padding X Tab - M
This is some text inside of a div block.
Padding X Tab - S
This is some text inside of a div block.
Padding X Tab - XS
This is some text inside of a div block.
Padding X Tab - XXS
This is some text inside of a div block.
Padding X Tab - 0
This is some text inside of a div block.
Mobile viewport icon.
More classes available at mobile viewport
Padding X Mob - XXL
This is some text inside of a div block.
Padding X Mob - XL
This is some text inside of a div block.
Padding X Mob - L
This is some text inside of a div block.
Padding X Mob - M
This is some text inside of a div block.
Padding X Mob - S
This is some text inside of a div block.
Padding X Mob - XS
This is some text inside of a div block.
Padding X Mob - XXS
This is some text inside of a div block.
Padding X Mob - 0
This is some text inside of a div block.

Columns

Knockout is based on a 14-column responsive grid. This allows for a column of responsive gutter on each side, & a 12-column grid for content within. The reason we use responsive gutters instead of fixed gutters is so that we can viewport units to define responsive margin, padding, & columns that stay on grid, while avoiding the complications of nested percentage units. These units convert to pixels at 1920 & stop expanding.

We have two column suites: viewport-based for modular layouts & percentage-based for repeating elements; & also an offset suite that corrects for gutters in layouts with repeating elements.

Tip: There are modifier classes for each viewport, but you must switch to tablet view to see tablet classes & mobile view to see mobile classes.

Viewport-based columns

The viewport-based column suite is best for defining layouts that shouldn't adjust relative to their parent, but instead to the size of the viewport. The benefit of this approach is that your columns will always land on grid. So these classes are ideal for any unique layouts.

Tip: A combination like Column 6 Col Center Element will use auto margins to center the div, creating the illusion of left/right padding.

Tip: Because the browser scrollbar can cause 20px of horizontal scroll when using 100vw in some browsers, it's important to use Auto Col, Auto Col Tab, or Auto Col Mob for the last column when using the VW set.

Column
Auto Col
Column
1 Col
Column
2 Col
Column
3 Col
Column
4 Col
Column
5 Col
Column
6 Col
Column
7 Col
Column
8 Col
Column
9 Col
Column
10 Col
Column
11 Col
Column
12 Col
Column
13 Col
Column
14 Col
Column
Auto Col Tab
Column
1 Col Tab
Column
2 Col Tab
Column
3 Col Tab
Column
4 Col Tab
Column
5 Col Tab
Column
6 Col Tab
Column
7 Col Tab
Column
8 Col Tab
Column
9 Col Tab
Column
10 Col Tab
Column
11 Col Tab
Column
12 Col Tab
Column
13 Col Tab
Column
14 Col Tab
Column
1 Col Mob
Column
2 Col Mob
Column
3 Col Mob
Column
4 Col Mob
Column
5 Col Mob
Column
6 Col Mob
Column
7 Col Mob
Column
8 Col Mob
Column
9 Col Mob
Column
10 Col Mob
Column
11 Col Mob
Column
12 Col Mob
Column
13 Col Mob
Column
14 Col Mob

Percentage-based columns

The percentage-based column suite is best for sizing repeating elements, & are sized relative to their parent. For instance, a 3up card-based layout might need to nest inside 14 columns, 12 columns, or even 10 columns depending on the padding of its parent, so these columns will flexibly adjust. Consequently, these columns may not always subdivide on grid, but that's generally fine for these use cases.

Tip: The padding offset suite (below) allows percentage-based columns with gutters to land on grid by offsetting the inner padding with negative margin.

Column
Fifth
Column
Fourth
Column
Third
Column
Half
Column
Whole
Column
Fifth Tab
Column
Fourth Tab
Column
Third Tab
Column
Half Tab
Column
Whole Tab
Column
Fifth Mob
Column
Fourth Mob
Column
Third Mob
Column
Half Mob
Column
Whole Mob

Margin offsets

Margin offsets are used to align repeating elements with gutters to the outer grids by offsetting the padding with negative margins. For instance, suppose you want a 3up card layout with a 1 column of gutter in between the cards. You would accomplish this with a half-column of left- and right-padding within each card, but that would also inset your first & last card by a half column. So you would apply a half column negative margin to the parent in order to offset the padding.

Margin Offset - L
This is some text inside of a div block.
Margin Offset - M
This is some text inside of a div block.
Margin Offset - S
This is some text inside of a div block.
Margin Offset - XS
This is some text inside of a div block.
Margin Offset - XXS
This is some text inside of a div block.

The grid

There are two visual grids that can be toggled off & on as background images at the Body (All Pages) level: one for dark backgrounds & the other for light. These grids stop expanding at 1920, just like the grid suites, & will allow you to check alignment. The grid can also be applied to Sections with the Grid - Light Grid - Dark.

Grid - Light
Grid - Dark

Padding

The padding suite is built to anticipate needs across viewports & to adjust accordingly, so applying a viewport-specific modifier class should only be necessary when the intended behavior is exceptional. This means that, for instance, Padding - L may have 2 columns of left/right padding at desktop, & only a half column of padding at mobile. These behaviors can be adjusted on a per-project basis, but any adjustments should be made across all padding & margin classes in order to maintain consistency.

All classes convert to VW units above 1440px & to PX units at 1920px.

Tip: There are modifier classes for each viewport, but you must switch to tablet view to see tablet classes & mobile view to see mobile classes.

All-sides padding

Lorem ipsum

Padding - XXL
This is some text inside of a div block.
Padding - XL
This is some text inside of a div block.
Padding - L
This is some text inside of a div block.
Padding - M
This is some text inside of a div block.
Padding - S
This is some text inside of a div block.
Padding - XS
This is some text inside of a div block.
Padding - XXS
This is some text inside of a div block.
Padding - 0
This is some text inside of a div block.
Padding Tab - XXL
This is some text inside of a div block.
Padding Tab - XL
This is some text inside of a div block.
Padding Tab - L
This is some text inside of a div block.
Padding Tab - M
This is some text inside of a div block.
Padding Tab - S
This is some text inside of a div block.
Padding Tab - XS
This is some text inside of a div block.
Padding Tab - XXS
This is some text inside of a div block.
Padding Tab - 0
This is some text inside of a div block.
Padding Mob - XXL
This is some text inside of a div block.
Padding Mob - XL
This is some text inside of a div block.
Padding Mob - L
This is some text inside of a div block.
Padding Mob - M
This is some text inside of a div block.
Padding Mob - S
This is some text inside of a div block.
Padding Mob - XS
This is some text inside of a div block.
Padding Mob - XXS
This is some text inside of a div block.
Padding Mob - 0
This is some text inside of a div block.

Side-specific padding

These padding classes can be used on their own or to override the all-sides padding classes.

Padding Top - XXL
This is some text inside of a div block.
Padding Top - XL
This is some text inside of a div block.
Padding Top - L
This is some text inside of a div block.
Padding Top - M
This is some text inside of a div block.
Padding Top - S
This is some text inside of a div block.
Padding Top - XS
This is some text inside of a div block.
Padding Top - XXS
This is some text inside of a div block.
Padding Top - 0
This is some text inside of a div block.
Padding Top Tab - XXL
This is some text inside of a div block.
Padding Top Tab - XL
This is some text inside of a div block.
Padding Top Tab - L
This is some text inside of a div block.
Padding Top Tab - M
This is some text inside of a div block.
Padding Top Tab - S
This is some text inside of a div block.
Padding Top Tab - XS
This is some text inside of a div block.
Padding Top Tab - XXS
This is some text inside of a div block.
Padding Top Tab - 0
This is some text inside of a div block.
Padding Top Mob - XXL
This is some text inside of a div block.
Padding Top Mob - XL
This is some text inside of a div block.
Padding Top Mob - L
This is some text inside of a div block.
Padding Top Mob - M
This is some text inside of a div block.
Padding Top Mob - S
This is some text inside of a div block.
Padding Top Mob - XS
This is some text inside of a div block.
Padding Top Mob - XXS
This is some text inside of a div block.
Padding Top Mob - 0
This is some text inside of a div block.
Padding Right - XXL
This is some text inside of a div block.
Padding Right - XL
This is some text inside of a div block.
Padding Right - L
This is some text inside of a div block.
Padding Right - M
This is some text inside of a div block.
Padding Right - S
This is some text inside of a div block.
Padding Right - XS
This is some text inside of a div block.
Padding Right - XXS
This is some text inside of a div block.
Padding Right - 0
This is some text inside of a div block.
Padding Right Tab - XXL
This is some text inside of a div block.
Padding Right Tab - XL
This is some text inside of a div block.
Padding Right Tab - L
This is some text inside of a div block.
Padding Right Tab - M
This is some text inside of a div block.
Padding Right Tab - S
This is some text inside of a div block.
Padding Right Tab - XS
This is some text inside of a div block.
Padding Right Tab - XXS
This is some text inside of a div block.
Padding Right Tab - 0
This is some text inside of a div block.
Padding Right Mob - XXL
This is some text inside of a div block.
Padding Right Mob - XL
This is some text inside of a div block.
Padding Right Mob - L
This is some text inside of a div block.
Padding Right Mob - M
This is some text inside of a div block.
Padding Right Mob - S
This is some text inside of a div block.
Padding Right Mob - XS
This is some text inside of a div block.
Padding Right Mob - XXS
This is some text inside of a div block.
Padding Right Mob - 0
This is some text inside of a div block.
Padding Bottom - XXL
This is some text inside of a div block.
Padding Bottom - XL
This is some text inside of a div block.
Padding Bottom - L
This is some text inside of a div block.
Padding Bottom - M
This is some text inside of a div block.
Padding Bottom - S
This is some text inside of a div block.
Padding Bottom - XS
This is some text inside of a div block.
Padding Bottom - XXS
This is some text inside of a div block.
Padding Bottom - 0
This is some text inside of a div block.
Padding Bottom Tab - XXL
This is some text inside of a div block.
Padding Bottom Tab - XL
This is some text inside of a div block.
Padding Bottom Tab - L
This is some text inside of a div block.
Padding Bottom Tab - M
This is some text inside of a div block.
Padding Bottom Tab - S
This is some text inside of a div block.
Padding Bottom Tab - XS
This is some text inside of a div block.
Padding Bottom Tab - XXS
This is some text inside of a div block.
Padding Bottom Tab - 0
This is some text inside of a div block.
Padding Bottom Mob - XXL
This is some text inside of a div block.
Padding Bottom Mob - XL
This is some text inside of a div block.
Padding Bottom Mob - L
This is some text inside of a div block.
Padding Bottom Mob - M
This is some text inside of a div block.
Padding Bottom Mob - S
This is some text inside of a div block.
Padding Bottom Mob - XS
This is some text inside of a div block.
Padding Bottom Mob - XXS
This is some text inside of a div block.
Padding Bottom Mob - 0
This is some text inside of a div block.
Padding Left - XXL
This is some text inside of a div block.
Padding Left - XL
This is some text inside of a div block.
Padding Left - L
This is some text inside of a div block.
Padding Left - M
This is some text inside of a div block.
Padding Left - S
This is some text inside of a div block.
Padding Left - XS
This is some text inside of a div block.
Padding Left - XXS
This is some text inside of a div block.
Padding Left - 0
This is some text inside of a div block.
Padding Left Tab - XXL
This is some text inside of a div block.
Padding Left Tab - XL
This is some text inside of a div block.
Padding Left Tab - L
This is some text inside of a div block.
Padding Left Tab - M
This is some text inside of a div block.
Padding Left Tab - S
This is some text inside of a div block.
Padding Left Tab - XS
This is some text inside of a div block.
Padding Left Tab - XXS
This is some text inside of a div block.
Padding Left Tab - 0
This is some text inside of a div block.
Padding Left Mob - XXL
This is some text inside of a div block.
Padding Left Mob - XL
This is some text inside of a div block.
Padding Left Mob - L
This is some text inside of a div block.
Padding Left Mob - M
This is some text inside of a div block.
Padding Left Mob - S
This is some text inside of a div block.
Padding Left Mob - XS
This is some text inside of a div block.
Padding Left Mob - XXS
This is some text inside of a div block.
Padding Left Mob - 0
This is some text inside of a div block.
Padding Y - XXL
This is some text inside of a div block.
Padding Y - XL
This is some text inside of a div block.
Padding Y - L
This is some text inside of a div block.
Padding Y - M
This is some text inside of a div block.
Padding Y - S
This is some text inside of a div block.
Padding Y - XS
This is some text inside of a div block.
Padding Y - XXS
This is some text inside of a div block.
Padding Y - 0
This is some text inside of a div block.
Padding Y Tab - XXL
This is some text inside of a div block.
Padding Y Tab - XL
This is some text inside of a div block.
Padding Y Tab - L
This is some text inside of a div block.
Padding Y Tab - M
This is some text inside of a div block.
Padding Y Tab - S
This is some text inside of a div block.
Padding Y Tab - XS
This is some text inside of a div block.
Padding Y Tab - XXS
This is some text inside of a div block.
Padding Y Tab - 0
This is some text inside of a div block.
Padding Y Mob - XXL
This is some text inside of a div block.
Padding Y Mob - XL
This is some text inside of a div block.
Padding Y Mob - L
This is some text inside of a div block.
Padding Y Mob - M
This is some text inside of a div block.
Padding Y Mob - S
This is some text inside of a div block.
Padding Y Mob - XS
This is some text inside of a div block.
Padding Y Mob - XXS
This is some text inside of a div block.
Padding Y Mob - 0
This is some text inside of a div block.
Padding X - XXL
This is some text inside of a div block.
Padding X - XL
This is some text inside of a div block.
Padding X - L
This is some text inside of a div block.
Padding X - M
This is some text inside of a div block.
Padding X - S
This is some text inside of a div block.
Padding X - XS
This is some text inside of a div block.
Padding X - XXS
This is some text inside of a div block.
Padding X - 0
This is some text inside of a div block.
Padding X Tab - XXL
This is some text inside of a div block.
Padding X Tab - XL
This is some text inside of a div block.
Padding X Tab - L
This is some text inside of a div block.
Padding X Tab - M
This is some text inside of a div block.
Padding X Tab - S
This is some text inside of a div block.
Padding X Tab - XS
This is some text inside of a div block.
Padding X Tab - XXS
This is some text inside of a div block.
Padding X Tab - 0
This is some text inside of a div block.
Padding X Mob - XXL
This is some text inside of a div block.
Padding X Mob - XL
This is some text inside of a div block.
Padding X Mob - L
This is some text inside of a div block.
Padding X Mob - M
This is some text inside of a div block.
Padding X Mob - S
This is some text inside of a div block.
Padding X Mob - XS
This is some text inside of a div block.
Padding X Mob - XXS
This is some text inside of a div block.
Padding X Mob - 0
This is some text inside of a div block.

Margins

The margin suite mirrors the padding suite & is built to anticipate needs across viewports & to adjust accordingly. This means that, for instance, Margin Left - L may have 2 columns of left margin at desktop, & only a half column of margin at mobile. These behaviors can be adjusted on a per-project basis, but any adjustments should be made across all padding & margin classes in order to maintain consistency.

All classes convert to VW units above 1440px & to PX units at 1920px.

Tip: There are modifier classes for each viewport, but you must switch to tablet view to see tablet classes & mobile view to see mobile classes.

Margin Top - Auto
This is some text inside of a div block.
Margin Top - XXL
This is some text inside of a div block.
Margin Top - XL
This is some text inside of a div block.
Margin Top - L
This is some text inside of a div block.
Margin Top - M
This is some text inside of a div block.
Margin Top - S
This is some text inside of a div block.
Margin Top - XS
This is some text inside of a div block.
Margin Top - XXS
This is some text inside of a div block.
Margin Top - 0
This is some text inside of a div block.
Margin Top Tab - Auto
This is some text inside of a div block.
Margin Top Tab - XXL
This is some text inside of a div block.
Margin Top Tab - XL
This is some text inside of a div block.
Margin Top Tab - L
This is some text inside of a div block.
Margin Top Tab - M
This is some text inside of a div block.
Margin Top Tab - S
This is some text inside of a div block.
Margin Top Tab - XS
This is some text inside of a div block.
Margin Top Tab - XXS
This is some text inside of a div block.
Margin Top Tab - 0
This is some text inside of a div block.
Margin Top Mob - Auto
This is some text inside of a div block.
Margin Top Mob - XXL
This is some text inside of a div block.
Margin Top Mob - XL
This is some text inside of a div block.
Margin Top Mob - L
This is some text inside of a div block.
Margin Top Mob - M
This is some text inside of a div block.
Margin Top Mob - S
This is some text inside of a div block.
Margin Top Mob - XS
This is some text inside of a div block.
Margin Top Mob - XXS
This is some text inside of a div block.
Margin Top Mob - 0
This is some text inside of a div block.
Margin Right - Auto
This is some text inside of a div block.
Margin Right - XXL
This is some text inside of a div block.
Margin Right - XL
This is some text inside of a div block.
Margin Right - L
This is some text inside of a div block.
Margin Right - M
This is some text inside of a div block.
Margin Right - S
This is some text inside of a div block.
Margin Right - XS
This is some text inside of a div block.
Margin Right - XXS
This is some text inside of a div block.
Margin Right - 0
This is some text inside of a div block.
Margin Right Tab - Auto
This is some text inside of a div block.
Margin Right Tab - XXL
This is some text inside of a div block.
Margin Right Tab - XL
This is some text inside of a div block.
Margin Right Tab - L
This is some text inside of a div block.
Margin Right Tab - M
This is some text inside of a div block.
Margin Right Tab - S
This is some text inside of a div block.
Margin Right Tab - XS
This is some text inside of a div block.
Margin Right Tab - XXS
This is some text inside of a div block.
Margin Right Tab - 0
This is some text inside of a div block.
Margin Right Mob - Auto
This is some text inside of a div block.
Margin Right Mob - XXL
This is some text inside of a div block.
Margin Right Mob - XL
This is some text inside of a div block.
Margin Right Mob - L
This is some text inside of a div block.
Margin Right Mob - M
This is some text inside of a div block.
Margin Right Mob - S
This is some text inside of a div block.
Margin Right Mob - XS
This is some text inside of a div block.
Margin Right Mob - XXS
This is some text inside of a div block.
Margin Right Mob - 0
This is some text inside of a div block.
Margin Bottom - Auto
This is some text inside of a div block.
Margin Bottom - XXL
This is some text inside of a div block.
Margin Bottom - XL
This is some text inside of a div block.
Margin Bottom - L
This is some text inside of a div block.
Margin Bottom - M
This is some text inside of a div block.
Margin Bottom - S
This is some text inside of a div block.
Margin Bottom - XS
This is some text inside of a div block.
Margin Bottom - XXS
This is some text inside of a div block.
Margin Bottom - 0
This is some text inside of a div block.
Margin Bottom Tab - Auto
This is some text inside of a div block.
Margin Bottom Tab - XXL
This is some text inside of a div block.
Margin Bottom Tab - XL
This is some text inside of a div block.
Margin Bottom Tab - L
This is some text inside of a div block.
Margin Bottom Tab - M
This is some text inside of a div block.
Margin Bottom Tab - S
This is some text inside of a div block.
Margin Bottom Tab - XS
This is some text inside of a div block.
Margin Bottom Tab - XXS
This is some text inside of a div block.
Margin Bottom Tab - 0
This is some text inside of a div block.
Margin Bottom Mob - Auto
This is some text inside of a div block.
Margin Bottom Mob - XXL
This is some text inside of a div block.
Margin Bottom Mob - XL
This is some text inside of a div block.
Margin Bottom Mob - L
This is some text inside of a div block.
Margin Bottom Mob - M
This is some text inside of a div block.
Margin Bottom Mob - S
This is some text inside of a div block.
Margin Bottom Mob - XS
This is some text inside of a div block.
Margin Bottom Mob - XXS
This is some text inside of a div block.
Margin Bottom Mob - 0
This is some text inside of a div block.
Margin Left - Auto
This is some text inside of a div block.
Margin Left - XXL
This is some text inside of a div block.
Margin Left - XL
This is some text inside of a div block.
Margin Left - L
This is some text inside of a div block.
Margin Left - M
This is some text inside of a div block.
Margin Left - S
This is some text inside of a div block.
Margin Left - XS
This is some text inside of a div block.
Margin Left - XXS
This is some text inside of a div block.
Margin Left - 0
This is some text inside of a div block.
Margin Left Tab - Auto
This is some text inside of a div block.
Margin Left Tab - XXL
This is some text inside of a div block.
Margin Left Tab - XL
This is some text inside of a div block.
Margin Left Tab - L
This is some text inside of a div block.
Margin Left Tab - M
This is some text inside of a div block.
Margin Left Tab - S
This is some text inside of a div block.
Margin Left Tab - XS
This is some text inside of a div block.
Margin Left Tab - XXS
This is some text inside of a div block.
Margin Left Tab - 0
This is some text inside of a div block.
Margin Left Mob - Auto
This is some text inside of a div block.
Margin Left Mob - XXL
This is some text inside of a div block.
Margin Left Mob - XL
This is some text inside of a div block.
Margin Left Mob - L
This is some text inside of a div block.
Margin Left Mob - M
This is some text inside of a div block.
Margin Left Mob - S
This is some text inside of a div block.
Margin Left Mob - XS
This is some text inside of a div block.
Margin Left Mob - XXS
This is some text inside of a div block.
Margin Left Mob - 0
This is some text inside of a div block.
Margin Top - 15
This is some text inside of a div block.
Margin Top - 10
This is some text inside of a div block.
Margin Top - 5
This is some text inside of a div block.
Margin Right - 15
This is some text inside of a div block.
Margin Right - 10
This is some text inside of a div block.
Margin Right - 5
This is some text inside of a div block.
Margin Bottom - 15
This is some text inside of a div block.
Margin Bottom - 10
This is some text inside of a div block.
Margin Bottom - 5
This is some text inside of a div block.
Margin Left - 15
This is some text inside of a div block.
Margin Left - 10
This is some text inside of a div block.
Margin Left - 5
This is some text inside of a div block.
Margin Top Tab - 15
This is some text inside of a div block.
Margin Top Tab - 10
This is some text inside of a div block.
Margin Top Tab - 5
This is some text inside of a div block.
Margin Right Tab - 15
This is some text inside of a div block.
Margin Right Tab - 10
This is some text inside of a div block.
Margin Right Tab - 5
This is some text inside of a div block.
Margin Bottom Tab - 15
This is some text inside of a div block.
Margin Bottom Tab - 10
This is some text inside of a div block.
Margin Bottom Tab - 5
This is some text inside of a div block.
Margin Left Tab - 15
This is some text inside of a div block.
Margin Left Tab - 10
This is some text inside of a div block.
Margin Left Tab - 5
This is some text inside of a div block.
Margin Top Mob - 15
This is some text inside of a div block.
Margin Top Mob - 10
This is some text inside of a div block.
Margin Top Mob - 5
This is some text inside of a div block.
Margin Right Mob - 15
This is some text inside of a div block.
Margin Right Mob - 10
This is some text inside of a div block.
Margin Right Mob - 5
This is some text inside of a div block.
Margin Bottom Mob - 15
This is some text inside of a div block.
Margin Bottom Mob - 10
This is some text inside of a div block.
Margin Bottom Mob - 5
This is some text inside of a div block.
Margin Left Mob - 15
This is some text inside of a div block.
Margin Left Mob - 10
This is some text inside of a div block.
Margin Left Mob - 5
This is some text inside of a div block.

Flex

The flex suite is primarily used for positioning content.

Tip: There are modifier classes for each viewport, but you must switch to tablet view to see tablet classes & mobile view to see mobile classes.

Flex
Vertical
First Row
Second Row
Flex
Vertical Reverse
First Row
Second Row
Flex
Horizontal
First Column
Second Column
Flex
Horizontal Reverse
First Column
Second Column
Flex
Center All
Flex
Align Center
Flex
Justify Center
Flex
Wrap
Flex
No Wrap
Flex
Align Top
Flex
Align Bottom
Flex
Justify Right
Flex
Justify Left
Flex
Justify Around
Flex
Justify Between
Flex
Vertical Tab
First Row
Second Row
Flex
Vertical Reverse Tab
First Row
Second Row
Flex
Horizontal Tab
First Column
Second Column
Flex
Horizontal Reverse Tab
First Column
Second Column
Flex
Center All Tab
Flex
Align Center Tab
Flex
Justify Center Tab
Flex
Wrap Tab
Flex
No Wrap Tab
Flex
Align Top Tab
Flex
Align Bottom Tab
Flex
Justify Right Tab
Flex
Justify Left Tab
Flex
Justify Around Tab
Flex
Justify Between Tab
Flex
Vertical Mob
First Row
Second Row
Flex
Vertical Reverse Mob
First Row
Second Row
Flex
Horizontal Mob
First Column
Second Column
Flex
Horizontal Reverse Mob
First Column
Second Column
Flex
Center All Mob
Flex
Align Center Mob
Flex
Justify Center Mob
Flex
Wrap Mob
Flex
No Wrap Mob
Flex
Align Top Mob
Flex
Align Bottom Mob
Flex
Justify Right Mob
Flex
Justify Left Mob
Flex
Justify Around Mob
Flex
Justify Between Mob

Text

Headline sizes correspond to but are independent of H1-H6 sizes, & can be overridden at tablet & mobile breakpoints. Font sizes convert to VW units above 1440px & back to pixel units at 1920px.

Tip: Type sizes for larger viewports are calculated in the Large Viewport Type embed within the Custom Code symbol. Apply the Desktop sizes to the embedded variables & the custom CSS will make the calculations for you.

Tip: Paragraph word-spacing is set in the Custom Code.

Tip: There are modifier classes for each viewport, but you must switch to tablet view to see tablet classes & mobile view to see mobile classes.

Headline
XXL

Heading

Headline
XL

Heading

Headline
L

Heading

Headline
M

Heading

Headline
S
Heading
Headline
XS
Heading
Headline
XXL Tab

Heading

Headline
XL Tab

Heading

Headline
L Tab

Heading

Headline
M Tab

Heading

Headline
S Tab

Heading

Headline
XS Tab

Heading

Headline
XXL Mob

Heading

Headline
XL Mob

Heading

Headline
L Mob

Heading

Headline
M Mob

Heading

Headline
S Mob

Heading

Headline
XS Mob

Heading

Text L
This is some text inside of a div block.
Text M
This is some text inside of a div block.
Text S
This is some text inside of a div block.
Line Height 166
This is some text inside of a div block.
This is some text inside of a div block.
Line Height 150
This is some text inside of a div block.
This is some text inside of a div block.
Line Height 133
This is some text inside of a div block.
This is some text inside of a div block.
Line Height 125
This is some text inside of a div block.
This is some text inside of a div block.
Line Height 100
This is some text inside of a div block.
This is some text inside of a div block.
Text L Tab
This is some text inside of a div block.
Text M Tab
This is some text inside of a div block.
Text S Tab
This is some text inside of a div block.
Text L Mob
This is some text inside of a div block.
Text M Mob
This is some text inside of a div block.
Text S Mob
This is some text inside of a div block.
Block Quote
Block Quote
Center
This is some text inside of a div block.
Center Element
This is some text inside of a div block.
Text Align Left
This is some text inside of a div block.
Text Align Right
This is some text inside of a div block.
Justify
This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block.
Truncate
This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block.
Center Tab
This is some text inside of a div block.
Center Element Tab
This is some text inside of a div block.
Text Align Left Tab
This is some text inside of a div block.
Text Align Right Tab
This is some text inside of a div block.
Center Mob
This is some text inside of a div block.
Center Element Mob
This is some text inside of a div block.
Text Align Left Mob
This is some text inside of a div block.
Text Align Right Mob
This is some text inside of a div block.
Sup

Lorem ipsum dolor sit amet, consectetur1

Sub

Lorem ipsum dolor sit amet, consectetur1

Uppercase

Heading

Lowercase

Heading

Serif

Heading

Sans

Heading

Text Decoration - None

Heading

Text Decoration - Underline

Heading

Text Decoration - Strikethrough

Heading

Rich Text

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Icons

Knockout uses the Font Awesome 5 Pro icon system, implemented as a font. This means that any unicode glyph from the font can be pasted as text, provided it's given a class corresponding to its set. Light, Solid, & Brands sets are supported. These classes can be combined with other classes for additional styling.

Icons can also be added as pseudo-elements in custom code using unicode or the unicode glyph.

The icon cheat sheet can be found here.

Icon Light

Icon Solid

Icon Brands

Icon Solid
Text - Primary

CTA

Colors

The color suite is based around a 4 color system, but can accommodate bonus colors at the end of the palette. The Hi & Lo variations are used in hover & pressed states on links & buttons. Class names are not intended to be changed. Customization of colors should be done by editing the color palette, rather than the classes, to avoid breaking how the colors are mapped to elements.

Background - Black
Background - White
Background - Primary
Background - Secondary
Background - Tertiary
Background - Quaternary
Background - Neutral 1
Background - Neutral 2
Background - Neutral 3
Background - Neutral 4
Background - Neutral 5
Background - Neutral 6
Background - Bonus 1
Background - Bonus 2
Background - Bonus 3
Text - Primary
This is some text inside of a div block.
Text - Secondary
This is some text inside of a div block.
Text - Tertiary
This is some text inside of a div block.
Text - Quaternary
This is some text inside of a div block.
Text - Black
This is some text inside of a div block.
Text - White
This is some text inside of a div block.

Images

Images are defined by the aspect ratio of their parent div, which can be adjusted across aspect ratios. Image elements use the Object Fit Cover class, while their parents use the Image class & a subclass that defines the aspect ratio like 16x5.

Tip: Image aspect ratios can be overridden at each viewport, but you must switch to tablet view to see tablet classes & mobile view to see mobile classes.

Image
16x5
Image
21x9
Image
2x1
Image
16x9
Image
4x3
Image
1x1
Image
16x5 Tab
Image
21x9 Tab
Image
2x1 Tab
Image
16x9 Tab
Image
3x4 Tab
Image
1x1 Tab
Image
16x5 Mob
Image
21x9 Mob
Image
2x1 Mob
Image
16x9 Mob
Image
4x3 Mob
Image
1x1 Mob

Buttons

 

Button
Primary
Button Text
Button
Secondary
Button Text
Button
Tertiary
Button Text
Button
Quaternary
Button Text
Button
Black
Button Text
Button
White
Button
Inverted
Button Text
Button
Inverted
Primary
Button Text
Button
Inverted
Secondary
Button Text
Button
Inverted
Tertiary
Button Text
Button
Inverted
Quaternary
Button Text
Button
Inverted
Black
Button Text
Button
Inverted
White
Button
Transparent
Button Text
Button
Transparent
Primary
Button Text
Button
Transparent
Secondary
Button Text
Button
Transparent
Tertiary
Button Text
Button
Transparent
Quaternary
Button Text
Button
Transparent
Black
Button Text
Button
Transparent
White
Button
Disabled
Button Text
Button
Disabled
Primary
Button Text
Button
Disabled
Primary
Button Text
Button
Disabled
Tertiary
Button Text
Button
Disabled
Quaternary
Button Text
Button
Disabled
Black
Button Text
Button
Disabled
White
Button Text
CTA
Primary
Text Link
CTA
Secondary
Text Link
CTA
Tertiary
Text Link
CTA
Quaternary
Text Link
CTA
Black
Text Link
CTA
White
Text Link

Forms

 

Label
Text Field
Textarea
Checkbox
Radio Button
Select
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Objects

 

Horizontal Rule
Horizontal Rule
Thin
Horizontal Rule
Thick
Horizontal Rule
Dashed
Horizontal Rule
Dotted
Horizontal Rule
Primary
Horizontal Rule
Secondary
Horizontal Rule
Tertiary
Horizontal Rule
Quaternary
Container
This is some text inside of a div block.
Unordered List
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
Ordered List
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
Unstyled List
  • This is some text inside of a div block.
  • This is some text inside of a div block.
  • This is some text inside of a div block.
Link Block

Modifiers

Modifier classes can be used to change things like display properties, corner radii, or positioning of an element.

Tip: There are modifier classes for each viewport, but you must switch to tablet view to see tablet classes & mobile view to see mobile classes.

Display All
This is some text inside of a div block.
Desktop Only
This is some text inside of a div block.
Desktop and Tablet Only
This is some text inside of a div block.
Tablet Only
This is some text inside of a div block.
Tablet and Mobile Only
This is some text inside of a div block.
Mobile Only
This is some text inside of a div block.
Hidden
Block
This is some text inside of a div block.
Inline-Block
This is some text inside of a div block.
Inline
This is some text inside of a div block.
Block Tab
This is some text inside of a div block.
Inline-Block Tab
This is some text inside of a div block.
Inline Tab
This is some text inside of a div block.
Block Mob
This is some text inside of a div block.
Inline-Block Mob
This is some text inside of a div block.
Inline Mob
This is some text inside of a div block.
Full Width
This is some text inside of a div block.
Full Height
This is some text inside of a div block.
Overflow Auto
This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block.
Overflow Hidden
This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block.
Overflow Visible
This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block.
Position Relative
Position Absolute - Top Left
Position Absolute - Top Right
Position Absolute - Bottom Left
Position Absolute - Bottom Right
Position Absolute - Center
Border Radius S
Border Radius M
Border Radius L
Border Radius - 0
Drop Shadow
Cursor - Pointer

Components

Components are examples of how the utility classes work together, but can also serve as a starting point for responsive development.

Navbar - Tablet Dropdown

Navbar - Mobile Dropdown

Basic hero

Heading

This is some text inside of a div block.
Button Text

Graphic hero

Heading

This is some text inside of a div block.

Section intro

Heading

This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block. This is some text inside of a div block.

1up

Heading

This is some text inside of a div block.

Side x Side

Heading

This is some text inside of a div block.

3up photos

Heading

Heading

Heading

3up text

This component uses Margin Offset - S to offset the far left & far right padding.

Heading

This is some text
This is some text inside of a div block.
Text Link

Heading

This is some text
This is some text inside of a div block.
Text Link

Heading

This is some text
This is some text inside of a div block.
Text Link

Card matrix

Heading
This is some text inside of a div block.
Heading
This is some text inside of a div block.
Heading
This is some text inside of a div block.
Heading
This is some text inside of a div block.
Heading
This is some text inside of a div block.
Heading
This is some text inside of a div block.

Slider

Peeking slider

Floating sidebar

Section 1

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Lorem ipsum dolar.

Section 2

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Section 3

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Frequently Asked Questions

This is a question

This is some text inside of a div block.

Logo set

Customer testimonials slider

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

Simple footer

Complex footer

Scripts

These scripts extend the functionality of Webflow.

Add spans to rich text

This Finsweet code adds a span to rich text when the class is wrapped in angle brackets on both sides of the text intended to be styled. The effect will not appear in the Webflow Designer, but will appear on the live site.

Tip: Webflow automatically changes class names to lowercase & replaces spaces with hyphens in the CSS stylesheet, so Text - Primary would actually be text---primary in the stylesheet. This script requires the stylesheet format of classes referenced, rather than the display format.

Tip: Another workaround for cases where you need a class applied within a rich text block is to create a standard text block, create a span within that text block, add a class, & then copy & paste that text into the rich text block. This approach will be appear as intended in the Webflow Designer.

Example

This is some <text---primary>primary color<text---primary> text.</text---primary></text---primary>

Current year replacement

This code, created by Sam Liew, will fill any div or span with the class Copyright Year with the current year.

Tip: Since this effect doesn't show in the Webflow Designer, it's good to use 20xx as the content of the div/span so that it can be easily identified on the live site where the Copyright Year class hasn't been added.

Note: This method is preferred to other methods because it will replace multiple dates on the same page.

Example
The year is 20xx.