• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     body {
    10.       background: #e6e6e6;
    11.     }
    12.  
    13.     zing-grid {
    14.       --zg-caption-border: 15px solid #A1887F;
    15.       --zg-caption-font-style: italic;
    16.       --zg-caption-title-transform: rotate(-1deg);
    17.       --zg-caption-font-weight: bold;
    18.       --zg-caption-font-family: 'Comic Sans MS', sans-serif;
    19.       --zg-caption-color: #455A64;
    20.       --zg-caption-background: #AED581;
    21.       --zg-caption-background: radial-gradient(#FCF3CF, #AED581);
    22.     }
    23.  
    24.     zg-caption:hover {
    25.       opacity: 0.5;
    26.       transition: all 1s ease;
    27.     }
    28.  
    29.     zing-grid[loading] {
    30.       height: 307px;
    31.     }
    32.   </style>
    33. </head>
    34.  
    35. <body>
    36.   <zing-grid>
    37.     <zg-caption align="center">Best Dogs</zg-caption>
    38.     <zg-data data='[{"name": "Oreo","breed":"Mastiff"}, {"name": "Buddy","breed":"Great Dane"}, {"name": "Max","breed":"Doodle"}]'>
    39.     </zg-data>
    40.   </zing-grid>
    41.   <script>
    42.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    43.   </script>
    44. </body>
    45.  
    46. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <zing-grid>
    12.     <zg-caption align="center">Best Dogs</zg-caption>
    13.     <zg-data data='[{"name": "Oreo","breed":"Mastiff"}, {"name": "Buddy","breed":"Great Dane"}, {"name": "Max","breed":"Doodle"}]'>
    14.     </zg-data>
    15.   </zing-grid>
    16. </body>
    17.  
    18. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    4.  
    5. zing-grid {
    6.   --zg-caption-border: 15px solid #A1887F;
    7.   --zg-caption-font-style: italic;
    8.   --zg-caption-title-transform: rotate(-1deg);
    9.   --zg-caption-font-weight: bold;
    10.   --zg-caption-font-family: 'Comic Sans MS', sans-serif;
    11.   --zg-caption-color: #455A64;
    12.   --zg-caption-background: #AED581;
    13.   --zg-caption-background: radial-gradient(#FCF3CF, #AED581);
    14. }
    15.  
    16. zg-caption:hover {
    17.   opacity: 0.5;
    18.   transition: all 1s ease;
    19. }
    1.