Width & height

Widths

Width classes

Width classes are provided at each fixed stop of our 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%;

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>

.w100

.w10

.w90

.w20

.w80

.w25

.w75

.w30

.w70

.w33

.w66

.w40

.w60

.w50

Static widths

Section titled Static widths

Static width classes

Section titled Static width classes

Static widths are based on the full site width of 1264px.

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%;

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>

.wmx1

.wmx2

.wmx25

.wmx3

.wmx4

.wmx5

.wmx50

.wmx6

.wmx7

.wmx75

.wmx8

.wmx9

.wmx10

.wmx11

.wmx12

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%;

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%;

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%;

Sections