:root { --body-vw: 18vw; --body-px: 18px; --text-l-vw: 20vw; --text-l-px: 20px; --text-m-vw: 16vw; --text-m-px: 16px; --text-s-vw: 14vw; --text-s-px: 14px; --xxl-vw: 64vw; --xxl-px: 64px; --xl-vw: 56vw; --xl-px: 56px; --l-vw: 42vw; --l-px: 42px; --m-vw: 36vw; --m-px: 36px; --s-vw: 24vw; --s-px: 24px; --xs-vw: 20vw; --xs-px: 20px; } @media only screen and (min-width: 1440px) { body { font-size: calc((var(--body-vw)) / 1440 * 100); } .text-l { font-size: calc((var(--text-l-vw)) / 1440 * 100); } .text-m { font-size: calc((var(--text-m-vw)) / 1440 * 100); } .text-s { font-size: calc((var(--text-s-vw)) / 1440 * 100); } h1, .headline.xxl { font-size: calc((var(--xxl-vw)) / 1440 * 100); } h2, .headline.xl { font-size: calc((var(--xl-vw)) / 1440 * 100); } h3, .headline.l { font-size: calc((var(--l-vw)) / 1440 * 100); } h4, .headline.m { font-size: calc((var(--m-vw)) / 1440 * 100); } h5, .headline.s { font-size: calc((var(--s-vw)) / 1440 * 100); } h6, .headline.xs { font-size: calc((var(--xs-vw)) / 1440 * 100); } } @media only screen and (min-width: 1920px) { body { font-size: calc((var(--body-px)) * 1.3333); } .text-l { font-size: calc((var(--text-l-px)) * 1.3333); } .text-m { font-size: calc((var(--text-m-px)) * 1.3333); } .text-s { font-size: calc((var(--text-s-px)) * 1.3333); } h1, .headline.xxl { font-size: calc((var(--xxl-px)) * 1.3333); } h2, .headline.xl { font-size: calc((var(--xl-px)) * 1.3333); } h3, .headline.l { font-size: calc((var(--l-px)) * 1.3333); } h4, .headline.m { font-size: calc((var(--m-px)) * 1.3333); } h5, .headline.s { font-size: calc((var(--s-px)) * 1.3333); } h6, .headline.xs { font-size: calc((var(--xs-px)) * 1.3333); } }

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.