$ 75
$ 100
(30% off)
Pegasus
Get Started
Components
cards
A card is container for a few short, related pieces of information. This wireframed example of a card component features several different types of information: an image, a title, a short summary, a time stamp, a hashtag, and a secondary call-to-action button for social media sharing
Vertical Card
In vertical card ,the card content flows from top to bottom.
Sneakers
<div class="card">
<div class="card-top">
<img class="card-img" src= >
</div>
<div class="card-bottom">
<div class="card-body">
<h1 class="body-title">Sneakers</h1>
<div class="body-text">
<p>$ 75</p>
<p class="text-overline">$ 100</p>
<span>(30% off)</span>
</div>
</div>
<div class="card-button">
<button class="card-btn">Add To Cart</button>
<button class="card-btn">Move To Wishlist</button>
</div>
</div>
</div>
Horizontal card
In horizontal cards contents flows from left to right.
Laptops
$ 799
$ 999
(10% off)Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis, facere fugiat quis, aut suscipit id
<div class="card card-horizontal">
<div class="card-top">
<img class="card-img" src= >
</div>
<div class="card-bottom">
<div class="card-body">
<h1 class="body-title">Laptops</h1>
<div class="body-text">
<p>$ 799</p>
<p class="text-overline">$ 999</p>
<span>(10% off)</span>
</div>
</div>
<div class="card-button card-horizontal-btn">
<button class="card-btn">Add To Cart</button>
<button class="card-btn">Move To Wishlist</button>
</div>
</div>
</div>
Card With Badges
Card with a badge contain a badge on its top side of container, it could be either at right side or left side.
Newly Launched
Sneakers
$ 75
$ 100
(30% off)
<div class="card">
<div class="card-top">
<img class="card-img" src="" alt="card">
</div>
<div class="card-badge">
<span>Newly Launched</span>
</div>
<div class="card-bottom">
<div class="card-body">
<h1 class="body-title">Sneakers</h1>
<div class="body-text">
<p>$ 75</p>
<p class="text-overline">$ 100</p>
<span>(30% off)</span>
</div>
</div>
<div class="card-button">
<button class="card-btn">Add To Cart</button>
<button class="card-btn">Move To Wishlist</button>
</div>
</div>
</div>
Card With Dismiss
Card with dismiss contain a closing icon on its container.
Sneakers
$ 75
$ 100
(30% off)
<div class="card">
<div class="card-top">
<img class="card-img" src=
</div>
<div class="card-dismiss">
<span><i class="fas fa-times"></i></span>
</div>
<div class="card-bottom">
<div class="card-body">
<h1 class="body-title">Sneakers</h1>
<div class="body-text">
<p>$ 75</p>
<p class="text-overline">$ 100</p>
<span>(30% off)</span>
</div>
</div>
<div class="card-button">
<button class="card-btn">Add To Cart</button>
<button class="card-btn">Move To Wishlist</button>
</div>
</div>
</div>
Card With Text-Overlay
Below is the Example of card with text overlay.
Sneakers
$ 75
$ 100
(30% off)
<div class="card">
<div class="card-top">
<img class="card-img" src=
</div>
<div class="card-text-overlay">
<h3>Card Text here</h3>
<small>By Rahul Singh</small>
</div>
<div class="card-bottom">
<div class="card-body">
<h1 class="body-title">Sneakers</h1>
<div class="body-text">
<p>$ 75</p>
<p class="text-overline">$ 100</p>
<span>(30% off)</span>
</div>
</div>
<div class="card-button">
<button class="card-btn">Add To Cart</button>
<button class="card-btn">Move To Wishlist</button>
</div>
</div>
</div>
Text only card
Below is the Example of card with text only.
Card Text Here
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat, temporibus itaque doloremque fuga soluta nostrum voluptatem laudantium mollitia incidunt expedita laboriosam consectetur quo quasi inventore nihil odit! Animi, praesentium voluptate.
<div class="card text-only-card">
<div class="card-bottom">
<div class="card-body">
<h1 class="body-title">Card Text Here</h1>
<div class="body-text">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat,
temporibus itaque doloremque fuga soluta nostrum voluptatem laudantium
.</p>
</div>
</div>
<div class="card-button">
<button class="card-btn">Enter</button>
</div>
</div>
</div>
Card With shadow
Below is the Example of card with shadow.
Sneakers
$ 75
$ 100
(30% off)
<div class="card shadow-card">
<div class="card-top">
<img class="card-img" src=
</div>
<div class="card-bottom">
<div class="card-body">
<h1 class="body-title">Sneakers</h1>
<div class="body-text">
<p>$ 75</p>
<p class="text-overline">$ 100</p>
<span>(30% off)</span>
</div>
</div>
<div class="card-button">
<button class="card-btn">Add To Cart</button>
<button class="card-btn">Move To Wishlist</button>
</div>
</div>
</div>