Image

The image is a basic component that also contains a separate overlay layer.

Examples

<Image
    src="https://dummyimage.com/300x200/9fa4a8/fff.png"
    width="300"
    height="200"
    alt="alt text"
/>
...
<Image
    src="https://dummyimage.com/300x200/9fa4a8/fff.png"
    width="300"
    height="200"
    alt="alt text"
    isRounded
/>
...
<Image
    src="https://dummyimage.com/300x200/9fa4a8/fff.png"
    width="300"
    height="200"
    alt="alt text"
    borderRadius={{tablet: 300, desktop: 400}}
/>
...
{/* Example with Next.js Image (uncomment when using in Next.js app):
<Image
    src="https://dummyimage.com/300x200/9fa4a8/fff.png"
    width={300}
    height={200}
    alt="Next.js optimized image"
    component={NextImage}
    priority
    quality={90}
    isRounded
/>
*/}

{% include "@seduo-design-system/image.twig" with { props: {
    src: 'https://dummyimage.com/300x200/9fa4a8/fff.png',
    width: 300,
    height: 200,
    alt: 'image'
}} %}
...
{% include "@seduo-design-system/image.twig" with { props: {
    src: 'https://dummyimage.com/300x200/9fa4a8/fff.png',
    width: 300,
    height: 200,
    alt: 'image',
    isRounded: true,
}} %}
...
{% include "@seduo-design-system/image.twig" with { props: {
    src: 'https://dummyimage.com/300x200/9fa4a8/fff.png',
    width: 300,
    height: 200,
    alt: 'image',
    borderRadius: {tablet: 300, desktop: 400}
}} %}

<Image
    src="https://dummyimage.com/300x200/9fa4a8/fff.png"
    width="300"
    height="200"
    alt="Image"
/>
...
<Image
    src="https://dummyimage.com/300x200/9fa4a8/fff.png"
    width="300"
    height="200"
    alt="Image"
    isRounded
/>
...
<Image
    src="https://dummyimage.com/300x200/9fa4a8/fff.png"
    width="300"
    height="200"
    alt="Image"
    borderRadius="{{ { tablet: 300, desktop: 500 } }}"
/>

Custom Component Support

The Image component accepts a component prop that allows you to use any custom image component, such as Next.js Image, while maintaining all the design system styling and functionality.

By default, the component uses a regular <img> element, but you can pass any component that accepts image-related props. The component is fully typed with TypeScript generics, so you get proper type checking for the props of your custom component.

examples

<Image
    src="https://dummyimage.com/300x200/9fa4a8/fff.png"
    width="300"
    height="200"
    alt="Regular img element"
/>
...
<Image
    src="https://dummyimage.com/300x200/9fa4a8/fff.png"
    width="300"
    height="200"
    alt="Custom component with priority"
    component={CustomImageComponent}
    priority
    quality={90}
    isRounded
/>
...
<Image
    src="https://dummyimage.com/300x200/9fa4a8/fff.png"
    width="150"
    height="150"
    alt="Custom component with circle styling"
    component={CustomImageComponent}
    isCircle
    priority
/>

API

Prop name	Type	Default	Required	Description
`src`	`string`	-	yes	Specifies the path to the image
`alt`	`string`	-	yes	Specifies an alternate text for an image
`srcSet`	`string`	-	no	Specifies a list of image files to use in different situations
`sizes`	`string`	-	no	Specifies image sizes for different page layouts
`component`	`React.ComponentType<any>`	`'img'`	no	Custom component to render (e.g., Next.js Image). Receives all props including styling
`isCircle`	`bool`	false	no	Specifies the image is rounded as circle
`isRounded`	`bool`	false	no	Specifies the image has default predefined rounded corners
`borderRadius`	[`Radii` \| `Partial<Record<BreakpointToken, Radii>>`]	-	no	Specifies the border radius by radii tokens, see Customization
`width`	`string` , `number`	-	no	Specifies the width of an image
`height`	`string` , `number`	-	no	Specifies the height of an image
`UNSAFE_className`	`string`	-	no	Wrapper custom classname
`lazy`	`bool`	true	no	(only in twig implementation) Specifies whether the image should use lazy loading functionality seduo application
`lazyClass`	`string`	`lazy`	no	(only in twig implementation) Specifies the lazyload class

