Layout
Ratio
A box that holds the aspect ratio of an embed, such as an iframe, video, or image.
ReactVueWeb Components
View in Storybook Playground
Examples
<Ratio ratio="16x9"><iframe title="demo" src="…" /></Ratio>
<Ratio ratio={[3, 2]}><img src="…" alt="" /></Ratio>Props
| Name | Type | Default | Description |
|---|---|---|---|
ratio | RatioValue | 16x9 | Aspect ratio. @default '16x9' |
children required | ReactNode | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.