Ratio Box

The Ratio Box component is used to maintain a specific aspect ratio for content, commonly used for responsive iframes or images.

Examples

Default (4/3)

By default, the ratio box uses a 4/3 aspect ratio.

HTML 
<div class="ratio-box">
  <iframe
    class="ratio-box__content"
    src="https://www.youtube.com/embed/y0sF5xhGreA?si=aRdiK0Xzf3zvHP_E"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen>
  </iframe>
</div>

16x9 Modifier

You can use modifier classes like .ratio-box--16x9 to apply different aspect ratios.

HTML 
<div class="ratio-box ratio-box--16x9">
  <iframe
    class="ratio-box__content"
    src="https://www.youtube.com/embed/y0sF5xhGreA?si=aRdiK0Xzf3zvHP_E"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen>
  </iframe>
</div>