experiment_id: web-retrieval-v1
fixture_id: /demos/web-component-grid-caption-with-slotted-content
mode: provenance
representation: html
origin_response_id: 3c34986c7aa1926191b90344b5774612
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.538Z
version_nonce: 7d907318bfea282f9c526acef1ac1664
generated_at_utc: 2026-11-15T01:35:01.835Z
response_nonce: 5df645ae456561d3474823e2bab23c81

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