Demos Back to Docs

History of the Fire Emoji

82 of 124

Warm up by the hearth with this fire-themed demo, and explore the evolution of the fire emoji over the years. This ZingGrid features slotted content, nested grids, media embeds, default card mode, and advanced custom styling.

Result Full HTML CSS JS
Edit Download

Fire Emoji Survey

A ZingGrid demo with slotted content and gridlines

[[index.company]]

Source: Emojipedia

Powered by ZingGrid

Full Code

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

<head>
  <meta charset="utf-8">
  <title>The Fire Emoji: A Brief Survey (A Slotted Content Demo)</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <style>
    .zg-body {
      background: url('https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/fire-emoji%2Fcartographer.png?alt=media&token=ea48c8dd-2d9a-4365-b54e-564b6ac8a0e8');
      padding: 80px;
    }

    zing-grid {
      max-width: 600px;
      margin: 0 auto;
      font-size: 12px;
      border: 0;
      background: none;
      --theme-color-primary: #E57E4C;
    }

    zg-caption {
      padding: 20px;
      background: #f12711;
      /* fallback for old browsers */
      background: -webkit-linear-gradient(to left, #f5af19, #f12711);
      /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to left, #f5af19, #f12711);
      /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border: 0;
    }

    zg-caption h1 {
      font-size: 25px;
      margin: 0;
    }

    zg-caption h2 {
      font-size: 15px;
      font-weight: normal;
      margin: 0;
    }

    zg-caption {
      padding: 20px;
      background: #f12711;
      /* fallback for old browsers */
      background: -webkit-linear-gradient(to left, #f5af19, #f12711);
      /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to left, #f5af19, #f12711);
      /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border: 0;
    }

    zing-grid zing-grid zg-caption {
      background: #f12711;
      /* fallback for old browsers */
      background: -webkit-linear-gradient(to left, #f5af19, #f12711);
      /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to left, #f5af19, #f12711);
      /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      border-radius: 6px 6px 0 0;
      -webkit-border-radius: 6px 6px 0 0;
      -moz-border-radius: 6px 6px 0 0;
      border: 0;
      padding: 5px;
      height: 40px;
    }

    zing-grid zing-grid zg-caption h1 {
      font-size: 13px;
      margin-top: -25px;
    }

    zg-head-cell {
      font-size: 12px;
      padding: 0;
      background: none;
    }

    zing-grid zing-grid zg-head {
      border-bottom: none;
      background: none;
    }

    zing-grid zing-grid zg-head-cell {
      font-size: 11px;
      padding-left: 10px;
      background: #3d3c3c;
      color: #ffffff;
      height: 30px;
      margin-bottom: -10px;
    }

    zing-grid[layout="row"] zg-head zg-row {
      background: none;
      margin-bottom: -5px;
    }

    zg-cell {
      padding: 8px;
      overflow: visible;
    }

    zg-body[layout="card"] {
      --zg-card-columns: 33.3%;
      background: url('https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/fire-emoji%2Fcartographer.png?alt=media&token=ea48c8dd-2d9a-4365-b54e-564b6ac8a0e8');
      padding: 10px 0;
    }

    zg-body[layout="card"] zg-row {
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border: 0;
      align-content: flex-start;
      margin-bottom: 10px;
    }

    zg-body[layout="card"] zg-row zg-cell {
      border: none;
    }

    .brand-name {
      font-size: 22px;
      margin: -2px 0 -10px 0;
      color: #d82e08;
    }

    zing-grid zing-grid zg-column:first-child {
      width: 60%;
    }

    .zg-body img {
      margin: 0 auto;
    }

    zg-column[layout="row"] {
      width: 50%;
    }

    zing-grid[layout="row"] {
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      font-size: 10px;
      background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
      border: none;
    }

    zg-body[layout="row"] zg-row {
      border-bottom: 1px solid #ddd;
      height: 25px;
    }

    zg-body[layout="row"] zg-row:last-child {
      border-bottom: 0;
    }

    [viewport="mobile"] zg-body[layout="card"] {
      --zg-card-columns: 100% !important;
    }

    [viewport="mobile"] zg-cell:not([data-field-index="pastVersions"])>img {
      width: 150px !important;
      max-width: 150px !important;
    }

    zing-grid:first-of-type [viewport="mobile"] div[data-field-index="emojiImg"] {
      margin-left: calc(50% - 50px);
    }

    zg-footer {
      display: flex;
      color: #ffffff;
      justify-content: space-between;
      padding: 10px 20px;
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border: 0;
      background: #f12711;
      /* fallback for old browsers */
      background: -webkit-linear-gradient(to left, #f5af19, #f12711);
      /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to left, #f5af19, #f12711);
      /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

    zg-footer a {
      font-weight: bold;
      color: #ffffff;
    }

    zing-grid zing-grid zg-footer {
      display: none;
    }

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

<body class="zg-body">
  <zing-grid src="https://zinggrid-examples.firebaseio.com/fire-emojis" layout="card" layout-controls="disabled" gridlines="both">
    <zg-caption>
      <h1><i class="fas fa-fire-alt"></i> Fire Emoji Survey</h1>
      <h2>A ZingGrid demo with slotted content and gridlines</h2>
    </zg-caption>
    <zg-colgroup>
      <zg-column index="company" header="Brand">
        <h2 class="brand-name">[[index.company]]</h2>
      </zg-column>
      <zg-column type="image" index="emojiImg" header=" "></zg-column>
      <zg-column index="pastVersions" header=" " renderer="_renderInnerGrid" width="100%">
        <template>
          <zing-grid layout="row" layout-controls="disabled">
            <zg-caption>
              <h1>Past Versions</h1>
            </zg-caption>
            <zg-colgroup>
              <zg-column index="os" header="Release"></zg-column>
              <zg-column index="emojiImg" header="Emoji" type="image"></zg-column>
            </zg-colgroup>
          </zing-grid>
        </template>
      </zg-column>
    </zg-colgroup>
    <zg-footer>
      <p>Source: <a href="https://emojipedia.org/fire/" target="_blank">Emojipedia</a></p>
      <p>Powered by <a href="https://www.zinggrid.com" target="_blank">ZingGrid</a></p>
    </zg-footer>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // global function declaration
    function _renderInnerGrid(pastVersions, cellRef, $cell) {
      cellRef.querySelector('zing-grid').setData(pastVersions);
    }
  </script>
</body>

</html>
<!DOCTYPE html>
<html class="zg-html">
  <head>
    <meta charset="utf-8">
    <title>The Fire Emoji: A Brief Survey (A Slotted Content Demo)</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
 	  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  </head>
  <body class="zg-body">
    <zing-grid
      src="https://zinggrid-examples.firebaseio.com/fire-emojis"
      layout="card"
      layout-controls="disabled"
      gridlines="both">
      <zg-caption>
        <h1><i class="fas fa-fire-alt"></i> Fire Emoji Survey</h1>
        <h2>A ZingGrid demo with slotted content and gridlines</h2>
      </zg-caption>
      <zg-colgroup>
        <zg-column index="company" header="Brand">
          <h2 class="brand-name">[[index.company]]</h2>
        </zg-column>
        <zg-column type="image" index="emojiImg" header=" "></zg-column>
        <zg-column index="pastVersions" header=" " renderer="_renderInnerGrid" width="100%">
          <template>
            <zing-grid layout="row"
              layout-controls="disabled">
              <zg-caption>
                <h1>Past Versions</h1>
              </zg-caption>
              <zg-colgroup>
                <zg-column index="os" header="Release"></zg-column>
                <zg-column index="emojiImg" header="Emoji" type="image"></zg-column>
              </zg-colgroup>
            </zing-grid>
          </template>
        </zg-column>
      </zg-colgroup>
      <zg-footer>
        <p>Source: <a href="https://emojipedia.org/fire/" target="_blank">Emojipedia</a></p>
        <p>Powered by <a href="https://www.zinggrid.com" target="_blank">ZingGrid</a></p>
      </zg-footer>
    </zing-grid>
  </body>
</html>
.zg-body {
  background: url('https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/fire-emoji%2Fcartographer.png?alt=media&token=ea48c8dd-2d9a-4365-b54e-564b6ac8a0e8');
  padding: 80px;
}

zing-grid {
  max-width: 600px;
  margin: 0 auto;
  font-size: 12px;
  border: 0;
  background: none;
  --theme-color-primary: #E57E4C;
}

zg-caption {
  padding: 20px;
  background: #f12711;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #f5af19, #f12711);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #f5af19, #f12711); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border: 0;
}

zg-caption h1 {
  font-size: 25px;
  margin: 0;
}

zg-caption h2 {
  font-size: 15px;
  font-weight: normal;
  margin: 0;
}

zg-caption {
  padding: 20px;
  background: #f12711;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #f5af19, #f12711);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #f5af19, #f12711); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border: 0;
}

zing-grid zing-grid zg-caption {
  background: #f12711;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #f5af19, #f12711);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #f5af19, #f12711); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border-radius: 6px 6px 0 0;
  -webkit-border-radius: 6px 6px 0 0;
  -moz-border-radius: 6px 6px 0 0;
  border: 0;
  padding: 5px;
  height: 40px;
}

zing-grid zing-grid zg-caption h1 {
  font-size: 13px;
  margin-top: -25px;
}

zg-head-cell {
  font-size: 12px;
	padding: 0;
  background: none;
}

zing-grid zing-grid zg-head {
  border-bottom: none;
  background: none;
}

zing-grid zing-grid zg-head-cell {
  font-size: 11px;
  padding-left: 10px;
  background: #3d3c3c;
  color: #ffffff;
  height: 30px;
  margin-bottom: -10px;
}

zing-grid[layout="row"] zg-head zg-row {
  background: none;
  margin-bottom: -5px;
}

zg-cell {
  padding: 8px;
  overflow: visible;
}

zg-body[layout="card"] {
  --zg-card-columns: 33.3%;
  background: url('https://firebasestorage.googleapis.com/v0/b/zinggrid-examples.appspot.com/o/fire-emoji%2Fcartographer.png?alt=media&token=ea48c8dd-2d9a-4365-b54e-564b6ac8a0e8');
	padding: 10px 0;
}

zg-body[layout="card"] zg-row {
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border: 0;
  align-content: flex-start;
  margin-bottom: 10px;
}

zg-body[layout="card"] zg-row zg-cell {
  border: none;
}

.brand-name {
	font-size: 22px;
  margin: -2px 0 -10px 0;
  color: #d82e08;
}

zing-grid zing-grid zg-column:first-child {
 	width: 60%;
}

.zg-body img {
  margin: 0 auto;
}

zg-column[layout="row"] {
  width: 50%;
}

zing-grid[layout="row"] {
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
 	font-size: 10px; 
  background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
  border: none;
}

zg-body[layout="row"] zg-row {
  border-bottom: 1px solid #ddd;
  height: 25px;
}

zg-body[layout="row"] zg-row:last-child {
  border-bottom: 0;
}

[viewport="mobile"] zg-body[layout="card"] {
  --zg-card-columns: 100% !important;
}

[viewport="mobile"] zg-cell:not([data-field-index="pastVersions"]) > img {
  width: 150px !important;
  max-width: 150px !important;
}

zing-grid:first-of-type [viewport="mobile"] div[data-field-index="emojiImg"] {
  margin-left: calc(50% - 50px);
}

zg-footer {
  display: flex;
  color: #ffffff;
  justify-content: space-between;
  padding: 10px 20px;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border: 0;
  background: #f12711;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #f5af19, #f12711);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #f5af19, #f12711); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

zg-footer a {
  font-weight: bold;
  color: #ffffff;
}

zing-grid zing-grid zg-footer {
  display: none;
}
// global function declaration
function _renderInnerGrid(pastVersions, cellRef, $cell) {
  cellRef.querySelector('zing-grid').setData(pastVersions);
}

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