Image

A data display component that renders responsive images with baked-in aspect ratio and fallback controls. 

Aspect Ratio

Use the aspect-{ratio} class to control the component aspect ratio. Ratios values can include: square video auto.

For more information on all aspect ratio utilities, visit Tailwind 

Sizes

Use the image-{size} class to control the component size.

Size values can include:xssmmdlgxl.

For more information on all available sizing utilities, visit Tailwind 

SHOW CODE

SHOW CODE

SHOW CODE

SHOW CODE

SHOW CODE

Customizing

:root {
  --ex-image-size-xs: calc(var(--spacing) * 20);
  --ex-image-size-sm: calc(var(--spacing) * 24);
  --ex-image-size-md: calc(var(--spacing) * 32);
  --ex-image-size-lg: calc(var(--spacing) * 40);
  --ex-image-size-xl: calc(var(--spacing) * 48);
 
  --ex-image-radius-xs: var(--radius-sm);
  --ex-image-radius-sm: var(--radius-sm);
  --ex-image-radius-md: var(--radius-sm);
  --ex-image-radius-lg: var(--radius-sm);
  --ex-image-radius-xl: var(--radius-sm);
}

API