--- title: "ZingGrid Web Component: `` | Docs" description: "View our in depth tutorial covering the web component `` tag and the associated features for the JavaScript grid." url: https://www.zinggrid.com/docs/v1/api/tags/zg-caption --- ```text experiment_id: web-retrieval-v1 fixture_id: /docs/v1/api/tags/zg-caption.md mode: provenance representation: markdown origin_response_id: 8a124386fcdd3e0751de54baf61acc0b version: 2026-10-21 version_created_at_utc: 2026-10-21T20:42:35.750Z version_nonce: a1ad2809fe980fa682bb3f7bfe12ee8b generated_at_utc: 2026-11-08T23:36:17.993Z response_nonce: c3980ac9cc48bf5829ffa4fee9eedf34 ``` # `` Version 1 [Interactive Storybook Playground](https://storybook.zinggrid.com/?path=/docs/zg-caption--docs) The `` tag is a web component that controls the styling and display of the grid's caption (title). ![Image of the DOM relationship for the zg-caption web component tag](https://storage.googleapis.com/zinggrid-pwa.appspot.com/components/zg-caption-web-component-dom.png "Image of the DOM relationship for the zg-caption web component tag") | Component | Relationship | Type | Ancestor | | --- | --- | --- | --- | | [ZGHeader](https://www.zinggrid.com/docs/api/tags/zg-header) | Parent | Generated | n/a | | [ZGFooter](https://www.zinggrid.com/docs/api/tags/zg-footer) | Parent | Generated, Manual | n/a | | [ZingGrid](https://www.zinggrid.com/docs/api/tags/zing-grid) | Parent | Manual | n/a | | [ZGButton](https://www.zinggrid.com/docs/api/tags/zg-button) | Child | Generated, Manual | n/a | | [ZGCheckbox](https://www.zinggrid.com/docs/api/tags/zg-checkbox) | Child | Manual | n/a | | [ZGIcon](https://www.zinggrid.com/docs/api/tags/zg-icon) | Child | Manual | n/a | | [ZGInput](https://www.zinggrid.com/docs/api/tags/zg-input) | Child | Manual | n/a | | [ZGSearch](https://www.zinggrid.com/docs/api/tags/zg-search) | Child | Generated | n/a | | [ZGSelect](https://www.zinggrid.com/docs/api/tags/zg-select) | Child | Manual | n/a | | [ZGText](https://www.zinggrid.com/docs/api/tags/zg-text) | Child | Manual | n/a | #### Related Web Components - [``](https://www.zinggrid.com/docs/api/tags/zg-button/) - [``](https://www.zinggrid.com/docs/api/tags/zg-header/) - [``](https://www.zinggrid.com/docs/api/tags/zg-search/) ## Usage A `` tag can be manually inserted inside the grid as slotted content or automatically inserted when the caption is enabled via the `caption` attribute. The caption is styleable via CSS variables or the `zg-caption` CSS selector. You can use the `caption` attribute, like so: ```html ``` You can slot the `` tag as well: ```html Hello World ``` ## Attributes There are a couple attributes to help position the `` element in the grid and align the text within the ``. **Example Usage** ```html Hello World ``` ### align The alignment of content in the caption - Type: String - Default: `"start"` - Accepted values: "start", "left", "right", "center" - Supported versions: 2.x [Example code](https://app.zingsoft.com/demos/embed/3VUT9XVS) ### position Indicates where to position the caption - Type: String - Default: `"top"` - Accepted values: "top", "bottom", "both" - Supported versions: 2.x [Example code](https://app.zingsoft.com/demos/embed/GYOV88PD) ## CSS Variables `` can be styled by CSS variables, like so: ```css :root { --zg-caption-background: red; } ``` Below is a list of all the associated `--zg-caption` CSS variables. Check out the [full list of CSS variables](https://www.zinggrid.com/docs/api/css-variables/reference/) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid. | Name | Default | Description | Demo | | --- | --- | --- | --- | | `--zg-caption-align-items` | center | Sets the vertical alignment of items (title and toolbar) in caption | [Example code](https://app.zingsoft.com/demos/embed/CQYPIK1K) | | `--zg-caption-background` | Browser's default value | Styles the background of caption | [Example code](https://app.zingsoft.com/demos/embed/6U2SY2K5) | | `--zg-caption-border` | 0 | Styles the border of caption | [Example code](https://app.zingsoft.com/demos/embed/0N4C0ECB) | | `--zg-caption-border-bottom` | var(--zg-caption-border, 0) | Styles the bottom border of caption | [Example code](https://app.zingsoft.com/demos/embed/99JLBVYH) | | `--zg-caption-border-left` | var(--zg-caption-border, 0) | Styles the left border of caption | [Example code](https://app.zingsoft.com/demos/embed/FWLLXIJ5) | | `--zg-caption-border-radius` | 0 | Applies a border-radius to the caption | [Example code](https://app.zingsoft.com/demos/embed/XTZFER6B) | | `--zg-caption-border-right` | var(--zg-caption-border, 0) | Styles the right border of caption | [Example code](https://app.zingsoft.com/demos/embed/52JW357J) | | `--zg-caption-border-top` | var(--zg-caption-border, 0) | Styles the top border of caption | [Example code](https://app.zingsoft.com/demos/embed/NZ37Y0WR) | | `--zg-caption-box-shadow` | none | Applies a box shadow behind caption | [Example code](https://app.zingsoft.com/demos/embed/NGD7EIQQ) | | `--zg-caption-button-background` | var(--zg-button-background) | Styles the background of button in caption | [Example code](https://app.zingsoft.com/demos/embed/TJF6WCKE) | | `--zg-caption-button-background_active` | var(--zg-caption-button-background, var(--zg-button-background)) | Styles the background of button in caption when the button is in an `active` state | [Example code](https://app.zingsoft.com/demos/embed/RAU1QDPS) | | `--zg-caption-button-background_focus` | var(--zg-caption-button-background, var(--zg-button-background)) | Styles the background of button in caption when the button is in a `focus` state | [Example code](https://app.zingsoft.com/demos/embed/BSNFWAC2) | | `--zg-caption-button-background_hover` | var(--zg-caption-button-background, var(--zg-button-background)) | Styles the background of button in caption when the button is in a `hover` state | [Example code](https://app.zingsoft.com/demos/embed/2C4I6L8Q) | | `--zg-caption-color` | Browser's default value | Sets the font color of caption | [Example code](https://app.zingsoft.com/demos/embed/AWL1ZJ9P) | | `--zg-caption-flex-direction` | row | Sets the flex direction of items (title and toolbar) in caption | [Example code](https://app.zingsoft.com/demos/embed/7OAGC539) | | `--zg-caption-font-family` | Browser's default value | Sets the font family of caption | [Example code](https://app.zingsoft.com/demos/embed/AIW2OSGY) | | `--zg-caption-font-size` | 1.25rem | Sets the font size of caption | [Example code](https://app.zingsoft.com/demos/embed/GYEK88WP) | | `--zg-caption-font-style` | Browser's default value | Sets the font style of caption | [Example code](https://app.zingsoft.com/demos/embed/88F09GZT) | | `--zg-caption-font-weight` | Browser's default value | Sets the font weight of caption | [Example code](https://app.zingsoft.com/demos/embed/KY56OFL7) | | `--zg-caption-height` | Browser's default value | Sets the height of caption | [Example code](https://app.zingsoft.com/demos/embed/Y3GPK1TE) | | `--zg-caption-margin` | 0 | Sets the margin of caption | [Example code](https://app.zingsoft.com/demos/embed/4KJK4SH4) | | `--zg-caption-opacity` | Browser's default value | Sets the opacity of caption | [Example code](https://app.zingsoft.com/demos/embed/PE0HQJ5R) | | `--zg-caption-padding` | 0 var(--theme-padding_x) | Sets the padding of caption | [Example code](https://app.zingsoft.com/demos/embed/442ELH1B) | | `--zg-caption-title-align-self` | center | Sets vertical alignment of items in caption title | [Example code](https://app.zingsoft.com/demos/embed/67LXJX3V) | | `--zg-caption-title-flex` | 0 1 auto | Sets how items are flexed in caption title | [Example code](https://app.zingsoft.com/demos/embed/ZNF8KZ0Q) | | `--zg-caption-title-font-family` | inherit | Sets the font-family of caption title | [Example code](https://app.zingsoft.com/demos/embed/RSEFCP22) | | `--zg-caption-title-font-size` | inherit | Sets the font size of caption title | [Example code](https://app.zingsoft.com/demos/embed/957S8V57) | | `--zg-caption-title-font-style` | inherit | Sets the font style of caption title | [Example code](https://app.zingsoft.com/demos/embed/7998V87T) | | `--zg-caption-title-font-weight` | inherit | Sets the font weight of caption title | [Example code](https://app.zingsoft.com/demos/embed/SL5PZSVT) | | `--zg-caption-title-margin` | 0 | Sets the margin of caption title | [Example code](https://app.zingsoft.com/demos/embed/16DIJOGY) | | `--zg-caption-title-order` | Browser's default value | Sets the order of caption title with respect to caption toolbar | [Example code](https://app.zingsoft.com/demos/embed/C23FWMV5) | | `--zg-caption-title-padding` | 0 | Sets the padding of caption title | [Example code](https://app.zingsoft.com/demos/embed/ZS07XHPH) | | `--zg-caption-title-text-align` | inherit | Sets the text alignment of caption title | [Example code](https://app.zingsoft.com/demos/embed/1598TAUJ) | | `--zg-caption-title-transform` | none | Sets the transform of caption title | [Example code](https://app.zingsoft.com/demos/embed/3XWSGQ3T) | | `--zg-caption-title-width` | 100% | Sets the width of caption title | [Example code](https://app.zingsoft.com/demos/embed/072GAQ92) | | `--zg-caption-toolbar-align-self` | Browser's default value | Sets vertical alignment of items in caption toolbar | [Example code](https://app.zingsoft.com/demos/embed/S3ZCU3DO) | | `--zg-caption-toolbar-bottom` | Browser's default value | Sets the position from bottom of caption toolbar. To apply, set --zg-caption-toolbar-position. | [Example code](https://app.zingsoft.com/demos/embed/OEH3UY6Q) | | `--zg-caption-toolbar-justify-content` | flex-start | Sets the horizontal alignment of contents in caption toolbar | [Example code](https://app.zingsoft.com/demos/embed/765LB16X) | | `--zg-caption-toolbar-left` | auto | Sets the left of caption toolbar. To apply, set --zg-caption-toolbar-position. | [Example code](https://app.zingsoft.com/demos/embed/S4O1P9G5) | | `--zg-caption-toolbar-margin` | 0 | Sets the margin of caption toolbar | [Example code](https://app.zingsoft.com/demos/embed/KZJX7TLX) | | `--zg-caption-toolbar-position` | Browser's default value | Sets the position of caption toolbar | [Example code](https://app.zingsoft.com/demos/embed/QHJA4VIJ) | | `--zg-caption-toolbar-right` | auto | Sets the right of caption toolbar. To apply, set --zg-caption-toolbar-position. | [Example code](https://app.zingsoft.com/demos/embed/4YMLUW88) | | `--zg-caption-toolbar-top` | auto | Sets the top of caption toolbar. To apply, set --zg-caption-toolbar-position. | [Example code](https://app.zingsoft.com/demos/embed/RFUEEGAP) | | `--zg-caption-toolbar-transform` | none | Sets the transform of caption toolbar | [Example code](https://app.zingsoft.com/demos/embed/CM2ERTMS) | | `--zg-caption-toolbar-width` | auto | Sets the width of caption toolbar | [Example code](https://app.zingsoft.com/demos/embed/MGC5Q8CR) | | `--zg-caption-transition` | Browser's default value | Sets the transition of caption | [Example code](https://app.zingsoft.com/demos/embed/NORAG1EP) | ## CSS Selector `` can be styled by common CSS selectors. ```css zg-caption { background: red; } ``` ## CSS Shadow Parts `` exposed elements within the shadow can be styled by CSS shadow parts, like so: ```css zg-caption::part(caption) { background-color: red; } ``` Below is a list of all the associated ZGCaption shadow parts. Check out the [full list of CSS shadow parts](https://www.zinggrid.com/docs/api/styling/css-shadow-parts) or our [Styling Basics guide](https://www.zinggrid.com/docs/getting-started/styling-basics/) to learn more about styling the grid. | Name | Description | | --- | --- | | `caption` | Caption container | | `title` | The title container | | `toolbar` | The toolbar container | ## Slots `` contains placeholders to allow adding markup inside the component. ```html Slotted Content Slotted Content ``` Below is a list of all the associated ZGCaption slots. Check out the [full list of slots](https://www.zinggrid.com/docs/api/styling/css-shadow-parts). | Name | Description | | --- | --- | | (default) | Caption title. | | `message` | Caption title. Use when using a feature that enables caption toolbar ([contextMenu], [search], [staticMenu]). | | `tool` | Caption toolbar, which is added to the rightmost of caption by default. |