Width & height

Widths

Width classes

Width classes are provided at each fixed stop of our pixel-based sizing scale.

Class	Output	Responsive?
`.w0`	width: 0;
`.w2`	width: 2px;
`.w4`	width: 4px;
`.w6`	width: 6px;
`.w8`	width: 8px;
`.w12`	width: 12px;
`.w16`	width: 16px;
`.w24`	width: 24px;
`.w32`	width: 32px;
`.w48`	width: 48px;
`.w64`	width: 64px;
`.w96`	width: 96px;
`.w128`	width: 128px;

Width examples

Section titled Width examples

<div class="w2">…</div>
<div class="w4">…</div>
<div class="w6">…</div>
<div class="w8">…</div>
<div class="w12">…</div>
<div class="w16">…</div>
<div class="w24">…</div>
<div class="w32">…</div>
<div class="w48">…</div>
<div class="w64">…</div>
<div class="w96">…</div>
<div class="w128">…</div>

.w2

.w4

.w6

.w8

.w12

.w16

.w24

.w32

.w48

.w64

.w96

.w128

Fluid width

Section titled Fluid width

Fluid width classes

Section titled Fluid width classes

Class	Output	Responsive?
`.w-auto`	width: auto;
`.w0`	width: 0;
`.w10`	width: 10%;
`.w20`	width: 20%;
`.w25`	width: 25%;
`.w30`	width: 30%;
`.w33`	width: 33.33%;
`.w40`	width: 40%
`.w50`	width: 50%;
`.w60`	width: 60%;
`.w66`	width: 66.67%;
`.w70`	width: 70%;
`.w75`	width: 75%;
`.w80`	width: 80%;
`.w90`	width: 90%;
`.w100`	width: 100%;
`.w-screen`	width: 100vw;

Fluid width examples

Section titled Fluid width examples

<div class="w0">…</div>
<div class="w10">…</div>
<div class="w20">…</div>
<div class="w25">…</div>
<div class="w30">…</div>
<div class="w33">…</div>
<div class="w40">…</div>
<div class="w50">…</div>
<div class="w60">…</div>
<div class="w70">…</div>
<div class="w75">…</div>
<div class="w80">…</div>
<div class="w90">…</div>
<div class="w100">…</div>
<div class="w-screen">…</div>

.w100

.w10

.w90

.w20

.w80

.w25

.w75

.w30

.w70

.w33

.w66

.w40

.w60

.w50

.w-screen

Static widths

Section titled Static widths

Static widths are based on the full width of our 12-column grid. The grid is defined in rems, which are tied to the base font size. At the default font size, the full width is 1264px. A single column is approximately 105px.

At the smallest breakpoint, our font size is reduced, and these static widths are therefore also reduced.

Static width classes

Section titled Static width classes

Class	Output	Responsive?
`.ws1`	width: 105px;
`.ws2`	width: 211px;
`.ws3`	width: 316px;
`.ws4`	width: 421px;
`.ws5`	width: 527px;
`.ws6`	width: 632px;
`.ws7`	width: 737px;
`.ws8`	width: 843px;
`.ws9`	width: 948px;
`.ws10`	width: 1053px;
`.ws11`	width: 1159px;
`.ws12`	width: 1264px;

Static width examples

Section titled Static width examples

<div class="ws1">…</div>
<div class="ws2">…</div>
<div class="ws2">…</div>
<div class="ws3">…</div>
<div class="ws4">…</div>
<div class="ws5">…</div>
<div class="ws6">…</div>
<div class="ws7">…</div>
<div class="ws7">…</div>
<div class="ws8">…</div>
<div class="ws9">…</div>
<div class="ws10">…</div>
<div class="ws11">…</div>
<div class="ws12">…</div>

.ws1

.ws2

.ws3

.ws4

.ws5

.ws6

.ws7

.ws8

.ws9

.ws10

.ws11

.ws12

Max width

Section titled Max width

Max width classes

Section titled Max width classes

Class	Output	Responsive?
`.wmx-initial`	max-width: initial;
`.wmx1`	max-width: 105px;
`.wmx2`	max-width: 211px;
`.wmx25`	max-width: 25%;
`.wmx3`	max-width: 316px;
`.wmx4`	max-width: 421px;
`.wmx5`	max-width: 527px;
`.wmx50`	max-width: 50%;
`.wmx6`	max-width: 632px;
`.wmx7`	max-width: 737px;
`.wmx8`	max-width: 843px;
`.wmx75`	max-width: 75%;
`.wmx9`	max-width: 948px;
`.wmx10`	max-width: 1053px;
`.wmx11`	max-width: 1159px;
`.wmx12`	max-width: 1264px;
`.wmx100`	max-width: 100%;
`.wmx-screen`	max-width: 100vw;

Max width examples

Section titled Max width examples

<div class="wmx-initial">…</div>
<div class="wmx1">…</div>
<div class="wmx2">…</div>
<div class="wmx25">…</div>
<div class="wmx3">…</div>
<div class="wmx4">…</div>
<div class="wmx5">…</div>
<div class="wmx50">…</div>
<div class="wmx6">…</div>
<div class="wmx7">…</div>
<div class="wmx75">…</div>
<div class="wmx8">…</div>
<div class="wmx9">…</div>
<div class="wmx10">…</div>
<div class="wmx11">…</div>
<div class="wmx12">…</div>
<div class="wmx100">…</div>
<div class="wmx-screen">…</div>

