Container

Container query utilities for component-level responsive design.

Inline Size Containment

This card is inside an inline-size container

Base

Class	Description
`.ui-container`	Base class

Size Containment

Inside a size container

<!-- Establish containment on both axes for container queries on width and height. -->
<div class="ui-container-size ui-p-2" style="background: var(--ui-color-bg-muted); block-size: 12rem">
  <div class="ui-card">Inside a size container</div>
</div>

Remove Containment

No containment on this container

<!-- Reset container type back to normal (no containment). -->
<div class="ui-container-normal ui-p-2 ui-bg-muted">
  <div class="ui-card">No containment on this container</div>
</div>

With Responsive Card

Card switches to horizontal layout when container is wide enough

<!-- Combine container-inline with card--responsive for automatic horizontal layout at wider container sizes. -->
<div class="ui-container-inline">
  <div class="ui-card ui-card--responsive">
    <div class="ui-card__media" style="background: var(--ui-color-bg-muted); min-block-size: 6rem"></div>
    <div class="ui-card__body">Card switches to horizontal layout when container is wide enough</div>
  </div>
</div>