Components
Link SOONNavigation Menu SOONBreadcrumbs SOONPagination SOONStepper SOON
Collapsible SOONAccordion SOONTabs SOON
H1 SOONH2 SOONH3 SOONH4 SOONH5 SOONH6 SOONP SOONSpan SOONEm SOONI SOONStrong SOONB SOONQ SOONBlockquote SOONUl SOONOl SOONKbd SOONCode SOONTable of Contents SOON
Icon SOONAvatar SOONAvatar Group SOONImage SOONVideo SOON
Notification SOONNotification Panel SOONToast SOONAlert SOON
Spinner SOONProgress Bar SOON
Button SOONBurger Button SOONButton Group SOON
Article Preview SOONBadge SOONCard SOONCommand Line SOONTable SOONTag SOONTag Group SOONTag Picker SOONTestimonial SOONProduct Tile SOONSkeleton SOONStatistic SOON
Address Input SOONCheckbox SOONCalendar Input SOONCalendar Range Input SOONColor Picker SOONCurrency Input SOONCredit Card Input SOONDate Input SOONDate Picker SOONDate Range Input SOONDate Range Picker SOONFieldset SOONFile Input SOONFile Dropzone SOONFile Picker SOONLabel SOONPin Input SOONPhone Number Input SOONRadio Button SOONRadio Group SOONRange Slider SOONRating SOONSearch Input SOONSwitch SOONSegmented Control SOONSelect SOONSlider SOONText Input SOONTextarea SOONToggle SOONToggle Group SOONURL Input SOON
TBD SOON
Aspect Ratio
Displays content within a desired ratio.
Features
- Accepts any custom ratio.
Parts and their API
AspectRatio
Displays content within a desired ratio.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| ratio | number | 1 | The ratio to display the content within. |
Usage
AspectRatioExample.tsx
- 1
- 2
- 3
<AspectRatio ratio={16 / 9}> <img src={blueSkies} alt="By Sarah Lee on Unsplash" className="h-full w-full rounded-xl object-cover" /></AspectRatio>Here's the <AspectRatio /> component in action.
