Image
Image display component with aspect ratio control and optional click behavior.
Preview
Loading preview…
Import
// Web Component
import '@kittl/ui';
// React
import { Image } from '@kittl/ui-react';
Usage
Web Component
<kittl-image src="https://example.com/photo.jpg" alt="A photo" ratio="square"></kittl-image>
<kittl-image src="https://example.com/photo.jpg" clickable></kittl-image>
React
<Image src="https://example.com/photo.jpg" alt="A photo" ratio="square" />
<Image src="https://example.com/photo.jpg" clickable />
Props
| Property | Type | Default | Description |
|---|---|---|---|
src | string | — | Image URL |
alt | string | '' | Alt text |
ratio | 'square' | 'landscape' | 'free' | 'free' | Aspect ratio constraint |
fitContent | boolean | false | Fit image to content size |
fadeIn | boolean | true | Fade-in animation on load |
clickable | boolean | false | Enable click behavior |
HTML attribute names
Use fit-content and fade-in as HTML attribute names (kebab-case).
Accessibility
- When
clickable, the image getsrole="button"andtabindex="0" - Keyboard: Enter triggers click