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:

Top

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:

Top

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:

Top

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:

Top

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:

Top

Styled

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

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:

Top

Related Resources

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

[features: caption]