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
Position
Add top bottom positioning to your 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