Partial Component
Image
The Image partial provides a simple, consistent way to render images with optional captions. It ensures proper semantic markup and accessibility attributes for all image display throughout the component system.
Manifest
{
"name": "image",
"type": "_partials",
"styles": ["image.css"],
"scripts": [],
"requires": []
}
Configuration
image:
src: '/assets/images/sample10.jpg'
alt: 'Sample demonstration image'
caption: 'Example image rendered with the image partial'
Configuration Options
| Property | Type | Required | Description |
|---|---|---|---|
src | string | Yes | Image source path |
alt | string | Yes | Alternative text for accessibility |
caption | string | No | Image caption text |
Example
Example image rendered with the image partial
Usage in Templates
{% from "components/_partials/image/image.njk" import image %}
{{ image({
src: '/assets/images/sample10.jpg'
alt: 'Sample demonstration image'
caption: 'Example image rendered with the image partial'
}) }}