Demos Back to Demos

Air Quotes

11 of 25

Find some motivation with these uplifting quotes inspired by air. This ZingGrid features card mode, expandable accordion content, and paging.

Result HTML CSS JS
Edit Download

Result

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid: Simple Grid</title>
    <link href="https://fonts.googleapis.com/css?family=Muli:400,400i|Noto+Serif" rel="stylesheet">
    <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  </head>
  <body>
    <zing-grid
      caption="Air Quotes"
      src="https://zinggrid-examples.firebaseio.com/air-quotes"
      layout="card"
      layout-controls="disabled"
      pager
      page-size="6"
      page-size-options="3,6,9,12">
      <zg-colgroup>
        <zg-column index="quote" header=" ">
          “[[index.quote]]”
        </zg-column>
        <zg-column index="author" header=" "><em>— [[index.author]]</em></zg-column>
        <zg-column renderer="_bindAccordion" cell-class="accordion-flex-layout" index="author, bio" header=" ">
          <template>
            <section class="accordion">
              <input type="checkbox" id="changeme" >
              <label for="changeme">About the Author</label>
              <article>
                <p class="authorBio">[[index.bio]]</p>
              </article>
            </section>
          </template>
        </zg-column>
      </zg-colgroup>
      <zg-footer>
        <p>Biography sources: <a href="https://www.wikipedia.org/" target="_blank" crossorigin>Wikipedia</a>
      </zg-footer>
    </zing-grid>
  </body>
</html>

CSS

body{
  background:#e6e6e6;
  padding: 50px 0;
  font-family: 'Noto Serif', serif;
}

zing-grid {
	max-width: 1000px;
  margin: 0 auto;
  font-family: 'Noto Serif', serif;
  --theme-color-primary: #383838;
  background: none; 
  color: #414141;
  border: none;
  --zg-pager-font-size: 11px;
  --zg-row-body-background_hover: #f4fbff;
  --zg-row-color_hover: #383838;
}

zg-caption {
  background: none; 
  color: #414141;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

zg-body {
  background: none; 
  color: #414141;
}

zg-row {
  background: #ffffff;
}

zg-row[layout="card"] {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  margin: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.09);
}

zg-body[layout="card"] {
  --zg-card-columns: 33.3%;
}

[data-field-index="author"] {
  align-items: center;
  justify-content: center;
	font-family: 'Muli', sans-serif;
}

zg-cell:nth-child(1) {
  font-size: 17px;
  line-height: 1.3;
  text-align: center;
}

zg-cell:nth-child(2) {
  font-size: 12px;
  line-height: 1.3;
  color: #a8a8a8;
}

zg-row[layout="row"] zg-cell:nth-child(1) {
  text-align: left;
}

zg-watermark {
  background: none;
  border: none;
  font-family: 'Muli', sans-serif;
  justify-content: center;
  font-size: 11px;
  margin-top: 10px;
}

zg-footer {
  font-family: 'Muli', sans-serif;
  text-align: center;
  font-size: 12px;
  margin-top: 20px;
}

.accordion-flex-layout {
  --zg-cell-vertical-align: top;
}

/* target accordion for mobile and display as column*/
zing-grid[viewport="mobile"]  .accordion-container {
  flex-direction:column;
  flex-grow: 1;
}

/* Main accordion styling */
.accordion input {
	display: none;
}

.accordion label {
	position:relative;
  display: block;
	background: #f7f7f7;
	border-radius: .25em;
	cursor: pointer;
	margin-bottom: .125em;
	padding: .75rem 1em;
	z-index: 20;
  border: 1px solid #cccccc;
  text-align: center;
  font-size: 13px;
}

.accordion label:hover {
	background: #ccc;
}

.accordion input:checked + label {
	background: #dddddd;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	color: #383838;
	margin-bottom: -1px;
}

.accordion label::after {
  content: '+';  
  position:absolute;
  right:5px;
}

.accordion input:checked + label::after {
  content: '-';  
  position:absolute;
  right:5px;
}

.accordion article {
	background: #f9f9f9;
	/* 
	 * max-height allows height transition in CSS 
	 * use height: 0px; otherwise
	 */
	max-height:0px;
	overflow:hidden;
	z-index:10;
	opacity:0;
	/* allow closing transition */
	-webkit-transition: all 0.7s ease; 
  -moz-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
	transition: all 0.7s ease;
  border: 1px solid #cccccc;
  color: #383838;
  font-size: 13px;
  line-height: 1.5;
}

.accordion article {
	padding: 1em;
	cursor: default;
}

.accordion input:checked article {
}

.accordion input:checked ~ article {
	border-bottom-left-radius: .25em;
	border-bottom-right-radius: .25em;
	/* 
	 * max-height allows height transition in CSS 
	 * use height: auto; otherwise
	 */
	max-height: 500px;
	margin-bottom: .125em;
	opacity: 1;
	/* allow opening transition */
	-webkit-transition: all 1s ease; /* Safari */
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
	transition: all 1s ease;
}

JS

// global event handler for expanding dropdowns
const expandHandler = function() {
  this.classList.toggle('active');
  this.nextElementSibling.classList.toggle('show');
}

// generate randomId for dropdownsreturn Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
const randomId = () => {
  return Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10);
}

// custom render function for coach info accordion
function _bindAccordion(name, bio, cellRef, $cell) {
  // grab template contents
  const $input = cellRef.querySelector('input');
  const $label = cellRef.querySelector('label');
  
  // assign template attributes and custom id's
  // so the label for will trigger the dropdown
  const dropdownID = randomId();
  $input.setAttribute('id', `accordion_${dropdownID}`);
  $label.setAttribute('for', `accordion_${dropdownID}`);
};

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