Flip Icon Box

• Support: [email protected]
• Free Install (1 license/site)
• View Demo – Password: abc

#1. Install code

First, click Gear icon on Page where you want to place Flip Icon Box

Next, click Advanced > Paste this code to right box

<!-- Flip Icon Box - @tuanphan -->
<style>
:root{
  --flip-column: 3;
  --flip-mobile-column: 2;
  --tp-gap:18px;
  --tp-mobile-gap: 10px;
  --tp-border:#e6e6e6;
  --tp-accent:#e46e48;
  --tp-card-radius:0px;
  --tp-pad:28px;
  --tp-icon-size:56px;
  --tp-desc-top-space: 6px;
  --title-des-space: 20px;
  --tp-rotate-speed:0.6s;
}
.tp-grid{display:grid;grid-template-columns:repeat(var(--flip-column),1fr);gap:var(--tp-gap);align-items:stretch}@media screen and (max-width:767px){.tp-grid{grid-template-columns:repeat(var(--flip-mobile-column),1fr);gap:var(--tp-mobile-gap)}}.tp-card{display:block;perspective:1000px;text-decoration:none;color:inherit}.tp-inner{position:relative;width:100%;aspect-ratio:1/1;border:1px solid var(--tp-border);border-radius:var(--tp-card-radius);background:#fff;transform-style:preserve-3d;transition:transform var(--tp-rotate-speed) cubic-bezier(.2,.65,.2,1)}.tp-card:hover .tp-inner{transform:rotateY(180deg)}.tp-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--title-des-space);padding:var(--tp-pad);text-align:center;backface-visibility:hidden}.tp-front .tp-ico{width:var(--tp-icon-size);height:var(--tp-icon-size);display:grid;place-items:center}.tp-ico-img{max-width:100%;max-height:100%;object-fit:contain}.tp-title{margin:0;font-size:calc((var(--title-font-size-value) - 1) * 1.2vw + 1rem);color:var(--list-section-simple-title-color);font-family:var(--heading-font-font-family);font-weight:var(--heading-font-font-weight);letter-spacing:var(--heading-font-letter-spacing);text-transform:var(--heading-font-text-transform)}.tp-desc{margin:var(--tp-desc-top-space) 0 0;font-size:calc((var(--body-font-size-value) - 1) * 1.2vw + 1rem);line-height:var(--body-font-line-height);color:var(--list-section-simple-description-color);font-family:var(--body-font-font-family);font-style:var(--body-font-font-style);font-weight:var(--body-font-font-weight);text-transform:var(--body-font-text-transform)}.tp-back{transform:rotateY(180deg)}
  body.sqs-edit-mode-active [data-flip-iconbox-value ]::before {content: "Flip Icon Box @tuanphan";display: block;text-align: center;padding: 12px;background: #f0f0f0;border: 2px dashed #000;border-radius: 5px;margin-bottom: 10px;font-weight: 500;color: #333;}body:not(.sqs-edit-mode-active) section[id*="flipiconbox"] {display: none;}
</style>
<script>document.addEventListener("DOMContentLoaded",function(){var e=document.querySelectorAll("[data-flip-iconbox-value]");e.forEach(function(e){var t=e.getAttribute("data-flip-iconbox-value");if(!t)return;var a="flipiconbox"+t,n=document.getElementById(a);if(!n)return;var r=n.querySelector(".user-items-list-simple");if(!r)return;var c=[];r.querySelectorAll("li.list-item").forEach(function(e){var t=e.querySelector("img.list-image"),a=t?(t.getAttribute("src")||t.getAttribute("data-src")||""):"",n=(e.querySelector(".list-item-content__button")||{}).textContent||"",r=(e.querySelector(".list-item-content__title")||{}).textContent||"",i=e.querySelector(".list-item-content__description"),l=i?i.textContent.trim():"",o=e.querySelector(".list-item-content__button"),s=o?o.getAttribute("href"):"#";c.push({icon:a,frontTitle:n,backTitle:r,backDesc:l,href:s})});var i=document.createElement("section");i.className="tp-wrap";var l=document.createElement("div");l.className="tp-grid",c.forEach(function(e){var t=document.createElement("a");t.className="tp-card",t.href=e.href,t.innerHTML='<div class="tp-inner"><div class="tp-face tp-front"><div class="tp-ico">'+(e.icon?'<img class="tp-ico-img" alt="" src="'+e.icon+'">':"")+'</div><h4 class="tp-title">'+(e.frontTitle||"")+'</h4></div><div class="tp-face tp-back"><h4 class="tp-title">'+(e.backTitle||"")+'</h4><p class="tp-desc">'+(e.backDesc||"")+"</p></div></div>",l.appendChild(t)}),i.appendChild(l),e.innerHTML="",e.appendChild(i),"function"==typeof window.tpFlipBoxHook&&function(){try{window.tpFlipBoxHook({list:r,wrap:i,grid:l,items:c})}catch(e){}}();try{document.dispatchEvent(new CustomEvent("tp-flipbox-built",{detail:{list:r,wrap:i,grid:l,items:c}}))}catch(e){}})});</script>

#2. Usage

#2.1. Next, you add a People List Section (choose People > Choose section with (i) icon)

Next, hover on top right of People Section > Click Edit Content

At tab Elements, enable these options

At tab Content, you can add your desired content (title, body text, image, url)

Something like this

#2.2. Next, hover on top right of People Section > Click Edit Section

At tab Format > Enter #flipiconbox01 into Anchor Link option

#2.3. Add a Code Block above People Section (you added in #2.1)

Paste this syntax into Code Block

<div data-flip-iconbox-value="01"></div>

#2.4. If you want to add multiple Flip Icon Boxed on same pages, you can repeat all steps, but change number 01 in step (#2.2 + #2.3) to number 02, 03, 04,..

#3. Customize

#3.1. Title/Description will inherit People List style, so you can change them easier in Site Styles

or you can also set your custom style by adding code like this to Custom CSS box.

h4.tp-title {
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #000 !important;
}
p.tp-desc {
    font-size: 16px !important;
    color: #000 !important;
}

#3.2. To adjust number of columns on Desktop, Mobile, Gap between items, you can adjust these.

--flip-column: 3;
--flip-mobile-column: 2;

#3.3. To change line color around item, you can change this line

#3.4. To change icon/image size, you can change this.