{/* image.mdx */}

import { Canvas, Title, Subtitle, ArgTypes, Source, Meta, Description, Primary, Story, Stories, Controls } from '@storybook/blocks';
import * as comStories from './image.stories.json';
import templateSource from './image.twig?raw';

<Meta of={comStories} name="Docs"/>

<Title />
<Subtitle />
<Description />

> ## [Bootstrap Documentation on Images](https://getbootstrap.com/docs/5.3/content/images)
> * [Images](https://getbootstrap.com/docs/5.3/content/images)
> * [Responsive Images](https://getbootstrap.com/docs/5.3/content/images/#responsive-images)


<Primary />

## Properties
<Controls />

<Stories of={comStories} />

## Attributes:
* `attributes`: HTML attributes for the img tag.

## Slots:
* N/A


### Examples

**Example #1:** Default system image
```
{% include 'vartheme_bs5:image' %}
```

**Example #2:** Use the Image component with Responsive image
```
{% include 'vartheme_bs5:image' with {
    responsive: true
  }
%}
```

**Example #3:** Use the Image component with align center, rounded, and thumbnails 
```
{% include 'vartheme_bs5:image' with {
    align: 'center',
    responsive: true,
    rounded: true,
    thumbnails: true
  }
%}
```

**Example #3:** Use the Image component with align center, rounded, and thumbnails 
```
{% include 'vartheme_bs5:image' with {
    align: 'center',
    responsive: true,
    rounded: true,
    thumbnails: true
    attributes: ["src": "https://raw.githubusercontent.com/Vardot/varbase_media_demo/10.0.0/content/file/coworking-1.jpg"]
  }
%}
```


## Source code
[//]: # (Twig Template source code)
<Source code={templateSource} />
