Data Display
Image
Image component displays photographic or illustrative content in a consistent and responsive manner. It supports configurable aspect ratios, corner styles, and overlays to maintain visual consistency across interfaces.
Examples
AccessibilityWCAG 2.1 Level AA Compliant
Features4 checks
- Requires alt text for all images (enforced via required prop)
- Decorative images can use alt="" to hide from screen readers
- Loading state announced via aria-busy attribute
- Error fallback is accessible and announced to assistive technology
When to use this component
✓Do's
- •Displaying responsive photos or illustrations
- •Hero banners with aspect ratio control
- •User avatars or profile photos with fallback
✗Don'ts
- •Displaying icons, use Icon component
- •Background decorations, use CSS background-image
- •SVG illustrations, use inline SVG or Icon
Do's and Don'ts
✓ Do's
Use correct aspect ratios for the context, 16:9 for banners, 1:1 for profiles, 4:3 for cards.
Use rounded radius for cards and square containers to match surrounding UI.
✗ Don'ts
Don't stretch or distort images, always use object-fit: cover to maintain aspect ratio.
Don't use fill overlay on informational images where content visibility matters.