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:

<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:

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:

<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:

Alignment

Add text alignment to your caption, like so:

Left

<zg-caption align="left">...</zg-caption>

Center

<zg-caption align="center">...</zg-caption>

Right

<zg-caption align="right">...</zg-caption>

Right-Aligned Caption Grid

Here is a complete grid with the caption aligned to the right:

Position

Add top or bottom positioning to your caption, like so:

Top

<zg-caption attach="top">...</zg-caption>

Bottom

<zg-caption attach="bottom"></zg-caption>

Bottom Positioned Caption Grid

Here is a complete grid with the caption positioned at the bottom:

Mirror

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

<zg-caption mirror></zg-caption>

Mirrored Caption Grid

Here is a complete grid with caption positioned at the top and bottom:

Related Resources

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

• Caption Attributes
• Caption Methods