docs
Captioning
ZingGrid has fully styleable and flexible captioning that can be applied with attributes or slotted content.
Caption Attribute
Add a caption by adding thecaption attribute to the <zing-grid> tag.Copy
Copied
<zing-grid caption="This is a caption using an attribute!" ></zing-grid>Edit
Download
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!Copy
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
Alignment
Add text alignment to your caption.Copy
Copied
<zg-caption align="left">...</zg-caption>Edit
Download
Position
Add top or bottom positioning to your caption.Copy
Copied
<zg-caption attach="top"></zg-caption>Edit
Download
Mirror
Add a caption to the top and bottom of your grid.Copy
Copied
<zg-caption mirror></zg-caption>Edit
Download
Styled
Captions are fully styleable through CSS and CSS Variables.Copy
Copied
zing-grid {
--zg-caption-color: #455A64;
--zg-caption-background: #AED581;
}
zg-caption:hover {
opacity: 0.5;
transition: all 1s ease;
}Edit
Download
