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).
light%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%2240%22%20width%3D%22560%22%20height%3D%2256%22%20rx%3D%2210%22%20fill%3D%22%23fff%22%20opacity%3D%22.85%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%22120%22%20width%3D%22360%22%20height%3D%2224%22%20rx%3D%226%22%20fill%3D%22%23fff%22%20opacity%3D%22.6%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%22160%22%20width%3D%22300%22%20height%3D%2224%22%20rx%3D%226%22%20fill%3D%22%23fff%22%20opacity%3D%22.45%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%22420%22%20width%3D%22200%22%20height%3D%2224%22%20rx%3D%226%22%20fill%3D%22%23fff%22%20opacity%3D%22.45%22%2F%3E%3C%2Fsvg%3E)
%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%2240%22%20width%3D%22560%22%20height%3D%2256%22%20rx%3D%2210%22%20fill%3D%22%23fff%22%20opacity%3D%22.85%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%22120%22%20width%3D%22360%22%20height%3D%2224%22%20rx%3D%226%22%20fill%3D%22%23fff%22%20opacity%3D%22.6%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%22160%22%20width%3D%22300%22%20height%3D%2224%22%20rx%3D%226%22%20fill%3D%22%23fff%22%20opacity%3D%22.45%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%22420%22%20width%3D%22200%22%20height%3D%2224%22%20rx%3D%226%22%20fill%3D%22%23fff%22%20opacity%3D%22.45%22%2F%3E%3C%2Fsvg%3E)
dark%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%2240%22%20width%3D%22560%22%20height%3D%2256%22%20rx%3D%2210%22%20fill%3D%22%23fff%22%20opacity%3D%22.85%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%22120%22%20width%3D%22360%22%20height%3D%2224%22%20rx%3D%226%22%20fill%3D%22%23fff%22%20opacity%3D%22.6%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%22160%22%20width%3D%22300%22%20height%3D%2224%22%20rx%3D%226%22%20fill%3D%22%23fff%22%20opacity%3D%22.45%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%22420%22%20width%3D%22200%22%20height%3D%2224%22%20rx%3D%226%22%20fill%3D%22%23fff%22%20opacity%3D%22.45%22%2F%3E%3C%2Fsvg%3E)
%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%2240%22%20width%3D%22560%22%20height%3D%2256%22%20rx%3D%2210%22%20fill%3D%22%23fff%22%20opacity%3D%22.85%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%22120%22%20width%3D%22360%22%20height%3D%2224%22%20rx%3D%226%22%20fill%3D%22%23fff%22%20opacity%3D%22.6%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%22160%22%20width%3D%22300%22%20height%3D%2224%22%20rx%3D%226%22%20fill%3D%22%23fff%22%20opacity%3D%22.45%22%2F%3E%3Crect%20x%3D%2240%22%20y%3D%22420%22%20width%3D%22200%22%20height%3D%2224%22%20rx%3D%226%22%20fill%3D%22%23fff%22%20opacity%3D%22.45%22%2F%3E%3C%2Fsvg%3E)
Other ratios
Any ratio via the ratio prop; class lands on the inner box.
1.00
1.33
1.78