Card
A Card is a UI design pattern that groups related information in a flexible-size container.
Simple Card with Image
This variant of card has an image, heading, description.The card contains classes like .card, .card-body, .card-image, .card-heading, .card-desc
Cafe Latte
Coffee with Milk
The term comes from the Italian caffellatte or caffè latte, from caffè e latte, literally "coffee and milk"
Card with Badge
Add .badge-tag class to any card variant to get a badge on card.
Pacifico
by Surfaces
It’s an effortless listen, free of any harsh or heavy themes, sending you into a sonic utopia.
Card with Text Overlay
Add .heading-overlay class to any card variant to get text overlay on card.
A calm and soothing shot a big city under the beautiful purple shade of sky.
Vertical Card
Add .card-footer class with buttons components to simple image card variant to get a vertical card.
The Purple View
by Kurt Wagner
A calm and soothing shot a big city under the beautiful purple shade of sky.
Text only Card
Add just .card, .card-heading, .card-desc to get text only card. Add .card-dark class to get a dark card
The Purple View
by Kurt Wagner
A calm and soothing shot a big city under the beautiful purple shade of sky.
The Purple View
by Kurt Wagner
A calm and soothing shot a big city under the beautiful purple shade of sky.
Dismissiable Card
Add .icon-div and .btn to get a Dismissible card
The Purple View
by Kurt Wagner
A calm and soothing shot a big city under the beautiful purple shade of sky.
Horizontal Card
This card uses classes like .h-card, .h-card-img, .h-card-content with base classes like .card, .card-heading .
Mathew John
Senior Designer
E-Commerce Card
E-Commerce Card is widely used to in ecommerce platforms to display the products details like Product image, Name, Price, with option to add to cart or wishlist products.
Minimal White Shoes
400$