Caption with Custom Styling

107 of 116
Captions are fully styleable through CSS and CSS Variables.
Result Full HTML CSS JS
Edit Download
This caption has a lot of style ;)

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></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">This caption has a lot of style ;)</zg-caption>
    <zg-data data='[{"name": "Oreo","breed":"Mastiff"}, {"name": "Buddy","breed":"Greate Dane"}, {"name": "Max","breed":"Doodle"}]'>
    </zg-data>
  </zing-grid>
  <script></script>
</body>

</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  </head>
  <body>
     <zing-grid>
       <zg-caption align="center">This caption has a lot of style ;)</zg-caption>
   		<zg-data data='[{"name": "Oreo","breed":"Mastiff"}, {"name": "Buddy","breed":"Greate 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;
}

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