Skip to content

ComponentsAspectRatio

Components

AspectRatio

Thumbnail box (search palette, artifact gallery, template tiles): 16:10 by default, image anchored to the top, ring kept visible over the image in dark mode.

Thumbnail recipe

The ring sits on an ::after overlay so the image cannot cover it (the dark ring is inset).

16 / 10 (default)
light
dark

Other ratios

Any ratio via the ratio prop; class lands on the inner box.

1 / 1, 4 / 3, 16 / 9
1.00
1.33
1.78