Skip to main content
Design System

Widths

Percentages

0% Width
10% Width
20% Width
25% Width
30% Width
33% Width
40% Width
50% Width
60% Width
67% Width
70% Width
75% Width
80% Width
90% Width
100% Width
<!-- width 0 -->
<div class="u-width-0"><p>0% Width</p></div>

<!-- width 10 -->
<div class="u-width-10"><p>10% Width</p></div>

<!-- width 20 -->
<div class="u-width-20"><p>20% Width</p></div>

<!-- width 25 -->
<div class="u-width-25"><p>25% Width</p></div>

<!-- width 30 -->
<div class="u-width-30"><p>30% Width</p></div>
	
<!-- width 33 -->
<div class="u-width-33"><p>33% Width</p></div>
	
<!-- width 40 -->
<div class="u-width-40"><p>40% Width</p></div>
	
<!-- width 50 -->
<div class="u-width-50"><p>50% Width</p></div>
	
<!-- width 60 -->
<div class="u-width-60"><p>60% Width</p></div>
	
<!-- width 67 -->
<div class="u-width-67"><p>67% Width</p></div>
	
<!-- width 70 -->
<div class="u-width-70"><p>70% Width</p></div>
	
<!-- width 75 -->
<div class="u-width-75"><p>75% Width</p></div>
	
<!-- width 80 -->
<div class="u-width-80"><p>80% Width</p></div>
	
<!-- width 90 -->
<div class="u-width-90"><p>90% Width</p></div>
	
<!-- width 100 -->
<div class="u-width-100"><p>100% Width</p></div>

Back to top

Auto

Auto Width
<!-- width auto -->
<div class="u-width-auto"><p>Auto Width</p></div>

Back to top

REM Units

9.25rem Width
11.25rem Width
13.5rem Width
17.5rem Width
20rem Width
<!-- width 9.25rem -->
<div class="u-width-9-25rem"><p>9.25rem Width</p></div>
								
<!-- width 11.25rem -->
<div class="u-width-11.25rem"><p>11.25rem Width</p></div>

<!-- width 13.5rem -->
<div class="u-width-13.5rem"><p>13.5rem Width</p></div>
								
<!-- width 17.5rem -->
<div class="u-width-17.5rem"><p>17.5rem Width</p></div>
								
<!-- width 20rem -->
<div class="u-width-20rem"><p>20rem Width</p></div>

Back to top

Globals

Inherit Width
Initial Width
Unset Width
<!-- width inherit -->
<div class="u-width-inherit"><p>Inherit Width</p></div>

<!-- width initial -->
<div class="u-width-initial"><p>Initial Width</p></div>

<!-- width unset -->
<div class="u-width-unset"><p>Unset Width</p></div>

Back to top