Product Email Content Brand
Product Email Content Brand

Width & height

Stacks provides atomic sizing classes for percentage-based widths & heights, static widths & heights, max-widths & heights, and min-widths & heights.

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

<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

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

<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
.w50

Static widths

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

<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

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

<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

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

<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

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

<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

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

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

Min height

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

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