Docs

Captioning

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

Caption Attribute

Add the caption by adding the caption attribute to the <zing-grid> tag.

<zing-grid caption="This is a caption using an attribute!" ></zing-grid>

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!

<zg-caption>
  <img src="..." width="50px">
  <span>This caption has images and a button!</span>
  <img src="..." width="50px">  
  <button>Woof!</button>
</zg-caption>

Alignment

Add text alignment to your caption

LeftCenterRight

Left

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

Center

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

Right

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

Position

Add top or bottom positioning to your caption.

TopBottom

Top

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

Bottom

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

Mirror

Add a caption to the top and bottom of your grid.

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

Styled

Captions are fully styleable through CSS and CSS variables.

zing-grid {
  --zg-caption-color: #455A64;
  --zg-caption-background: #AED581;
}
zg-caption:hover {
opacity: 0.5;
transition: all 1s ease;
}
Top