Demos Back to Docs

Caption with Custom Styling

114 of 124
Captions are fully styleable through CSS and CSS variables.
Result Full HTML CSS JS
Edit Download
Best Dogs

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>
    body {
      background: #e6e6e6;
    }

    zing-grid {
      --zg-caption-border: 15px solid #A1887F;
      --zg-caption-font-style: italic;
      --zg-caption-title-transform: rotate(-1deg);
      --zg-caption-font-weight: bold;
      --zg-caption-font-family: 'Comic Sans MS', sans-serif;
      --zg-caption-color: #455A64;
      --zg-caption-background: #AED581;
      --zg-caption-background: radial-gradient(#FCF3CF, #AED581);
    }

    zg-caption:hover {
      opacity: 0.5;
      transition: all 1s ease;
    }

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

<body>
  <zing-grid>
    <zg-caption align="center">Best Dogs</zg-caption>
    <zg-data data='[{"name": "Oreo","breed":"Mastiff"}, {"name": "Buddy","breed":"Great 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>
     <zing-grid>
       <zg-caption align="center">Best Dogs</zg-caption>
   		<zg-data data='[{"name": "Oreo","breed":"Mastiff"}, {"name": "Buddy","breed":"Great Dane"}, {"name": "Max","breed":"Doodle"}]'>
      </zg-data>
    </zing-grid>
	</body>
</html>
body{background:#e6e6e6;}

zing-grid {
	--zg-caption-border: 15px solid #A1887F;
  --zg-caption-font-style: italic;
  --zg-caption-title-transform: rotate(-1deg);
  --zg-caption-font-weight: bold;
  --zg-caption-font-family: 'Comic Sans MS', sans-serif;
  --zg-caption-color: #455A64;
  --zg-caption-background: #AED581;
  --zg-caption-background: radial-gradient(#FCF3CF, #AED581);
}

zg-caption:hover {
  opacity: 0.5;
  transition: all 1s ease;
}
// 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