World's Oldest Stone Age Art

25 of 52

Explore the oldest surviving rock art ever created in this demo, which features default card mode, media embeds, various column types, and advanced custom styling.

Result Full HTML CSS JS
Edit Download
[[index.name]] [[index.rank]] [[index.location.locationName]]~ [[index.creationDate]] years ago

Source: Encyclopedia of Art Education

Read more at Oldest Stone Age Art: The Top 100 Artworks

Full Code

<!DOCTYPE html>
<html class="zg-html">

<head>
  <meta charset="utf-8">
  <title>ZingGrid: Simple Grid</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  <style>
    .zg-body {
      padding-top: 20px;
      font-family: 'Work Sans', sans-serif;
      background: #ffffff;
    }

    zing-grid {
      font-family: 'Work Sans', sans-serif;
      max-width: 1000px;
      margin: 0 auto;
      min-height: 600px;
      --theme-color-primary: #D9603D;
      border: 0;
      background: #ffffff;
      --zg-head-cell-font-weight: bold;
      color: #414141;
      opacity: 1;
    }

    zing-grid.loading {
      opacity: 0;
      transition: opacity .3s ease-out;
    }

    zing-grid.loading * {
      opacity: 0;
    }

    zing-grid a {
      font-weight: bold;
      color: #D9603D;
      cursor: pointer;
    }

    zing-grid a:hover {
      color: #742C0D;
    }

    zing-grid img {
      opacity: 1;
      transition: opacity .75s ease-out;
    }

    zing-grid.loading img {
      opacity: 0;
    }

    zg-body a {
      font-weight: bold;
      color: #742C0D;
      cursor: pointer;
      text-decoration: none;
    }

    zg-body a:hover {
      color: #D9603D;
    }

    zg-caption {
      font-size: 30px;
      padding: 10px 20px 0px 20px;
      margin-bottom: -10px;
      background: #ffffff;
      color: #742C0D;
      font-weight: bold;
    }

    zg-body,
    zg-footer,
    zg-watermark {
      background: #ffffff;
    }

    zg-body img {
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      margin: 0 auto;
      width: 100%;
      min-height: 300px;
    }

    zg-row[layout="card"] {
      margin: 10px 5px;
      border: 0;
      background: #EAE9E3;
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
    }

    zg-body zg-cell:nth-child(1) {
      margin-top: -25px;
      padding: 15px;
      background: #D9603D;
    }

    .zg-body .card-title {
      color: #ffffff;
      font-size: 14px;
      font-weight: bold;
      display: block;
    }

    zg-footer {
      font-size: 11px;
      padding: 10px 25px;
      display: flex;
      justify-content: space-between;
      color: #999999;
    }

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

