Widths

Helper classes for enforcing standardized widths and max-widths across layouts.

The .width-* and .max-width-* utility classes allow you to quickly constrain element dimensions using predefined layout configurations. By default, these utilities are available in small, medium, and large sizes.

Fixed Width Utilities

These classes enforce a strict width property on an element. Use them carefully, as fixed widths can cause overflow issues on smaller screens if not properly managed.

small-x

small

medium

large

HTML 
<div class="demo-grid-container margin-bottom">
  <div class="demo-grid__content width-icon">
    <img alt="" src="/assets/placeholder/graphic-icon-small-bulb.svg">
  </div>
</div>

<div class="demo-grid-container margin-bottom">
<div class="demo-grid__content width-icon">
<span class="fas fa-circle-info" aria-hidden="true"></span>
</div>
</div>


<div class="demo-grid-container margin-bottom">
<div class="demo-grid__content width-small-x">
<p class="text-center no-margin">small-x</p>
</div>
</div>


<div class="demo-grid-container margin-bottom">
<div class="demo-grid__content width-small">
<p class="text-center no-margin">small</p>
</div>
</div>


<div class="demo-grid-container margin-bottom">
<div class="demo-grid__content width-medium">
<p class="text-center no-margin">medium</p>
</div>
</div>


<div class="demo-grid-container margin-bottom">
<div class="demo-grid__content width-large">
<p class="text-center no-margin">large</p>
</div>
</div>

Max-Width Utilities

These classes enforce a max-width property. They are much safer for responsive design because the element will still shrink fluidly to fit smaller viewports. They are often used in combination with margin-auto to create centered layout blocks.

width-small (centered)

width-medium (centered)

width-large (centered)

HTML 
<div class="demo-grid-container margin-bottom">
  <div class="demo-grid__content max-width-small margin-auto">
    <p class="text-center no-margin">width-small (centered)</p>
  </div>
</div>

<div class="demo-grid-container margin-bottom">
<div class="demo-grid__content max-width-medium margin-auto">
<p class="text-center no-margin">width-medium (centered)</p>
</div>
</div>


<div class="demo-grid-container margin-bottom">
<div class="demo-grid__content max-width-large margin-auto">
<p class="text-center no-margin">width-large (centered)</p>
</div>
</div>

Full Width

To force an element to span the entire width of its container, use the pre-existing .full-width utility class.

.full-width

HTML 
<div class="demo-grid-container margin-bottom">
  <div class="demo-grid__content full-width">
    <p class="text-center no-margin">.full-width</p>
  </div>
</div>