.wmx1

.wmx2

.wmx25

.wmx3

.wmx4

.wmx5

.wmx50

.wmx6

.wmx7

.wmx75

.wmx8

.wmx9

.wmx10

.wmx11

.wmx12

.wmx-screen

Min width

Section titled Min width

Min width classes

Section titled Min width classes

Class	Output	Responsive?
`.wmn-initial`	min-width: initial;
`.wmn0`	min-width: 0;
`.wmn1`	min-width: 105px;
`.wmn2`	min-width: 211px;
`.wmn25`	min-width: 25%;
`.wmn3`	min-width: 316px;
`.wmn4`	min-width: 421px;
`.wmn5`	min-width: 527px;
`.wmn50`	min-width: 50%;
`.wmn6`	min-width: 632px;
`.wmn7`	min-width: 737px;
`.wmn75`	min-width: 75%;
`.wmn8`	min-width: 843px;
`.wmn9`	min-width: 948px;
`.wmn10`	min-width: 1053px;
`.wmn11`	min-width: 1159px;
`.wmn12`	min-width: 1264px;
`.wmn100`	min-width: 100%;

Min width examples

Section titled Min width examples

<div class="wmn-initial">…</div>
<div class="wmn0">…</div>
<div class="wmn1">…</div>
<div class="wmn2">…</div>
<div class="wmn25">…</div>
<div class="wmn3">…</div>
<div class="wmn4">…</div>
<div class="wmn5">…</div>
<div class="wmn50">…</div>
<div class="wmn6">…</div>
<div class="wmn7">…</div>
<div class="wmn75">…</div>
<div class="wmn8">…</div>
<div class="wmn9">…</div>
<div class="wmn10">…</div>
<div class="wmn11">…</div>
<div class="wmn12">…</div>
<div class="wmn100">…</div>

.wmn0

.wmn1

.wmn2

.wmn25

.wmn3

.wmn4

.wmn5

.wmn50

.wmn6

.wmn7

.wmn75

.wmn8

.wmn9

.wmn10

.wmn11

.wmn12

Height

Section titled Height

Height classes

Section titled Height classes

Height classes are provided at each fixed stop of our sizing scale.

Class	Output	Responsive?
`.h0`	height: 0;
`.h2`	height: 2px;
`.h4`	height: 4px;
`.h6`	height: 6px;
`.h8`	height: 8px;
`.h12`	height: 12px;
`.h16`	height: 16px;
`.h24`	height: 24px;
`.h32`	height: 32px;
`.h48`	height: 48px;
`.h64`	height: 64px;
`.h96`	height: 96px;
`.h128`	height: 128px;

Height examples

Section titled Height examples

<div class="h2">…</div>
<div class="h4">…</div>
<div class="h6">…</div>
<div class="h8">…</div>
<div class="h12">…</div>
<div class="h16">…</div>
<div class="h24">…</div>
<div class="h32">…</div>
<div class="h48">…</div>
<div class="h64">…</div>
<div class="h96">…</div>
<div class="h128">…</div>

.h2

.h4

.h6

.h8

.h12

.h16

.h24

.h32

.h48

.h64

.h96

.h128

Static Height

Section titled Static Height

Static height classes

Section titled Static height classes

Class	Output	Responsive?
`.hs1`	height: 105px;
`.hs2`	height: 211px;
`.hs3`	height: 316px;
`.hs4`	height: 421px;
`.hs5`	height: 527px;
`.hs6`	height: 632px;
`.hs7`	height: 737px;
`.hs8`	height: 843px;
`.hs9`	height: 948px;
`.hs10`	height: 1053px;
`.hs11`	height: 1159px;
`.hs12`	height: 1264px;

Fluid height classes

Section titled Fluid height classes

Class	Output	Responsive?
`.h-auto`	height: auto;
`.h0`	height: 0;
`.h100`	height: 100%;
`.h-screen`	height: 100vh;

Min height

Section titled Min height

Min height classes

Section titled Min height classes

Class	Output	Responsive?
`.hmn-initial`	min-height: initial;
`.hmn0`	min-height: 0;
`.hmn1`	min-height: 105px;
`.hmn2`	min-height: 211px;
`.hmn3`	min-height: 316px;
`.hmn4`	min-height: 421px;
`.hmn5`	min-height: 527px;
`.hmn6`	min-height: 632px;
`.hmn7`	min-height: 737px;
`.hmn8`	min-height: 843px;
`.hmn9`	min-height: 948px;
`.hmn10`	min-height: 1053px;
`.hmn11`	min-height: 1159px;
`.hmn12`	min-height: 1264px;
`.hmn100`	min-height: 100%;
`.hmn-screen`	min-height: 100vh;

Max height

Section titled Max height

Max height classes

Section titled Max height classes

Class	Output	Responsive?
`.hmx-initial`	max-height: initial;
`.hmx1`	max-height: 105px;
`.hmx2`	max-height: 211px;
`.hmx3`	max-height: 316px;
`.hmx4`	max-height: 421px;
`.hmx5`	max-height: 527px;
`.hmx6`	max-height: 632px;
`.hmx7`	max-height: 737px;
`.hmx8`	max-height: 843px;
`.hmx9`	max-height: 948px;
`.hmx10`	max-height: 1053px;
`.hmx11`	max-height: 1159px;
`.hmx12`	max-height: 1264px;
`.hmx100`	max-height: 100%;
`.hmx-screen`	max-height: 100vh;