<body class="zg-body">

  <link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,700" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

  <zing-grid layout="card" layout-controls="disabled" caption="World's Oldest Stone Age Art" pager page-size="8" pager-size-options="4,8,16" class="loading">
    <zg-data data='[
        {
          "rank": "1",
          "name": "Bhimbetka and Daraki-Chattan Cupules",
          "location": {
            "locationName": "Bhimbetka Rock Shelters, Raisen District, Madhya Pradesh, India",
            "locationUrl": "https://www.google.com/maps/place/Bhimbetka+rock+shelters/@22.939551,77.6102444,17z/data=!3m1!4b1!4m5!3m4!1s0x397c357473b13b3f:0xb8823ee0ae5de8e6!8m2!3d22.9395461!4d77.6124331"
          },
          "creationDate": "290,000",
          "mediaType": "Petroglyph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fbhembetika-cupules.jpg?alt=media&token=cf54eae1-a358-4bb7-83ab-dc95bb945a4f"
        },
        {
          "rank": "2",
          "name": "Venus of Berekhat Ram",
          "location": {
            "locationName": "Berekhat Ram, Golan Heights, Israel",
            "locationUrl": "https://www.google.com/maps/place/Lake+Ram/@33.2325342,35.7486015,14z/data=!3m1!4b1!4m5!3m4!1s0x151eb73eccfdeab3:0xbd0a1486a80131cf!8m2!3d33.2325!4d35.7661111"
          },
          "creationDate": "230,000",
          "mediaType": "Prehistoric sculpture",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fvenus-of-berekhat-ram.jpg?alt=media&token=d994587b-de18-4e5b-bb65-115afe39fc22"
        },
        {
          "rank": "3",
          "name": "Venus of Tan-Tan",
          "location": {
            "locationName": "River Draa, Tan-Tan, Guelmim-Oued Noun, Morocco",
            "locationUrl": "https://www.google.com/maps/place/Tantan+82000,+Morocco/@28.4307254,-11.1335712,13z/data=!3m1!4b1!4m5!3m4!1s0xc4a90eb762ed1bf:0xca2cc19b59859aa0!8m2!3d28.4380408!4d-11.0987374"
          },
          "creationDate": "200,000",
          "mediaType": "Prehistoric sculpture",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fvenus-tan.jpg?alt=media&token=cf09a8c9-d459-4a36-9271-97cecd7ae287"
        },
        {
          "rank": "4",
          "name": "Blombos Cave Rock Art",
          "location": {
            "locationName": "Blombos Private Nature Reserve, Heidelberg, Western Cape, South Africa",
            "locationUrl": "https://www.google.com/maps/place/Blombos+Private+Nature+Reserve/@-34.4122784,21.2145526,17z/data=!3m1!4b1!4m5!3m4!1s0x1dd6c90a53a87def:0x1e6f4d54e0f39ebe!8m2!3d-34.4122828!4d21.2167413"
          },
          "creationDate": "70,000",
          "mediaType": "Petroglyph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fblombos-cave-art.jpg?alt=media&token=9a9901e8-efce-4bbb-bd7c-f26b051ecdc1"
        },
        {
          "rank": "5",
          "name": "Diepkloof Eggshell Engravings",
          "location": {
            "locationName": "Diepkloof Rock Shelter, Verlorenvlei, Western Cape, South Africa",
            "locationUrl": "https://www.google.com/maps/place/%D0%9F%D0%B5%D1%89%D0%B5%D1%80%D0%B0+%D0%94%D0%B8%D0%BF%D0%BA%D0%BB%D0%BE%D1%84/@-32.3869787,18.4503043,17z/data=!3m1!4b1!4m5!3m4!1s0x1c33a040be0d1b67:0x399454780e877e3c!8m2!3d-32.3869832!4d18.452493"
          },
          "creationDate": "60,000",
          "mediaType": "Petroglyph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fdiepkloof-ostrich-eggshells.jpg?alt=media&token=69dc077e-d8b3-4c23-bc13-959e120c04c0"
        },
        {
          "rank": "6",
          "name": "La Ferrassie Cave Cupules",
          "location": {
            "locationName": "La Ferrassie, Dordogne, France",
            "locationUrl": "https://www.google.com/maps/place/La+Ferrassie+1,+24260+Savignac-de-Miremont,+France/@44.9535245,0.9244914,14z/data=!3m1!4b1!4m5!3m4!1s0x12ab4a5370167ebf:0x179acafcf1b49668!8m2!3d44.953496!4d0.942001"
          },
          "creationDate": "60,000",
          "mediaType": "Petroglyph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fla-ferrassie-cupules.png?alt=media&token=2cf8bb93-77a5-4811-92a7-2410cc9a9b59"
        },
        {
          "rank": "7",
          "name": "El Castillo Cave Paintings",
          "location": {
            "locationName": "Cave of El Castillo, Puente Viesgo, Cantabria, Spain",
            "locationUrl": "https://www.google.com/maps/place/Cave+of+El+Castillo/@43.2923718,-3.9677647,17z/data=!3m1!4b1!4m5!3m4!1s0xd493b732db6adfb:0xb1712a65b2527719!8m2!3d43.2923679!4d-3.965576"
          },
          "creationDate": "39,000",
          "mediaType": "Pictograph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fel-castillo-cave-paintings.jpg?alt=media&token=97e953c4-bf6b-490e-9da3-e51881119b6a"
        },
        {
          "rank": "8",
          "name": "Sulawesi Cave Art",
          "location": {
            "locationName": "Leang Timpuseng Cave, Maros-Pangkep, Indonesia",
            "locationUrl": "https://www.google.com/maps/place/Leang+Timpuseng/@-4.9985644,119.6586086,17z/data=!3m1!4b1!4m5!3m4!1s0x2dbef6377e878e8b:0xb26325a2f5462f83!8m2!3d-4.9985697!4d119.6607973"
          },
          "creationDate": "38,000",
          "mediaType": "Pictograph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fsulawesi-cave-paitings.jpg?alt=media&token=afc7e54f-1bb8-45ec-9b50-71480cbf5834"
        },
        {
          "rank": "9",
          "name": "Lion Man of Hohlenstein Stadel",
          "location": {
            "locationName": "Hohlenstein-Stadel Cave, Asselfingen, Germany",
            "locationUrl": "https://goo.gl/maps/FxmcZfT4NDw"
          },
          "creationDate": "38,000",
          "mediaType": "Prehistoric sculpture",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Flion-man.jpg?alt=media&token=6d754477-aa03-44f3-b94e-2d15201cc601"
        },
        {
          "rank": "10",
          "name": "Venus of Hohle Fels",
          "location": {
            "locationName": "Hohle Fels Cave, Schelklingen, Germany",
            "locationUrl": "https://www.google.com/maps/place/Hohle+Fels+Schelklingen/@48.3792068,9.7520669,17z/data=!3m1!4b1!4m5!3m4!1s0x47997eb1dd24a1af:0x13f890d8b9533fc5!8m2!3d48.3792033!4d9.7542556"
          },
          "creationDate": "38,000",
          "mediaType": "Prehistoric sculpture",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fvenus-of-hohle-fels.jpg?alt=media&token=4b59f7b0-628d-4ca5-88b5-fcb0fd2db6c8"
        },
        {
          "rank": "11",
          "name": "Gorhams Cave Art",
          "location": {
            "locationName": "Gorhams Cave, Southeast face of the Rock of Gibraltar, Gibraltar",
            "locationUrl": "https://goo.gl/maps/huhS3K6N2wm"
          },
          "creationDate": "37,000",
          "mediaType": "Petroglyph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fgorhams-cave-art.jpg?alt=media&token=7f3bb59f-cf93-4b1e-835e-f3dd60e15c82"
        },
        {
          "rank": "12",
          "name": "Abri Castanet Engravings",
          "location": {
            "locationName": "Abri Castanet Rock Shelter, Sergeac, Dordogne, France",
            "locationUrl": "https://www.google.com/maps/place/24290+Sergeac,+France/@45.0003321,1.0949539,14z/data=!3m1!4b1!4m5!3m4!1s0x47ff5623eb45f4ef:0x40665174817f3c0!8m2!3d45.002428!4d1.106926"
          },
          "creationDate": "35,000",
          "mediaType": "Petroglyph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fabri-castanet-art.jpg?alt=media&token=d0d397f5-38e0-4eb1-b62f-339b58c02802"
        },
        {
          "rank": "13",
          "name": "Fumane Cave Paintings",
          "location": {
            "locationName": "Fumane Cave, VR, Italy",
            "locationUrl": "https://www.google.com/maps/place/Grotta+di+Fumane/@45.5924847,10.9022413,17z/data=!3m1!4b1!4m5!3m4!1s0x4781fbc791c95995:0xd5b1de66d404b20!8m2!3d45.592481!4d10.90443"
          },
          "creationDate": "35,000",
          "mediaType": "Pictograph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Ffumane-cave-paintings.jpg?alt=media&token=6aa89a2c-f5f5-4fd7-8545-20f3b57265f9"
        },
        {
          "rank": "14",
          "name": "Altamira Cave Paintings",
          "location": {
            "locationName": "Cave of Altamira, Cantabria, Spain",
            "locationUrl": "https://www.google.com/maps/place/Cave+of+Altamira/@43.3774559,-4.1245357,17z/data=!3m1!4b1!4m5!3m4!1s0xd4915202e812c27:0x29a6633c717b1591!8m2!3d43.377452!4d-4.122347"
          },
          "creationDate": "34,000",
          "mediaType": "Pictograph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Faltamira-cave-paintings.jpg?alt=media&token=ed680917-ad59-4766-8b29-a735492a0d35"
        },
        {
          "rank": "15",
          "name": "Swabian Jura Ivory Carvings",
          "location": {
            "locationName": "Vogelherd Cave, Swabian Jura, Niederstotzingen, Germany",
            "locationUrl": "https://www.google.com/maps/place/ARCH%C3%84OPARK+VOGELHERD/@48.5590415,10.1922144,17z/data=!3m1!4b1!4m5!3m4!1s0x479940fb4f08694f:0x575361b14705b633!8m2!3d48.559038!4d10.1944031"
          },
          "creationDate": "33,000",
          "mediaType": "Prehistoric sculpture",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fswabian-jura-ivory-carvings.jpg?alt=media&token=a8f894e4-d3fb-4ad0-b7fb-48e0f3e1b258"
        }
      ]'></zg-data>
    <zg-colgroup>
      <zg-column index="name" header="Name">
        <span class="card-title">[[index.name]]</span>
      </zg-column>
      <zg-column index="image" type="image" header=" "></zg-column>
      <zg-column index="rank" header="Rank">
        <i class="fas fa-hashtag"></i> [[index.rank]]
      </zg-column>
      <zg-column index="location" type="url" header="Location">
        <a href="[[index.location.locationUrl]]" target="_blank" cross-origin><i class="fas fa-map-marker-alt"></i> [[index.location.locationName]]</a>
      </zg-column>
      <zg-column index="creationDate" header="Created">
        ~ [[index.creationDate]] years ago
      </zg-column>
      <zg-column index="mediaType" header="Media Type"></zg-column>
    </zg-colgroup>
    <zg-footer>
      <p>Source: <a href="http://www.visual-arts-cork.com/" target="_blank">Encyclopedia of Art Education</a></p>
      <p>Read more at <a href="http://www.visual-arts-cork.com/prehistoric/oldest-art-top-50.htm">Oldest Stone Age Art: The Top 100 Artworks</a></p>
    </zg-footer>
  </zing-grid>
  <script>
    // Custom loading class for CSS handling
    const zgLoaded = document.querySelector('zing-grid');
    zgLoaded.addEventListener('grid:ready', () => {
      setTimeout(() => zgLoaded.classList.remove('loading'), 0);
    });
  </script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-html">
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Simple Grid</title>
		<script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  </head>
  <body class="zg-body">

    <link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,700" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

    <zing-grid
      layout="card"
      layout-controls="disabled"
      caption="World's Oldest Stone Age Art"
      pager
      page-size="8"
      pager-size-options="4,8,16"
      class="loading"
    >
      <zg-data data='[
        {
          "rank": "1",
          "name": "Bhimbetka and Daraki-Chattan Cupules",
          "location": {
            "locationName": "Bhimbetka Rock Shelters, Raisen District, Madhya Pradesh, India",
            "locationUrl": "https://www.google.com/maps/place/Bhimbetka+rock+shelters/@22.939551,77.6102444,17z/data=!3m1!4b1!4m5!3m4!1s0x397c357473b13b3f:0xb8823ee0ae5de8e6!8m2!3d22.9395461!4d77.6124331"
          },
          "creationDate": "290,000",
          "mediaType": "Petroglyph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fbhembetika-cupules.jpg?alt=media&token=cf54eae1-a358-4bb7-83ab-dc95bb945a4f"
        },
        {
          "rank": "2",
          "name": "Venus of Berekhat Ram",
          "location": {
            "locationName": "Berekhat Ram, Golan Heights, Israel",
            "locationUrl": "https://www.google.com/maps/place/Lake+Ram/@33.2325342,35.7486015,14z/data=!3m1!4b1!4m5!3m4!1s0x151eb73eccfdeab3:0xbd0a1486a80131cf!8m2!3d33.2325!4d35.7661111"
          },
          "creationDate": "230,000",
          "mediaType": "Prehistoric sculpture",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fvenus-of-berekhat-ram.jpg?alt=media&token=d994587b-de18-4e5b-bb65-115afe39fc22"
        },
        {
          "rank": "3",
          "name": "Venus of Tan-Tan",
          "location": {
            "locationName": "River Draa, Tan-Tan, Guelmim-Oued Noun, Morocco",
            "locationUrl": "https://www.google.com/maps/place/Tantan+82000,+Morocco/@28.4307254,-11.1335712,13z/data=!3m1!4b1!4m5!3m4!1s0xc4a90eb762ed1bf:0xca2cc19b59859aa0!8m2!3d28.4380408!4d-11.0987374"
          },
          "creationDate": "200,000",
          "mediaType": "Prehistoric sculpture",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fvenus-tan.jpg?alt=media&token=cf09a8c9-d459-4a36-9271-97cecd7ae287"
        },
        {
          "rank": "4",
          "name": "Blombos Cave Rock Art",
          "location": {
            "locationName": "Blombos Private Nature Reserve, Heidelberg, Western Cape, South Africa",
            "locationUrl": "https://www.google.com/maps/place/Blombos+Private+Nature+Reserve/@-34.4122784,21.2145526,17z/data=!3m1!4b1!4m5!3m4!1s0x1dd6c90a53a87def:0x1e6f4d54e0f39ebe!8m2!3d-34.4122828!4d21.2167413"
          },
          "creationDate": "70,000",
          "mediaType": "Petroglyph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fblombos-cave-art.jpg?alt=media&token=9a9901e8-efce-4bbb-bd7c-f26b051ecdc1"
        },
        {
          "rank": "5",
          "name": "Diepkloof Eggshell Engravings",
          "location": {
            "locationName": "Diepkloof Rock Shelter, Verlorenvlei, Western Cape, South Africa",
            "locationUrl": "https://www.google.com/maps/place/%D0%9F%D0%B5%D1%89%D0%B5%D1%80%D0%B0+%D0%94%D0%B8%D0%BF%D0%BA%D0%BB%D0%BE%D1%84/@-32.3869787,18.4503043,17z/data=!3m1!4b1!4m5!3m4!1s0x1c33a040be0d1b67:0x399454780e877e3c!8m2!3d-32.3869832!4d18.452493"
          },
          "creationDate": "60,000",
          "mediaType": "Petroglyph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fdiepkloof-ostrich-eggshells.jpg?alt=media&token=69dc077e-d8b3-4c23-bc13-959e120c04c0"
        },
        {
          "rank": "6",
          "name": "La Ferrassie Cave Cupules",
          "location": {
            "locationName": "La Ferrassie, Dordogne, France",
            "locationUrl": "https://www.google.com/maps/place/La+Ferrassie+1,+24260+Savignac-de-Miremont,+France/@44.9535245,0.9244914,14z/data=!3m1!4b1!4m5!3m4!1s0x12ab4a5370167ebf:0x179acafcf1b49668!8m2!3d44.953496!4d0.942001"
          },
          "creationDate": "60,000",
          "mediaType": "Petroglyph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fla-ferrassie-cupules.png?alt=media&token=2cf8bb93-77a5-4811-92a7-2410cc9a9b59"
        },
        {
          "rank": "7",
          "name": "El Castillo Cave Paintings",
          "location": {
            "locationName": "Cave of El Castillo, Puente Viesgo, Cantabria, Spain",
            "locationUrl": "https://www.google.com/maps/place/Cave+of+El+Castillo/@43.2923718,-3.9677647,17z/data=!3m1!4b1!4m5!3m4!1s0xd493b732db6adfb:0xb1712a65b2527719!8m2!3d43.2923679!4d-3.965576"
          },
          "creationDate": "39,000",
          "mediaType": "Pictograph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fel-castillo-cave-paintings.jpg?alt=media&token=97e953c4-bf6b-490e-9da3-e51881119b6a"
        },
        {
          "rank": "8",
          "name": "Sulawesi Cave Art",
          "location": {
            "locationName": "Leang Timpuseng Cave, Maros-Pangkep, Indonesia",
            "locationUrl": "https://www.google.com/maps/place/Leang+Timpuseng/@-4.9985644,119.6586086,17z/data=!3m1!4b1!4m5!3m4!1s0x2dbef6377e878e8b:0xb26325a2f5462f83!8m2!3d-4.9985697!4d119.6607973"
          },
          "creationDate": "38,000",
          "mediaType": "Pictograph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fsulawesi-cave-paitings.jpg?alt=media&token=afc7e54f-1bb8-45ec-9b50-71480cbf5834"
        },
        {
          "rank": "9",
          "name": "Lion Man of Hohlenstein Stadel",
          "location": {
            "locationName": "Hohlenstein-Stadel Cave, Asselfingen, Germany",
            "locationUrl": "https://goo.gl/maps/FxmcZfT4NDw"
          },
          "creationDate": "38,000",
          "mediaType": "Prehistoric sculpture",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Flion-man.jpg?alt=media&token=6d754477-aa03-44f3-b94e-2d15201cc601"
        },
        {
          "rank": "10",
          "name": "Venus of Hohle Fels",
          "location": {
            "locationName": "Hohle Fels Cave, Schelklingen, Germany",
            "locationUrl": "https://www.google.com/maps/place/Hohle+Fels+Schelklingen/@48.3792068,9.7520669,17z/data=!3m1!4b1!4m5!3m4!1s0x47997eb1dd24a1af:0x13f890d8b9533fc5!8m2!3d48.3792033!4d9.7542556"
          },
          "creationDate": "38,000",
          "mediaType": "Prehistoric sculpture",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fvenus-of-hohle-fels.jpg?alt=media&token=4b59f7b0-628d-4ca5-88b5-fcb0fd2db6c8"
        },
        {
          "rank": "11",
          "name": "Gorhams Cave Art",
          "location": {
            "locationName": "Gorhams Cave, Southeast face of the Rock of Gibraltar, Gibraltar",
            "locationUrl": "https://goo.gl/maps/huhS3K6N2wm"
          },
          "creationDate": "37,000",
          "mediaType": "Petroglyph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fgorhams-cave-art.jpg?alt=media&token=7f3bb59f-cf93-4b1e-835e-f3dd60e15c82"
        },
        {
          "rank": "12",
          "name": "Abri Castanet Engravings",
          "location": {
            "locationName": "Abri Castanet Rock Shelter, Sergeac, Dordogne, France",
            "locationUrl": "https://www.google.com/maps/place/24290+Sergeac,+France/@45.0003321,1.0949539,14z/data=!3m1!4b1!4m5!3m4!1s0x47ff5623eb45f4ef:0x40665174817f3c0!8m2!3d45.002428!4d1.106926"
          },
          "creationDate": "35,000",
          "mediaType": "Petroglyph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fabri-castanet-art.jpg?alt=media&token=d0d397f5-38e0-4eb1-b62f-339b58c02802"
        },
        {
          "rank": "13",
          "name": "Fumane Cave Paintings",
          "location": {
            "locationName": "Fumane Cave, VR, Italy",
            "locationUrl": "https://www.google.com/maps/place/Grotta+di+Fumane/@45.5924847,10.9022413,17z/data=!3m1!4b1!4m5!3m4!1s0x4781fbc791c95995:0xd5b1de66d404b20!8m2!3d45.592481!4d10.90443"
          },
          "creationDate": "35,000",
          "mediaType": "Pictograph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Ffumane-cave-paintings.jpg?alt=media&token=6aa89a2c-f5f5-4fd7-8545-20f3b57265f9"
        },
        {
          "rank": "14",
          "name": "Altamira Cave Paintings",
          "location": {
            "locationName": "Cave of Altamira, Cantabria, Spain",
            "locationUrl": "https://www.google.com/maps/place/Cave+of+Altamira/@43.3774559,-4.1245357,17z/data=!3m1!4b1!4m5!3m4!1s0xd4915202e812c27:0x29a6633c717b1591!8m2!3d43.377452!4d-4.122347"
          },
          "creationDate": "34,000",
          "mediaType": "Pictograph",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Faltamira-cave-paintings.jpg?alt=media&token=ed680917-ad59-4766-8b29-a735492a0d35"
        },
        {
          "rank": "15",
          "name": "Swabian Jura Ivory Carvings",
          "location": {
            "locationName": "Vogelherd Cave, Swabian Jura, Niederstotzingen, Germany",
            "locationUrl": "https://www.google.com/maps/place/ARCH%C3%84OPARK+VOGELHERD/@48.5590415,10.1922144,17z/data=!3m1!4b1!4m5!3m4!1s0x479940fb4f08694f:0x575361b14705b633!8m2!3d48.559038!4d10.1944031"
          },
          "creationDate": "33,000",
          "mediaType": "Prehistoric sculpture",
          "image": "https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/oldest-stone-age-art%2Fswabian-jura-ivory-carvings.jpg?alt=media&token=a8f894e4-d3fb-4ad0-b7fb-48e0f3e1b258"
        }
      ]'></zg-data>
      <zg-colgroup>
        <zg-column index="name" header="Name">
          <span class="card-title">[[index.name]]</span>
        </zg-column>
        <zg-column index="image" type="image" header=" "></zg-column>
        <zg-column index="rank" header="Rank">
        	<i class="fas fa-hashtag"></i> [[index.rank]]
        </zg-column>
        <zg-column index="location" type="url" header="Location">
        	<a href="[[index.location.locationUrl]]" target="_blank" cross-origin><i class="fas fa-map-marker-alt"></i> [[index.location.locationName]]</a>
        </zg-column>
        <zg-column index="creationDate" header="Created">
        	~ [[index.creationDate]] years ago
        </zg-column>
        <zg-column index="mediaType" header="Media Type"></zg-column>
      </zg-colgroup>
      <zg-footer>
        <p>Source: <a href="http://www.visual-arts-cork.com/" target="_blank">Encyclopedia of Art Education</a></p>
        <p>Read more at <a href="http://www.visual-arts-cork.com/prehistoric/oldest-art-top-50.htm">Oldest Stone Age Art: The Top 100 Artworks</a></p>
      </zg-footer>
    </zing-grid>
  </body>
