---
title: "Captioning | Feature"
description: "ZingGrid has fully styleable & flexible captioning that can be applied with attributes, a single caption attribute, or slotted content."
url: https://www.zinggrid.com/docs/features/caption
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/caption.md
mode: provenance
representation: markdown
origin_response_id: 98822e09d6a232ef4eb1aca18addea8b
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.674Z
version_nonce: 32332bfab96ed59db19615ef5e149e2b
generated_at_utc: 2026-11-04T02:27:33.053Z
response_nonce: 1b2c20ceed00447e785324c299f2abd8
```

# Captioning

ZingGrid has fully styleable and flexible captioning that can be applied with attributes or slotted content.

## Caption Attribute

To add a caption to your grid, simply add the `caption` attribute to the `<zing-grid>` tag, like so:

```html
<zing-grid caption="This is a caption using an attribute!" ></zing-grid>
```
### Captioned Grid
Here is a complete grid with a caption added via attribute:

[Example code](https://app.zingsoft.com/demos/embed/1QL4UJ47)

## Slotted Content

To slot content in your caption, just add the `<zg-caption>` tag to your grid with the text (i.e., slotted content) you want to display for the caption, like so:

```html
<zg-caption>
  <img src="..." width="50px">
  <span>This caption has images and a button!</span>
  <img src="..." width="50px">
  <button>Woof!</button>
</zg-caption>
```
### Slotted Content Captioned Grid

Here is a complete grid with images and a button inside the caption:

[Example code](https://app.zingsoft.com/demos/embed/Q1FERVLM)

## Alignment

**Left**
```html
<zg-caption align="left">...</zg-caption>
```
**Center**
```html
<zg-caption align="center">...</zg-caption>
```
**Right**
```html
<zg-caption align="right">...</zg-caption>
```

### Right-Aligned Caption Grid
Here is a complete grid with the caption aligned to the right:

[Example code](https://app.zingsoft.com/demos/embed/DIAQTO2F)

## Position

**Top**
```html
<zg-caption attach="top">...</zg-caption>
```
**Bottom**
```html
<zg-caption attach="bottom"></zg-caption>
```
### Bottom Positioned Caption Grid
Here is a complete grid with the caption positioned at the bottom:

[Example code](https://app.zingsoft.com/demos/embed/MDLSFY15)

## Mirror

Add a caption to both the top and bottom of your grid, like so:

```html
<zg-caption mirror></zg-caption>
```

### Mirrored Caption Grid
Here is a complete grid with caption positioned at the top and bottom:

[Example code](https://app.zingsoft.com/demos/embed/SEMMA0XN)

## Styled

Captions are fully styleable through CSS and CSS variables. For example:

```html
zing-grid {
  --zg-caption-color: #455A64;
  --zg-caption-background: #AED581;
}

zg-caption:hover {
  opacity: 0.5;
  transition: all 1s ease;
}
```
### Styled Caption Grid
Here is a complete grid with a caption that has been colorfully styled via CSS:

[Example code](https://app.zingsoft.com/demos/embed/0URZD5C7)

## Related Resources
Here are some extra resources related to this feature to help with creating your grid:

* [Caption Attributes](https://www.zinggrid.com/docs/api/tags/zg-caption)
* [Caption Methods](https://www.zinggrid.com/docs/api-methods#zg-caption)