Collection of theme-ui and external components.
created:3/15/2021
updated:3/15/2021
source lines:34
comments %:0

AspectRatio

Component for maintaining a fluid-width aspect ratio

Overview

Aspect Ratio

({ ratio }) => (
<Box sx={{ width: 100, height: 80 }}>
<AspectRatio ratio={ratio}>
<Heading>Aspect Ratio</Heading>
</AspectRatio>
</Box>
)

Controls

Name
Description
Default
Controls
ratio
number
-

A11y tests

Aspect Ratio

Viewport

Aspect Ratio

320px

Aspect Ratio

375px

Aspect Ratio

768px

Aspect Ratio

1024px