General
Template
Layout
Typography
Navigational
Informational
- Info Boxes
- Output Boxes
-
Code Boxes
- Cards
Data
Input
Images
Decorations
Header
Footer
Components - Cards
Info Components - Cards
Cards to display information in an elegant way
Cards - Informational Display
Cards - with clickable anchor element
Implementation Code and the output
<a class="button-card" href="#">
<span class="button-card-text">
<div class="heading">
<span>Specific Heading</span>
</div>
<span class="content">Lorem ipsum dolor sit
amet consectetur adipisicing.
</span>
<p class="button-card-more">
<b>Click for more</b>
</p>
</span>
</a>
Copy
Output Sample
Cards - with closable window
Implementation Code and the output
<div class="button-card">
<span class="button-card-text">
<div class="heading">
<span>Specific Heading</span>
<i class="fa-regular fa-circle-xmark button-close"></i>
</div>
<span class="content">Lorem ipsum dolor sit
amet consectetur adipisicing elit.dolor sit
amet consectetur adipisicing elit.
</span>
</span>
</div>
Copy
Output Sample
Cards - Sierra
Implementation Code and the output
<article class="output-container-clean padding-2rem">
<section class="card-sierra">
<div class="card-sierra-img">
<img src="portrait.jpg" alt="">
</div>
<span class="card-sierra-text">
<div class="heading">
<span>Specific Heading</span>
</div>
<div class="card-sierra-links">
<a href="" class="card-sierra-link1">
<i class="fa-solid fa-comment-sms"></i>
Link1
</a>
<a href="" class="card-sierra-link2">
<i class="ph-duotone ph-envelope-open"></i>
Link2</a>
<a href="" class="card-sierra-link3">
<i class="ph ph-telegram-logo"></i>
Link3
</a>
</div>
<hr>
<section class="card-sierra-subsection">
<div class="card-sierra-subheading">
Subheading Here
</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</section>
</span>
<div class="card-sierra-details">
<div class="card-sierra-details-heading">
Heading goes here
</div>
<div class="card-sierra-details-content">
<div class="card-sierra-details-button-group">
<div class="card-sierra-details-button-green">
<i class="ph-bold ph-chat-centered-text"></i>
</div>
<div class="card-sierra-details-button-green-title">Message</div>
</div>
<div class="card-sierra-details-button-group">
<div class="card-sierra-details-button-green">
<i class="fa-solid fa-phone"></i>
</div>
<div class="card-sierra-details-button-green-title">Contact</div>
</div>
<div class="card-sierra-details-button-group">
<div class="card-sierra-details-button-red">
<i class="fa-solid fa-xmark"></i>
</div>
<div class="card-sierra-details-button-red-title">Cancel</div>
</div>
</div>
</div>
</section>
</article>
Copy
Output Sample
Specific Heading
Subheading Here
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Heading goes here