Cards

Reusable internal templates and examples for automations, elements, landing pages, etc.

 <div class="scene" role="button" aria-label="Flip card: Headline">
<div class="card">
<div class="face face--front">
        <img decoding="async"
          class="front-image"
          src=" https://www.toptal.com/designers/subtlepatterns/uploads/moroccan-flower-dark.png"
          alt=""
        ></p>
<div class="front-corner-bl"></div>
<p>        <span class="front-tag">Subheadline</span></p>
<h2 class="front-title">Headline</h2>
<p class="front-sub">01/01/2016</p>
</p></div>
<div class="face face--back">
<div class="back-rule"></div>
<p class="back-label">Subheadline</p>
<h3 class="back-title">Headline</h3>
<p class="back-body">
          Aliquam malesuada, urna non egestas consequat, lorem metus tristique felis, vel pharetra ipsum turpis quis ipsum. Fusce vel orci in eros rutrum commodo non id augue. Link text hover styles.
        </p>
<p><a class="back-btn" href="#">LEARN MORE</a>
      </div>
</p></div>
</p></div>

 
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h2>Basic Card</h2>
<p>Aliquam malesuada, urna non egestas consequat</p>
</p></div>
<div class="flip-card-back">
<h2>Lorem Ipsum</h2>
<p>Aliquam malesuada, urna non egestas consequat, lorem metus tristique felis, vel pharetra ipsum turpis </p>
<p><a class="btn btn-primary" href="#">LEARN MORE</a></p></div>
</p></div>
</p></div>

 <p> <!-- 6. Door open --></p>
<div class="flip-unit">
<div class="flip-door card-shell">
<div class="flip-door__back">
<div class="face-icon"><span class="icon-star"></span><span class="icon-star"></span><span class="icon-star"></span></div>
<div class="face-title">CONTENT REVEALED</div>
<div class="face-sub">Subcontent here</div>
</p></div>
<div class="flip-door__panel flip-door__panel--left">
            <span class="flip-door__panel-label">Left Content</span>
          </div>
<div class="flip-door__panel flip-door__panel--right">
            <span class="flip-door__panel-label">Right Content</span>
          </div>
</p></div>
</p></div>