Data display
Image
An image container with an optional caption overlay slot.
Anatomy
No interactive example yet. The anatomy for this component lives in the Figma file; the tables below describe it.
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Image | Radius 12px | Required |
| 2 | Caption overlay | Optional slot | Optional |
Specifications
| Border radius | Rounded 12px |
|---|---|
| Slot | Caption metadata overlay |
Interaction
| Key | Result |
|---|---|
| None | Not focusable |
| Trigger | Response |
|---|---|
| Hover | None |
Accessibility
role · image
1.1.1Non-text Content1.4.3Contrast (Minimum)
| Requirement | How Rig meets it |
|---|---|
| Alt text | Describe what matters in context. alt="" when decorative. |
| Caption overlay | Text over an image needs a scrim to reach 4.5:1 |
| Responsive | Provide intrinsic width and height to avoid layout shift |
Read the matching WAI pattern ↗
Usage
| Do | Don’t |
|---|---|
| Write alt text for the purpose, not the pixels | Do not start alt text with “image of” |