StartFoundationsComponentsContent
Overview Color Typography Spacing Radius Elevation Focus Motion Icons Aspect ratio

Aspect ratio

Five named proportions for media boxes, so the space is reserved before the content loads.

<tk-aspect-ratio ratio="1/1" style="inline-size: 120px"><tk-skeleton shape="rect"></tk-skeleton></tk-aspect-ratio>
<tk-aspect-ratio ratio="4/3" style="inline-size: 120px"><tk-skeleton shape="rect"></tk-skeleton></tk-aspect-ratio>
<tk-aspect-ratio ratio="16/9" style="inline-size: 120px"><tk-skeleton shape="rect"></tk-skeleton></tk-aspect-ratio>
Token CSS variable Ratio Use for
aspect-ratio-1-1 --aspect-ratio-1-1 1 / 1 avatars, thumbnails, tiles
aspect-ratio-16-9 --aspect-ratio-16-9 16 / 9 video, hero media, cards; the default
aspect-ratio-4-3 --aspect-ratio-4-3 4 / 3 classic photos
aspect-ratio-3-4 --aspect-ratio-3-4 3 / 4 vertical cards, cover art
aspect-ratio-3-2 --aspect-ratio-3-2 3 / 2 editorial photography
  • Wrap media in Aspect ratio: ratio="16/9" takes a slash; the token name writes it with a dash.
  • Or use a token in CSS: aspect-ratio: var(--aspect-ratio-1-1).
  • Another ratio, such as 21 / 9: set --tk-aspect-ratio: 21 / 9 on tk-aspect-ratio.