Cards group and display information related to a product, category or service using components like text, images, badges, etc to grab the user's attention.
Elixir offers the following range of cards - vertical card, horizontal card, card with badge, card with dismiss button, card with overlay text, card with only text, and card with shadow. Verical card, Horizontal card, Card with badge, Card with dismiss button, Card with overlay text, Card with only text, and Card with shadow.
This is a basic, vertical card with an image, title, subtitle, description, price, and buttons.
To generate a vertical card, use the base class card along with the supporting class card-vertical.
Harry Potter, an eleven-year-old orphan, discovers that he is a wizard and is invited to study at Hogwarts. Even as he escapes a dreary life and enters a world of magic, he finds trouble awaiting him.
₹299.00
(40%)₹499.00
Copy the code below to generate a basic, vertical card.
<div class="card card-vertical">
<div class="card-main">
<button class="btn btn-primary btn-icon btn-dismiss mx-0-75 my-0-75">
<span class="icon">
<i class="fas fa-times"></i>
</span>
</button>
<div class="card-header">
<span class="badge badge-primary mx-0-5 my-0-75 py-0-5 px-0-75">
Hardcover
</span>
<img src="/Components/assets/hp_philosopher_stone.jpg" alt="Harry Potter and the Philosopher's Stone Cover" class="card-img img-responsive" />
</div>
<div class="card-content">
<div class="card-body py-0-75 px-1">
<h5 class="card-title">Harry Potter and the Philosopher's Stone</h5>
<h6 class="card-subtitle mt-0-75">J. K. Rowling</h6>
<p class="card-description mt-1-5 mb-0-75">
Harry Potter, an eleven-year-old orphan, discovers that he is a wizard and is invited to study at Hogwarts. Even as he escapes a dreary life and enters a world of magic, he finds trouble awaiting him.
</p>
<div class="card-price mt-1">
<div class="price-discounted">
<p class="price-discounted">
₹299.00
</p>
<span class="success-color percentage-discount">
(40%)
</span>
</div>
<p class="price-original">
<span class="text-linethrough error-color">
₹499.00
</span>
</p>
</div>
</div>
<div class="overlay p-1">
<span class="overlay-text p-0-75">
Out of Stock
</span>
</div>
<div class="card-footer py-0-75 px-1">
<button class="btn btn-primary btn-text-icon btn-full-width p-0-5">
Add to cart
<span class="icon">
<i class="fas fa-shopping-cart"></i>
</span>
</button>
<button class="btn btn-primary btn-outline btn-full-width p-0-5">
Buy Now
</button>
</div>
</div>
</div>
</div>
This is a basic, horizontal card with an image, title, subtitle, description, price, and buttons.
To generate a horizontal card, use the base class card along with the supporting horizontal card class card-horizontal.
Please not that in small screens, a horizontal card appears as a vertical card.
Harry Potter, an eleven-year-old orphan, discovers that he is a wizard and is invited to study at Hogwarts. Even as he escapes a dreary life and enters a world of magic, he finds trouble awaiting him.
₹299.00
(40%)₹499.00
Copy the code below to use a basic, horizontal card.
<div class="card card-horizontal py-0-75 p-1">
<div class="card-main">
<button class="btn btn-primary btn-icon btn-dismiss mx-0-75 my-0-75">
<span class="icon">
<i class="fas fa-times"></i>
</span>
</button>
<div class="card-header">
<span class="badge badge-primary mx-0-5 my-0-75 py-0-5 px-0-75">
Hardcover
</span>
<img src="/Components/assets/hp_philosopher_stone.jpg" alt="Harry Potter and the Philosopher's Stone Cover" class="card-img img-responsive">
</div>
<div class="card-content mr-1">
<div class="card-body py-0-75 px-1">
<h5 class="card-title">Harry Potter and the Philosopher's Stone</h5>
<h6 class="card-subtitle mt-0-75">J. K. Rowling</h6>
<p class="card-description mt-1-5 mb-0-75">
Harry Potter, an eleven-year-old orphan, discovers that he is a wizard and is invited to study at Hogwarts.
Even as he escapes a dreary life and enters a world of magic, he finds trouble awaiting him.
</p>
<div class="card-price mt-1">
<div class="price-discounted">
<p class="price-discounted">
₹299.00
</p>
<span class="success-color percentage-discount">
(40%)
</span>
</div>
<p class="price-original">
<span class="text-linethrough error-color">
₹499.00
</span>
</p>
</div>
</div>
<div class="overlay p-1">
<span class="overlay-text p-0-75">Out of Stock</span>
</div>
<div class="card-footer py-0-75 px-1">
<button class="btn btn-primary btn-text-icon btn-full-width p-0-5">
Add to cart
<span class="icon">
<i class="fas fa-shopping-cart"></i>
</span>
</button>
<button class="btn btn-primary btn-outline btn-full-width p-0-5">
Buy Now
</button>
</div>
</div>
</div>
</div>
This card contains a text badge that specfies short information to the user.
To generate a card with badge, add the base classs card and the vertical/ horizontal card classes, along with the supporting class, card-wt-badge.
Harry Potter, an eleven-year-old orphan, discovers that he is a wizard and is invited to study at Hogwarts. Even as he escapes a dreary life and enters a world of magic, he finds trouble awaiting him.
₹299.00
(40%)₹499.00
Copy the code below to use a card with badge.
<div class="card card-vertical card-wt-badge">
<div class="card-main">
<button class="btn btn-primary btn-icon btn-dismiss mx-0-75 my-0-75">
<span class="icon">
<i class="fas fa-times"></i>
</span>
</button>
<div class="card-header">
<span class="badge badge-primary mx-0-5 my-0-75 py-0-5 px-0-75">
Hardcover
</span>
<img src="/Components/assets/hp_philosopher_stone.jpg" alt="Harry Potter and the Philosopher's Stone Cover" class="card-img img-responsive" />
</div>
<div class="card-content">
<div class="card-body py-0-75 px-1">
<h5 class="card-title">Harry Potter and the Philosopher's Stone</h5>
<h6 class="card-subtitle mt-0-75">J. K. Rowling</h6>
<p class="card-description mt-1-5 mb-0-75">
Harry Potter, an eleven-year-old orphan, discovers that he is a wizard and is invited to study at Hogwarts.
Even as he escapes a dreary life and enters a world of magic, he finds trouble awaiting him.
</p>
<div class="card-price mt-1">
<div class="price-discounted">
<p class="price-discounted">
₹299.00
</p>
<span class="success-color percentage-discount">
(40%)
</span>
</div>
<p class="price-original">
<span class="text-linethrough error-color">
₹499.00
</span>
</p>
</div>
</div>
<div class="overlay p-1">
<span class="overlay-text p-0-75">
Out of Stock
</span>
</div>
<div class="card-footer py-0-75 px-1">
<button class="btn btn-primary btn-text-icon btn-full-width p-0-5">
Add to cart
<span class="icon">
<i class="fas fa-shopping-cart"></i>
</span>
</button>
<button class="btn btn-primary btn-outline btn-full-width p-0-5">
Buy Now
</button>
</div>
</div>
</div>
</div>
This card contains a dismiss button icon to close the card.
To generate a card with dismiss icon, add the base classs card and the vertical/ horizontal card classes, along with the supporting class, card-wt-dismiss.
Harry Potter, an eleven-year-old orphan, discovers that he is a wizard and is invited to study at Hogwarts. Even as he escapes a dreary life and enters a world of magic, he finds trouble awaiting him.
₹299.00
(40%)₹499.00
Copy the code below to use a card with a dismiss button.
<div class="card card-vertical card-wt-dismiss">
<div class="card-main">
<button class="btn btn-primary btn-icon btn-dismiss mx-0-75 my-0-75">
<span class="icon">
<i class="fas fa-times"></i>
</span>
</button>
<div class="card-header">
<span class="badge badge-primary mx-0-5 my-0-75 py-0-5 px-0-75"
>Hardcover
</span>
<img src="/Components/assets/hp_philosopher_stone.jpg" alt="Harry Potter and the Philosopher's Stone Cover" class="card-img img-responsive" />
</div>
<div class="card-content">
<div class="card-body py-0-75 px-1">
<h5 class="card-title">Harry Potter and the Philosopher's Stone</h5>
<h6 class="card-subtitle mt-0-75">J. K. Rowling</h6>
<p class="card-description mt-1-5 mb-0-75">
Harry Potter, an eleven-year-old orphan, discovers that he is a wizard and is invited to study at Hogwarts.
Even as he escapes a dreary life and enters a world of magic, he finds trouble awaiting him.
</p>
<div class="card-price mt-1">
<div class="price-discounted">
<p class="price-discounted">
₹299.00
</p>
<span class="success-color percentage-discount">
(40%)
</span>
</div>
<p class="price-original">
<span class="text-linethrough error-color">
₹499.00
</span>
</p>
</div>
</div>
<div class="overlay p-1">
<span class="overlay-text p-0-75">
Out of Stock
</span>
</div>
<div class="card-footer py-0-75 px-1">
<button class="btn btn-primary btn-text-icon btn-full-width p-0-5">
Add to cart
<span class="icon">
<i class="fas fa-shopping-cart"></i>
</span>
</button>
<button class="btn btn-primary btn-outline btn-full-width p-0-5">
Buy Now
</button>
</div>
</div>
</div>
</div>
This card contains an overlay text that to highlight some important information.
To generate a card with overlay text, add the base classs card and the vertical/ horizontal card classes, along with the supporting class, card-overlay.
Harry Potter, an eleven-year-old orphan, discovers that he is a wizard and is invited to study at Hogwarts. Even as he escapes a dreary life and enters a world of magic, he finds trouble awaiting him.
₹299.00
(40%)₹499.00
Copy the code below to use cards with overlay and a text on it.
<div class="card card-vertical card-overlay">
<div class="card-main overlay-container">
<button class="btn btn-primary btn-icon btn-dismiss mx-0-75 my-0-75">
<span class="icon">
<i class="fas fa-times"></i>
</span>
</button>
<div class="card-header">
<span class="badge badge-primary mx-0-5 my-0-75 py-0-5 px-0-75">
Hardcover
</span>
<img src="/Components/assets/hp_philosopher_stone.jpg" alt="Harry Potter and the Philosopher's Stone Cover" class="card-img img-responsive" />
</div>
<div class="card-content">
<div class="card-body py-0-75 px-1">
<h5 class="card-title">Harry Potter and the Philosopher's Stone</h5>
<h6 class="card-subtitle mt-0-75">J. K. Rowling</h6>
<p class="card-description mt-1-5 mb-0-75">
Harry Potter, an eleven-year-old orphan, discovers that he is a wizard and is invited to study at Hogwarts.
Even as he escapes a dreary life and enters a world of magic, he finds trouble awaiting him.
</p>
<div class="card-price mt-1">
<div class="price-discounted">
<p class="price-discounted">
₹299.00
</p>
<span class="success-color percentage-discount">
(40%)
</span>
</div>
<p class="price-original">
<span class="text-linethrough error-color">
₹499.00
</span>
</p>
</div>
</div>
<div class="overlay p-1">
<span class="overlay-text p-0-75">
Out of Stock
</span>
</div>
<div class="card-footer py-0-75 px-1">
<button class="btn btn-primary btn-text-icon btn-full-width p-0-5">
Add to cart
<span class="icon">
<i class="fas fa-shopping-cart"></i>
</span>
</button>
<button class="btn btn-primary btn-outline btn-full-width p-0-5">
Buy Now
</button>
</div>
</div>
</div>
</div>
This card contains only text content ant buttons.
To generate a card with only text, add the base classs card and the vertical/ horizontal card classes, along with the supporting class, card-text-only.
Harry Potter, an eleven-year-old orphan, discovers that he is a wizard and is invited to study at Hogwarts. Even as he escapes a dreary life and enters a world of magic, he finds trouble awaiting him.
₹299.00
(40%)₹499.00
Copy the code below to use cards with only text content.
<div class="card card-vertical card-text-only">
<div class="card-main">
<button class="btn btn-primary btn-icon btn-dismiss mx-0-75 my-0-75">
<span class="icon">
<i class="fas fa-times"></i>
</span>
</button>
<div class="card-header">
<span class="badge badge-primary mx-0-5 my-0-75 py-0-5 px-0-75">
Hardcover
</span>
<img src="/Components/assets/hp_philosopher_stone.jpg" alt="Harry Potter and the Philosopher's Stone Cover" class="card-img img-responsive" />
</div>
<div class="card-content">
<div class="card-body py-0-75 px-1">
<h5 class="card-title">Harry Potter and the Philosopher's Stone</h5>
<h6 class="card-subtitle mt-0-75">J. K. Rowling</h6>
<p class="card-description mt-1-5 mb-0-75">
Harry Potter, an eleven-year-old orphan, discovers that he is a wizard and is invited to study at Hogwarts.
Even as he escapes a dreary life and enters a world of magic, he finds trouble awaiting him.
</p>
<div class="card-price mt-1">
<div class="price-discounted">
<p class="price-discounted">
₹299.00
</p>
<span class="success-color percentage-discount">
(40%)
</span>
</div>
<p class="price-original">
<span class="text-linethrough error-color">
₹499.00
</span>
</p>
</div>
</div>
<div class="overlay p-1">
<span class="overlay-text p-0-75">
Out of Stock
</span>
</div>
<div class="card-footer py-0-75 px-1">
<button class="btn btn-primary btn-text-icon btn-full-width p-0-5">
Add to cart
<span class="icon">
<i class="fas fa-shopping-cart"></i>
</span>
</button>
<button class="btn btn-primary btn-outline btn-full-width p-0-5">
Buy Now
</button>
</div>
</div>
</div>
</div>
This card contains a shadow around it.
To generate a card with shadow, add the base classs card and the vertical/ horizontal card classes, along with the supporting class, card-shadow.
Harry Potter, an eleven-year-old orphan, discovers that he is a wizard and is invited to study at Hogwarts. Even as he escapes a dreary life and enters a world of magic, he finds trouble awaiting him.
₹299.00
(40%)₹499.00
Copy the code below to use cards with a shadow.
<div class="card card-vertical card-shadow">
<div class="card-main">
<button class="btn btn-primary btn-icon btn-dismiss mx-0-75 my-0-75">
<span class="icon">
<i class="fas fa-times"></i>
</span>
</button>
<div class="card-header">
<span class="badge badge-primary mx-0-5 my-0-75 py-0-5 px-0-75">
Hardcover
</span>
<img src="/Components/assets/hp_philosopher_stone.jpg" alt="Harry Potter and the Philosopher's Stone Cover" class="card-img img-responsive" />
</div>
<div class="card-content">
<div class="card-body py-0-75 px-1">
<h5 class="card-title">Harry Potter and the Philosopher's Stone</h5>
<h6 class="card-subtitle mt-0-75">J. K. Rowling</h6>
<p class="card-description mt-1-5 mb-0-75">
Harry Potter, an eleven-year-old orphan, discovers that he is a wizard and is invited to study at Hogwarts.
Even as he escapes a dreary life and enters a world of magic, he finds trouble awaiting him.
</p>
<div class="card-price mt-1">
<div class="price-discounted">
<p class="price-discounted">
₹299.00
</p>
<span class="success-color percentage-discount">
(40%)
</span>
</div>
<p class="price-original">
<span class="text-linethrough error-color">
₹499.00
</span>
</p>
</div>
</div>
<div class="overlay p-1">
<span class="overlay-text p-0-75">
Out of Stock
</span>
</div>
<div class="card-footer py-0-75 px-1">
<button class="btn btn-primary btn-text-icon btn-full-width p-0-5">
Add to cart
<span class="icon">
<i class="fas fa-shopping-cart"></i>
</span>
</button>
<button class="btn btn-primary btn-outline btn-full-width p-0-5">
Buy Now
</button>
</div>
</div>
</div>
</div>