Image Container
Usage
The constructor creates a display format showcasing an image and an optional caption.
This constructor is mainly used with .svg image file types, to create a more unified look and feel when displaying those formats.
This constructor inverts colors in dark mode, so any other image inserted will have its colors inverted. Works best with white/black colors.
Basic
This is an example caption for the image.
::ShImgContainer
---
urlImage: /images/lwm2m/overall_architecture.drawio.svg
altImage: Sample Image
figcaption: |
This is an example caption for the image.
---
::
Advanced settings
An example with customized ui attributes for enhanced display:
This is a custom caption with styled text.
::ShImgContainer
---
ui:
wrapper: shadow-lg bg-purple-300 dark:bg-purple-900 p-4 rounded-xl
image: rounded-lg border border-gray-300
figcaption: text-lg text-gray-600 italic
urlImage: /images/lwm2m/overall_architecture.drawio.svg
altImage: Custom Image
figcaption: |
This is a custom caption with styled text.
---
::
Props
| Prop | Type | Default | Description |
|---|---|---|---|
description | string | "" | Note for content writers. It is not rendered on the website. |
urlImage | string | – | The source URL of the image to be displayed. |
altImage | string | – | Alternative text for the image, used for accessibility and in case the image fails to load. |
figcaption | string | – | Optional caption text displayed below the image. This includes font size, color, and alignment settings. |
ui | Record<string, any> | – | Overrides the default classes of the UI config below. Values are merged with the defaults using tailwind-merge. |
Slots
This component has no slots.
UI config
Default classes of every styled element. Override any key through the ui prop.
| Key | Default classes | Description |
|---|---|---|
wrapper | flex-row | Defines the overall styling for the container that holds both the image and its caption. |
inner | bg-white dark:bg-black pt-3 pb-3 mx-4 md:mx-32 rounded-md | Styles applied to the inner section that holds the image. |
base | dark:invert flex flex-col justify-center items-center m-4 | A placeholder for additional base styles that can be applied to the image component. |
image | "" | Styles applied to the image itself, including size, alignment, and additional effects like borders or shadows. |
figcaption | flex justify-center italic text-neutral-600 dark:text-neutral-400 | Image caption. |
