Cards
Cards contain content and actions about a single subject.
They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.
Basic Cards
Card component can be created by using card classname in <div> tag. It can
be aligned horizontally or vertically.
To handle image responsiveness and alignment, use media-card class.
Horizontal Card
It can be aligned horizontally by including hz-card class name.
Dream State
Hallucination or reality?Dreamify
Nene & the notion
Code Snippets
Dream State
Hallucination or reality?
Dreamify
Nene & the notion
Vertical Card
It can be aligned vertically by including vt-card class name.
Dream State
Hallucination or reality?Code Snippets
Dream State
Hallucination or reality?
Cards with Badge
Cards can also include badge. Copy paste the <span> tag.
Peachtone Shirt
Sold by: Nene Stores Linen shirt for women.
249₹ 499₹
(50% off)
Peachtone Shirt
Trendy fashion for summer season.Code Snippets
Peachtone Shirt
Sold by: Nene Stores
Linen shirt for women.
249₹ 499₹
(50% off)
NEW
Peachtone Shirt
Trendy fashion for summer season.
Most Popular
Text Overlay Cards
For using text overlay, include class card-text-overlay on card header text. To disable the
card, you need to include class disabled in the <card div>. Along with that
include card-overlay class on the text you want to overlay.
Peachtone Shirt
Linen shirt for women.Code Snippets
Peachtone Shirt
Linen shirt for women.
Dismiss & Text only Card
Dismiss card can be created using dismiss-card class.
Great!
Your request has been sent.Would you like to contiue?
Nene Book
Inspirational book. Dives deep into the questions about human's existence.Code Snippets
Great!
Your request has been sent.
Would you like to contiue?
Nene Book
Inspirational book. Dives deep into the questions about human's existence.