# Images & SVG Void provides styled image handling and a flexible way to embed SVG content, all driven by the standard `attr_list` extension so you can attach component classes directly to Markdown images. ## Standard images Images get the glass treatment automatically: rounded corners, subtle border, and maximum width constraint. ![Void logo](https://raw.githubusercontent.com/rkriad585/mkdocs-void/main/docs/assets/images/logo.svg){ width="120" } ```markdown ![Void logo](https://raw.githubusercontent.com/rkriad585/mkdocs-void/main/docs/assets/images/logo.svg){ width="120" } ``` ## Image lightbox Click any content image (not wrapped in a link) to open a full-viewport preview overlay. Close with the × button, clicking the backdrop, the `Esc` key, or scrolling; navigate multiple openable images with the ← / → arrow keys. The overlay works with zero dependencies — no extra pip packages. ```yaml theme: void: content: typography: image_lightbox: true # default true ``` - Images inside a `` (e.g. linked thumbnails) are deliberately left alone. - The overlay respects `prefers-reduced-motion` and locks body scroll while open. ## Image classes via `attr_list` Attach any class directly to an image with the `{.class}` suffix — no HTML needed: | Class | Effect | |-------|--------| | `void-img-round` | Circular crop | | `void-img-ghost` | Dimmed/desaturated | | `void-image--banner` | Full-width banner (max-height 380px, cover) | | `void-image--thumbnail` | Small 220px thumbnail | ```markdown ![Round](img.png){ .void-img-round width="140" } ![Ghost](img.png){ .void-img-ghost } ![Banner](img.png){ .void-image--banner } ``` ## Figure with caption Use a small HTML `
` for images with captions:
Void logo
Figure 1 — The Void logo
```html
Void logo
Figure 1 — The Void logo
``` ## Inline SVG component Wrap raw SVG in a `.void-svg` container to get a bordered glass panel that centers and scrolls the artwork:
```html
``` Use `void-svg--bare` for a borderless, transparent container when you don't want the glass panel look. ## Dividers & badges A decorative divider component:
```html
...
``` Status badges:
Accent Success Warning Error
```html Success ```