experiment_id: web-retrieval-v1
fixture_id: /demos/web-component-grid-caption-with-slotted-content
mode: provenance
representation: html
origin_response_id: beb0572ee59bf91ff5ddd10b0c30feae
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.538Z
version_nonce: 7d907318bfea282f9c526acef1ac1664
generated_at_utc: 2026-10-25T01:40:53.218Z
response_nonce: 7a94d4de7488654abe5e119100dec1bf

Caption with Slotted Content

114 of 125
Just add the <zg-caption> tag to your grid with the text (i.e., slotted content) you want to display for the caption!
Result Full HTML CSS JS
Edit Download
This caption has images and a button!

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

    .zg-body button {
      border: 0;
      border-radius: 5px;
      color: white;
      background: #85929E;
      font-size: 15px;
      margin-bottom: 20px;
    }

    .zg-body img {
      margin-top: 20px;
    }

    zing-grid[loading] {
      height: 307px;
    }
  </style>
</head>

<body class="zg-body">
  <zing-grid>
    <zg-caption>
      <img src="https://app.zinggrid.com/api/file/Q1FERVLM/corgi.png" width="50px">
      This caption has images and a button!
      <img src="https://app.zinggrid.com/api/file/Q1FERVLM/corgi.png" width="50px">
      <button>Woof!</button>
    </zg-caption>
    <zg-data data='[{"name": "Oreo","breed":"Mastiff"}, {"name": "Buddy","breed":"Greate Dane"}, {"name": "Max","breed":"Doodle"}]'></zg-data>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </script>
</body>

</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">
     <zing-grid>
       <zg-caption>
         <img src="https://app.zinggrid.com/api/file/Q1FERVLM/corgi.png" width="50px">
         This caption has images and a button!
         <img src="https://app.zinggrid.com/api/file/Q1FERVLM/corgi.png" width="50px">  
         <button>Woof!</button>
       </zg-caption>
       <zg-data data='[{"name": "Oreo","breed":"Mastiff"}, {"name": "Buddy","breed":"Greate Dane"}, {"name": "Max","breed":"Doodle"}]'></zg-data>
    </zing-grid>
	</body>
</html>
.zg-body {background:#e6e6e6;}

.zg-body button {
  border:0;
  border-radius: 5px;
  color: white;
  background: #85929E;
  font-size: 15px;
  margin-bottom: 20px;
}

.zg-body img {
  margin-top: 20px;
}
// No JS code

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Demo Gallery