Our Changing planet
by Kurt Wagner
Visit ten places on our planet that are undergoing the biggest changes today. Lets share our experience and collaborate to take this research forward.
Card
A card is a very handy component to showcase a small piece of information in concise manner. It is very useful on an e-commerce platform and as modal or pop-up.
Text Only Card
A basic card with no banner or shadow. Put 'card' class over a container and add subsequent elements in it for complete implementation.
Copied!
Our Changing planet
by Kurt Wagner
Visit ten places on our planet that are undergoing the biggest changes today. Lets share our experience and collaborate to take this research forward.
<div class="card">
<h1 class="card__title flex-ct-st">...<
/h1>
<h1 class="card__subtitle flex-ct-st">...<
/h1>
<p class="card__content">...</p>
</div>
Card with Badge
A basic card with banner and a badge. Put 'card' class over a container and add subsequent elements in it for complete implementation.
Copied!
BADGE
<div class="card shdw">
<span class="card__badge">BADGE</span>
<img src="image.jpg" alt="Banner" class="card__banner"/>
<section class="content">
<h1 class="card__title flex-ct-st">...<
/h1>
<h1 class="card__subtitle flex-ct-st">...<
/h1>
<p class="card__content">...</p>
</section>
</div>
Card with Text Overlay
A basic card with banner and text over the banner. Put 'card' class over a container and add subsequent elements in it for complete implementation.
Copied!
Our Changing planet
by Kurt Wagner
Visit ten places on our planet that are undergoing the biggest changes today. Lets share our experience and collaborate to take this research forward.
<div class="card">
<div class="overlay">
<img src="img.jpg" alt="Banner" class="overlay__banner
overlay__back"/>
<h1 class="overlay__title overlay__front flex-ct-st">
...</h1>
<h1 class="overlay__subtitle overlay__front flex-ct-st">
...</h1></div>
<p class="card__content">...</p>
</div>
Card with Dismiss
A dynamic card with banner and dismiss functionality. Put 'card', 'dismiss' and 'open' class over a container and add subsequent elements in it for complete implementation. Add script.js in your document to make this functional.
Copied!
Our Changing planet
by Kurt Wagner
Visit ten places on our planet that are undergoing the biggest changes today. Lets share our experience and collaborate to take this research forward.
<div class="card dismiss open">
<span class="card__dismiss"><i class="fas fa-times-circle"
></i> </span>
<img src="img.jpg" alt="Banner" class="card__banner"/>
<section class="content">
<h1 class="card__title flex-ct-st">...</h1>
<h1 class="card__subtitle flex-ct-st">...</h1>
<p class="card__content">...</p>
</section>
</div>
Card with Shadow
A basic card with banner and shadow. Put 'card' and 'shdw' class over a container and add subsequent elements in it for complete implementation.
Copied!
Our Changing planet
by Kurt Wagner
Visit ten places on our planet that are undergoing the biggest changes today. Lets share our experience and collaborate to take this research forward.
<div class="card shdw">
<img src="img.jpg"alt="Banner" class="card__banner"/>
<section class="content">
<h1 class="card__title flex-ct-st">...;/h1>
<h1 class="card__subtitle flex-ct-st">...</h1>
<p class="card__content">...</p></section>
</div>
Horizontal Card
A basic card with banner but in landscape orientation. Put 'card' and 'landscape' class over a container and add subsequent elements in it for complete implementation.
Copied!
Our Changing planet
by Kurt Wagner
Visit ten places on our planet that are undergoing the biggest changes today. Lets share our experience and collaborate to take this research forward.
<div class="card landscape">
<img src="img.jpg"
alt="Banner" class="card__banner"/>
<section class="content">
<h1 class="card__title flex-ct-st">Our Changing planet</h1>
<h1 class="card__subtitle flex-ct-st">by Kurt Wagner</h1>
<p class="card__content">Visit ten places on our planet that are
undergoing the biggest changes today. Lets share our experience and
collaborate to take this research forward.
</p>
</section>
</div>