t-aspect-ratio
This component contains its content in a specific aspect ratio.
Basic usage
I'm a 9/16 Box!
<TAspectRatio ratio={9 / 16}>
<TCard design="outlined">I'm a 9/16 Box!</TCard>
</TAspectRatio>
Usage with Image Grid
<TGrid cols="3" gap="2">
<TAspectRatio ratio="1">
<TImage src="https://source.unsplash.com/500x500/?newyork" />
</TAspectRatio>
<TAspectRatio ratio="1">
<TImage src="https://source.unsplash.com/500x500/?dubai" />
</TAspectRatio>
<TAspectRatio ratio="1">
<TImage src="https://source.unsplash.com/500x500/?london" />
</TAspectRatio>
</TGrid>
API
No options available