Image with overlay composition

Image overlay creates a layer above the image where any element can be placed in each corner.

examples

<div style={{ width: "300px" }}>
  <ImageOverlay
    topLeft={<Square />}
    topRight={<Square />}
    bottomLeft={<Square />}
    bottomRight={<Square />}
  >
    <Image
      src="https://dummyimage.com/300x200/9fa4a8/fff.png"
      width="300"
      height="200"
      alt="alt text"
    />
  </ImageOverlay>
</div>

<div style="width:300px;">
    {% embed "@seduo-design-system/imageOverlay.twig" %}
        {% block topLeft %}
            <div style="width: 24px; height: 24px; background: black;"></div>
        {% endblock %}

        {% block topRight %}
            <div style="width: 24px; height: 24px; background: black;"></div>
        {% endblock %}

        {% block bottomLeft %}
            <div style="width: 24px; height: 24px; background: black;"></div>
        {% endblock %}

        {% block bottomRight %}
            <div style="width: 24px; height: 24px; background: black;"></div>
        {% endblock %}

        {% block content %}
            {% include "@seduo-design-system/image.twig" with { props: {
                src: 'https://dummyimage.com/300x200/9fa4a8/fff.png',
                width: 300,
                height: 200,
                alt: 'image'
            }} %}
        {% endblock %}
    {% endembed %}
</div>

ImageOverlay Properties

Prop name	Type	Default	Required	Description
`topLeft`	`ReactElement`, `Html`	-	no	position for the element in the layer above the image
`topRight`	`ReactElement`, `Html`	-	no	position for the element in the layer above the image
`bottomLeft`	`ReactElement`, `Html`	-	no	position for the element in the layer above the image
`bottomRight`	`ReactElement`, `Html`	-	no	position for the element in the layer above the image
`isBordered`	`bool`	false	no	adds a border to images
`UNSAFE_className`	`string`	-	no	Wrapper custom classname

Circle Image

examples

<Image
  src="https://dummyimage.com/104x104/9fa4a8/fff.png"
  width="104"
  height="104"
  alt="Avatar"
  isCircle
  UNSAFE_className="mr-500"
/>
...
<ImageOverlay isBordered>
  <Image
    src="https://dummyimage.com/104x104/9fa4a8/fff.png"
    width="104"
    height="104"
    alt="Avatar bordered"
    isCircle
  />
</ImageOverlay>

{% include "@seduo-design-system/image.twig" with { props: {
    src: 'https://dummyimage.com/104x104/9fa4a8/fff.png',
    width: 104,
    height: 104,
    alt: 'Avatar',
    isCircle: true,
    class: 'mr-500',
}} %}
...
{% embed "@seduo-design-system/imageOverlay.twig" with { props: {
    isBordered: true,
}}  %}
    {% block content %}
        {% include "@seduo-design-system/image.twig" with { props: {
            src: 'https://dummyimage.com/104x104/9fa4a8/fff.png',
            width: 104,
            height: 104,
            alt: 'Avatar bordered',
            isCircle: true,
        }} %}
    {% endblock %}
{% endembed %}

<Image
    src="https://dummyimage.com/104x104/9fa4a8/fff.png"
    width="104"
    height="104"
    alt="Avatar"
    isCircle
    UNSAFE_className="mr-500"
/>
...
<ImageOverlay isBordered>
    <Image
            src="https://dummyimage.com/104x104/9fa4a8/fff.png"
            width="104"
            height="104"
            alt="Avatar bordered"
            isCircle
    />
</ImageOverlay>

On this page