Image

Enhanced image component with lazy loading and required alt text.

Figma LibraryView in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { Image } from '@adaptavant/eds-core';

Object Fit​

Controls how an image is resized to fit its container.

dogdog
<div className="grid gap-4 w-full grid-cols-2 [&>*]:aspect-square [&>*]:outline">
  {/* Cover */}
  <Image
    alt="dog"
    className="object-cover"
    src="https://picsum.photos/id/237/200/300"
  />

  {/* Contain */}
  <Image
    alt="dog"
    className="object-contain"
    src="https://picsum.photos/id/237/200/300"
  />
</div>
View in Playroom

API Reference​

Image

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

Image parts​

dog
<Image
    alt="dog"
    className="object-cover"
    src="https://picsum.photos/id/237/200"
    className="w-20"
  />
View in Playroom

No parts available. Only root.