Demos Back to Demos

History of the Fire Emoji

9 of 25

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

Result HTML CSS JS
Edit Download

Result

HTML

<!DOCTYPE html>
<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" defer></script>
 	  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  </head>
  <body>
    <zing-grid src="https://zinggrid-examples.firebaseio.com/fire-emojis"
      layout="card"
      layout-controls="disabled"
      gridlines="both"
      viewport-types = '{ "mobile": "200" }'>
      <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>

CSS

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: 20px;
}

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-bottom: 0;
}

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

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 {
  margin-bottom: -10px;
  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; 
}

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-top: -2px;
  margin-bottom: -10px;
  color: #d82e08;
}

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

img {
 width: 25%;
  margin: 0 auto;
}

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

zing-grid[layout="row"] {
  border: 0px solid #ddd;
  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: 50%;
}

zg-footer {
  display: flex;
  color: #ffffff;
  justify-content: space-between;
  padding: 10px 20px;
  background: ;
  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;
}

JS

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

Interested in this demo? Modify it to your needs in the ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio