Images

Image

Storybook

The Image component is a reusable component that provides a simple way to display images on your website. It allows you to customize the appearance of the image, such as its size, and rounded corners.

Imports

1import { Image } from 'dd360-ds'

Usage

To use the Image component, you can import it into your app and render it with the desired props. Here's an example:

The code snippet below shows how to use the Image component:

1import { Image } from 'dd360-ds''
2
3<Image src="https://picsum.photos/200/300?grayscale" />
4

Rounded

The rounded prop is an optional string that specifies the level of rounding to apply to the image corners. The possible values are 'sm', 'md', and 'lg'. By default, the rounded prop is set to 'lg'.

The code snippet below shows how to set a Avatar component without image:

1import { Image } from 'dd360-ds''
2
3<Image
4  src="https://picsum.photos/100?grayscale"
5  width="100px"
6  height="100px"
7  rounded="sm"
8/>
9<Image
10  src="https://picsum.photos/100?grayscale"
11  width="100px"
12  height="100px"
13  rounded="md"
14/>
15<Image
16  src="https://picsum.photos/100?grayscale"
17  width="100px"
18  height="100px"
19  rounded="lg"
20/>
21

API Reference

Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.