Controlling widths (inline size) and heights (block size) of blocks in one dimension (width or height).

See also wrapper layouts

Width constraint wrappers

Note: width suffixes (-xs, -sm etc.) set the max-width of an element at those specified variables, whereas responsive prefixes (xs:, sm: etc.) set the media query breakpoint width at which the utility class takes effect.

All Carbon w- utility classes allow block elements to have less than their specified width if there isn’t enough space — e.g. if the device width is narrower, or if used within a column that is narrower.

Max-widths

Similar to wrappers, max-width utilities are set at 256px increments – as is traditionally used in many web design layouts. They are first set to width: 100% and then constrained to these max-widths.

Therefore, blocks with little or no content will be stretched to their max width (or, so far as the viewport width allows, if it is less than the max-width).

• w-xxs – max-width: 256px
• w-xs – max-width: 512px
• w-sm – max-width: 768px
• w-md – max-width: 1024px
• w-lg – max-width: 1280px
• w-xl – max-width: 1536px
• w-xxl – max-width: 1792px
• w-max-100vw - max-width: 100vw

Max-width overrides

You can use one of these, for example, when you want an offcanvas sidebar with offcanvas-override, where you don’t want its width constrained to w-xxs on a wider viewport, because you have it incorporated into a layout grid column.

• w-auto / xs:w-auto / sm:w-auto / etc.

Percentile widths

• w-10%
• w-20%
• w-25%
• w-30%
• w-33%
• w-40%
• w-50%
• w-60%
• w-66%
• w-75%
• w-80%
• w-90%
• w-100%

Height constraint wrappers

Min-heights

• h-50vh / h-100vh (aliased to h-screen)

These utilities will make a block have a minimum of 50vh or 100vh.

Heights

• h-100% (aliased to h-full)

This utility will stretch a block vertically to fill the available space. This can be useful e.g. for “equalizing” the heights of inner-wrappers within flexbox flex-items.

Max-heights

• h-max-100%

This utility will cause the height of an element to max out at the height of the viewport. This is useful e.g. for tall modals with a lot of scrolling content.

Two Dimensions

Some simple utilities for controlling blocks in two dimensions (width and height).

You can also control blocks two-dimensionally using flexbox, grid, and aspect-ratios.

Box

The box utility expands an element to the full width and height of its wrapping block – provided the wrapping block has position: relative (e.g. using the relative utility class).

box has position: absolute, therefore it will be displayed on a layer behind or in front of any sibling elements within the same wrapper – depending on the HTML DOM order.

Overlay title

Lorem ipsum dolor sit amet...

<div class="aspect-ratio-16:9 relative">
  <img class="box img-cover" src="/img/lighter-image-example.jpg" width="1280" height="853" loading="lazy" alt="Box example">
  <div class="aspect-ratio-16:9 flex items-center">
    <div class="m-5 p-3 bg-white-glass-3 t-center">
      <h1>Overlay title</h1>
      <p>Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
</div>