Image

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

Examples

import { Image } from "@seduo/design-system";
...
<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
/>

{% 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,
}} %}

<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
/>

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
`isCircle`	`bool`	false	no	Specifies the image is rounded as circle
`isRounded`	`bool`	false	no	Specifies the image has rounded corners
`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

import { Image, ImageOverlay } from "@seduo/design-system";
...
const Square = () => <div style={{ width: '24px', height: '24px', background: 'black' }} />;
...
<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

import { Image, ImageOverlay } from "@seduo/design-system";
...
<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