Demos Back to Docs

Caption with Slotted Content

113 of 124
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

Related Docs

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

Related Docs

Demo Gallery