Frame

Caution

Status: Alpha (learn more)

Wrap any img or video element in a .dxp-frame container to create a responsive frame that maintains a consistent aspect ratio.

<div class="tng-frame">
  <img src="/toyota.webp" alt="Toyota Mania" />
</div>

Aspect Ratio

1:1

<div class="tng-frame is-1-1">
  <div class="tng-slot"></div>
</div>

3:4

<div class="tng-frame is-3-4">
  <div class="tng-slot"></div>
</div>

4:3

<div class="tng-frame is-4-3">
  <div class="tng-slot"></div>
</div>

9:16

<div class="tng-frame is-9-16">
  <div class="tng-slot"></div>
</div>

16:9

<div class="tng-frame is-16-9">
  <div class="tng-slot"></div>
</div>

21:9

<div class="tng-frame is-21-9">
  <div class="tng-slot"></div>
</div>