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.
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.
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.
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.
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.
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.
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.