Image

Image display component with aspect ratio control and optional click behavior.

Import

import '@kittl/ui';

import { Image } from '@kittl/ui-react';

Usage

<kittl-image
  src="https://picsum.photos/seed/kittl/200"
  alt="A photo"
  ratio="square"
></kittl-image>
<kittl-image src="https://picsum.photos/seed/kittl/200" clickable></kittl-image>

import { Image } from '@kittl/ui-react';

/** Basic Image usage, rendered live on the docs site. */
export const ImageUsage = () => (
  <>
    <Image
      src="https://picsum.photos/seed/kittl/200"
      alt="A photo"
      ratio="square"
    />
    <Image src="https://picsum.photos/seed/kittl/200" clickable />
  </>
);

Props

Property	Attribute	Type	Default	Description
src	src	string	—	Image URL
alt	alt	string	''	Alt text
ratio	ratio	'square' | 'landscape' | 'free'	'free'	Aspect ratio constraint
fitContent	fit-content	boolean	false	Fit image to content size
fadeIn	fade-in	boolean	true	Fade-in animation on load
clickable	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 gets role="button" and tabindex="0"
• Keyboard: Enter triggers click