features
Menu
Menu

Captioning

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

On This Page

Caption Attribute

Add a caption by adding the caption attribute to the <zing-grid> tag.
CloseCopy Copied
<zing-grid caption="This is a caption using an attribute!" data="..."></zing-grid>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Slotted Content

Just add the <zg-caption> tag to your grid with the text (i.e., slotted content) you want to display for the caption!
CloseCopy Copied
<zg-caption>
  <img src="..." width="50px">
  <span>This caption has images and a button!</span>
  <img src="..." width="50px">
  <button>Woof!</button>
</zg-caption>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Alignment

Add text alignment to your caption.
CloseCopy Copied
<zg-caption align="left">...</zg-caption>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
<zg-caption align="center">...</zg-caption>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
<zg-caption align="right">...</zg-caption>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Position

Add top or bottom positioning to your caption.
CloseCopy Copied
<zg-caption attach="top"></zg-caption>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied
<zg-caption attach="bottom"></zg-caption>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Mirror

Add a caption to the top and bottom of your grid.
CloseCopy Copied
<zg-caption mirror></zg-caption>
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Styled

Captions are fully stylable through CSS and CSS Variables.
CloseCopy Copied
zing-grid {
  --zg-caption-color: #455A64;
  --zg-caption-background: #AED581;
}

zg-caption:hover {
  opacity: 0.5;
  transition: all 1s ease;
}
Edit
Download
CloseCopy Copied
CloseCopy Copied
CloseCopy Copied

Join the Community

Support, extra demos, pre-releases and more

loadingloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloadBgloading