Cards
VISPA-UI includes an expertly-crafted 5 varieties of Cards which can make your UI building experience effortless.
Basic Card
The Basic Card component comes with a Title, a Card Body and a button at the end.
<div class="card">
<div class="card__title">
<h1 class="h-5">Card Title</h1>
</div>
<div class="card__content">
<p class="bd-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Nisi praesentium totam reprehenderit.
</p>
</div>
<a class="card__button" href="#">
<button class="button btn-solid-dark">
Button
</button>
</a>
</div>
Dismissible Image Card
The Image Card component comes with an Image, a close button, a Title, a Subtitle, a Card Body and a few buttons at the end.
Card Title
by Bablu Tailor
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea rerum ipsum itaque adipisci dolores ipsa.
<div class="card">
<div class="card__body">
<img src="#" class="card__img" />
<img
class="icon-lg icon-dark card__close-btn"
src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/times.svg"
>
<div class="card__title">
<h1 class="h-5">Card Title</h1>
<p class="caption">by Bablu Tailor</p>
</div>
<div class="card__content">
<p class="bd-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Ea rerum ipsum itaque adipisci dolores ipsa.
</p>
</div>
</div>
<div class="card__footer">
<div class="card__footer--left">
<a class="card__button" href="#">
<button class="button btn-sm btn-plain btn-primary">
READ
</button>
</a>
</div>
<div class="card__footer--right">
<a href="#">
<img
class="icon-sm icon-dark"
src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/heart.svg"
/>
</a>
<a href="#">
<img
class="icon-sm icon-dark"
src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/bookmark.svg"
/>
</a>
<a href="#">
<img
class="icon-sm icon-dark"
src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/share.svg"
/>
</a>
<a href="#">
<img
class="icon-sm icon-dark"
src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/menu.svg"
/>
</a>
</div>
</div>
</div>
Social Media Card
The Social Media Card component comes with a Username and Avatar, a Card Image, a Body and a few buttons at the end.
Bablu Tailor
7 Hours ago
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores impedit voluptatum dicta odit quos rem delectus deleniti.
<div class="card card__socialmedia">
<div class="card__body">
<div class="card__title">
<div class="card__title--img">
<img class="avatar av-sm" src="#" />
</div>
<div class="card__title--content">
<h1 class="h-5">Bablu Tailor</h1>
<p class="card__title--p">7 Hours ago</p>
</div>
<a href="#" class="card__title--icon">
<img
class="icon-sm icon-dark"
src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/menu.svg" />
</a>
</div>
<img src="#" class="card__img" />
<div class="card__content">
<p class="bd-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Asperiores impedit voluptatum dicta odit quos rem delectus deleniti.
</p>
</div>
</div>
<div class="card__footer">
<div class="card__footer--left">
Jony and 8 Others liked
</div>
<div class="card__footer--right">
<a href="#">
<img
class="icon-sm icon-dark"
src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/heart.svg"
/>
</a>
<a href="#">
<img
class="icon-sm icon-dark"
src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/comment.svg"
/>
</a>
<a href="#">
<img
class="icon-sm icon-dark"
src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/bookmark.svg"
/>
</a>
<a href="#">
<img
class="icon-sm icon-dark"
src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/share.svg"
/>
</a>
</div>
</div>
</div>
Text Overlay Card
The Text Overlay Card component comes with a Title, a Subtitle, an Image Background, a caption text and a few buttons at the end.
Card Title
Card Sub-title
<div class="card card__imgbg">
<img src="#" class="card__img" />
<div class="card__body">
<div class="card__title">
<h1 class="h-5">Card Title</h1>
<p class="caption">Card Sub-title</p>
</div>
<div class="card__footer">
<div class="card__footer--left">
7 hours ago
</div>
<div class="card__footer--right">
<a href="#">
<img
class="icon-sm icon-light"
src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/heart.svg"
/>
</a>
<a href="#">
<img
class="icon-sm icon-light"
src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/comment.svg"
/>
</a>
<a href="#">
<img
class="icon-sm icon-light"
src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/bookmark.svg"
/>
</a>
<a href="#">
<img
class="icon-sm icon-light"
src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/share.svg"
/>
</a>
</div>
</div>
</div>
</div>
E-Commerce Card
The E-Commerce Card component comes with an Image, Product Title, a Product Category, Price Tag, a OFF Badge and a few buttons at the end.
40% OFF
Item Title
Item Category
₹ 5000
3000 /-
<div class="card card__ecommerce">
<div class="card__body">
<div class="card__badge">
<img class="badge__icon icon-danger" src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/bookmark.svg" />
<span class="card__discount">40% OFF</span>
</div>
<img src="#" class="card__img" />
<div class="card__title">
<h1 class="h-5">Item Title</h1>
<p class="caption">Item Category</p>
</div>
<div class="card__content">
<p class="bd-5">₹ <strike>5000</strike> <span class="card__content--newprice">3000</span> /-</p>
<button class="btn-solid-primary card__content--button">-</button>
<span class="st-1">2</span>
<button class="btn-solid-primary card__content--button">+</button>
</div>
</div>
<div class="card__footer">
<div class="card__footer--left">
<a class="card__button" href="#">
<button class="button btn-sm btn-solid-success">
Buy - ₹ 6000
</button>
</a>
</div>
<div class="card__footer--right">
<a href="#">
<img
class="icon-sm icon-dark"
src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/heart.svg"
/>
</a>
<a href="#">
<img
class="icon-sm icon-dark"
src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/share.svg"
/>
</a>
<a href="#">
<img
class="icon-sm icon-dark"
src="https://raw.githubusercontent.com/VishalPatil18/VISPA-UI/main/assets/menu.svg"
/>
</a>
</div>
</div>
</div>