Image
Responsive image with fallback placeholder, optional caption, and shape modifiers.
Default
Base
| Class | Description |
|---|---|
.ui-image | Base class |
Size
| Class | Value |
|---|---|
.ui-image--sm | sm |
.ui-image--md | md |
.ui-image--lg | lg |
.ui-image--xl | xl |
.ui-image--full | full |
Rounded
| Class | Description |
|---|---|
.ui-image--rounded | rounded |
Circle
| Class | Description |
|---|---|
.ui-image--circle | circle |
Object-fit
| Class | Value |
|---|---|
.ui-image--cover | cover |
.ui-image--contain | contain |
.ui-image--circle | circle |
Override these CSS custom properties to customize the component.
| Token | Default | Description |
|---|---|---|
--ui-image-size |
auto |
Overall size |
--ui-image-radius |
0 |
Corner radius |
--ui-image-object-fit |
cover |
Object fit |
--ui-image-bg |
var(--ui-color-bg-muted) |
Background color |
--ui-image-caption-color |
var(--ui-color-text-muted) |
Caption color |
--ui-image-caption-font-size |
var(--ui-font-size-sm) |
Caption font size |
--ui-image-caption-spacing |
var(--ui-space-1) |
Caption spacing |
--ui-image-size-sm |
calc(var(--ui-unit) * 12) |
Overall size at small size |
--ui-image-size-md |
calc(var(--ui-unit) * 24) |
Overall size at medium size |
--ui-image-size-lg |
calc(var(--ui-unit) * 40) |
Overall size at large size |
--ui-image-size-xl |
calc(var(--ui-unit) * 60) |
Overall size at extra-large size |
--ui-image-radius-rounded |
var(--ui-radius-lg) |
Radius rounded |
--ui-image-radius-circle |
50% |
Radius circle |
Sizes
<figure class="ui-image ui-image--sm">
<img class="ui-image__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Crect fill='%2390a4ae' width='96' height='96'/%3E%3C/svg%3E" alt="Small"></img>
</figure>
<figure class="ui-image ui-image--md">
<img class="ui-image__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Crect fill='%2378909c' width='192' height='192'/%3E%3C/svg%3E" alt="Medium"></img>
</figure>
<figure class="ui-image ui-image--lg">
<img class="ui-image__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Crect fill='%23607d8b' width='320' height='320'/%3E%3C/svg%3E" alt="Large"></img>
</figure>
<figure class="ui-image ui-image--xl">
<img class="ui-image__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Crect fill='%23546e7a' width='480' height='480'/%3E%3C/svg%3E" alt="XL"></img>
</figure>
<figure class="ui-image ui-image--full">
<img class="ui-image__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='200'%3E%3Crect fill='%23455a64' width='600' height='200'/%3E%3C/svg%3E" alt="Full"></img>
</figure>Rounded
<figure class="ui-image ui-image--md ui-image--rounded">
<img class="ui-image__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='140'%3E%3Crect fill='%234db6ac' width='192' height='140'/%3E%3C/svg%3E" alt="Rounded"></img>
</figure>Circle
<figure class="ui-image ui-image--sm ui-image--circle">
<img class="ui-image__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Crect fill='%23ce93d8' width='96' height='96'/%3E%3C/svg%3E" alt="Circle small"></img>
</figure>
<figure class="ui-image ui-image--md ui-image--circle">
<img class="ui-image__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Crect fill='%23ba68c8' width='192' height='192'/%3E%3C/svg%3E" alt="Circle medium"></img>
</figure>Object Fit
<figure class="ui-image ui-image--md ui-image--cover">
<img class="ui-image__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect fill='%2364b5f6' width='300' height='150'/%3E%3Ctext x='150' y='80' text-anchor='middle' fill='%23fff' font-size='16'%3Ecover%3C/text%3E%3C/svg%3E" alt="Cover fit"></img>
</figure>
<figure class="ui-image ui-image--md ui-image--contain">
<img class="ui-image__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect fill='%2381c784' width='300' height='150'/%3E%3Ctext x='150' y='80' text-anchor='middle' fill='%23fff' font-size='16'%3Econtain%3C/text%3E%3C/svg%3E" alt="Contain fit"></img>
</figure>Caption
<figure class="ui-image ui-image--md ui-image--rounded">
<img class="ui-image__img" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='140'%3E%3Crect fill='%23ffb74d' width='192' height='140'/%3E%3C/svg%3E" alt="With caption"></img>
<figcaption class="ui-image__caption">An optional image caption</figcaption>
</figure>Fallback
<figure class="ui-image ui-image--sm">
<img class="ui-image__img" src alt="Broken image"></img>
</figure>
<figure class="ui-image ui-image--sm ui-image--rounded">
<img class="ui-image__img" src alt="Broken rounded"></img>
</figure>
<figure class="ui-image ui-image--sm ui-image--circle">
<img class="ui-image__img" src alt="Broken circle"></img>
</figure>