Max Widths | Illinois State Design System

Percentages

0% Max Width

10% Max Width

20% Max Width

25% Max Width

30% Max Width

33% Max Width

40% Max Width

50% Max Width

60% Max Width

67% Max Width

70% Max Width

75% Max Width

80% Max Width

90% Max Width

100% Max Width

<!-- max width 0 -->
<div class="u-max-width-0"><p>0% Max Width</p></div>

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

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

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

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

Back to top

Integers

1200px Max Width

<!-- max width 1200 -->
<div class="u-max-width-1200"><p>1200px Max Width</p></div>

Back to top

None

No Max Width

<!-- max width none -->
<div class="u-max-width-none"><p>No Max Width</p></div>

Back to top

Keywords

Fit Content Max Width

Max Content Max Width

Min Content Max Width

<!-- width inherit -->
<div class="u-max-width-fit-content"><p>Fit Content Max Width</p></div>

<!-- width initial -->
<div class="u-max-width-max-content"><p>Max Content Max Width</p></div>

<!-- width unset -->
<div class="u-max-width-min-content"><p>Min Content Max Width</p></div>

Back to top

Globals

Inherit Max Width

Initial Max Width

Unset Max Width

<!-- max width inherit -->
<div class="u-max-width-inherit"><p>Inherit Max Width</p></div>

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

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

Back to top