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

json

{
  "name": "image",
  "type": "_partials",
  "styles": ["image.css"],
  "scripts": [],
  "requires": []
}

Configuration

yaml

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

html

{% 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'
}) }}