Caption with Custom Styling

<!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;
}