</html>
.zg-body {
  padding-top: 20px;
  font-family: 'Work Sans', sans-serif;
  background: #ffffff;
}

zing-grid {
  font-family: 'Work Sans', sans-serif;
  max-width: 1000px;
  margin: 0 auto;
  min-height: 600px;
  --theme-color-primary: #D9603D;
	border: 0;
  background: #ffffff;
  --zg-head-cell-font-weight: bold;
  color: #414141;
  opacity: 1;
}
zing-grid.loading { opacity:0; transition:opacity .3s ease-out; }
zing-grid.loading * { opacity:0; }

zing-grid a {
  font-weight: bold;
  color: #D9603D;
 	cursor: pointer;
}

zing-grid a:hover {
  color: #742C0D;
}

zing-grid img { opacity:1; transition:opacity .75s ease-out; }
zing-grid.loading img { opacity:0; }

zg-body a {
  font-weight: bold;
  color: #742C0D;
 	cursor: pointer;
  text-decoration: none;
}

zg-body a:hover {
  color: #D9603D;
}

zg-caption {
  font-size: 30px;
  padding: 10px 20px 0px 20px;
  margin-bottom: -10px;
  background: #ffffff;
  color: #742C0D;
  font-weight: bold;
}

zg-body, 
zg-footer,
zg-watermark {
  background: #ffffff;
}

zg-body img {
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  margin: 0 auto;
  width: 100%;
  min-height: 300px;
}

zg-row[layout="card"] {
  margin: 10px 5px;	
  border: 0;
  background: #EAE9E3;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
}

zg-body zg-cell:nth-child(1) {
  margin-top: -25px;
  padding: 15px;
  background: #D9603D;
}

.zg-body .card-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  display: block;
}

zg-footer {
  font-size: 11px;
  padding: 10px 25px;
  display: flex;
  justify-content: space-between; 
  color: #999999;
}
// Custom loading class for CSS handling
const zgLoaded = document.querySelector('zing-grid');
zgLoaded.addEventListener('grid:ready', () => {
  setTimeout(() => zgLoaded.classList.remove('loading'), 0);
});

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