Cards
Cards are versatile container designed to present various content and actions related to a single subject.
Usage
- Displaying various types of content (products, benefits and descriptions).
- Showcase the Call-to-Action (CTA) and emphasize it briefly.
- Displaying quick actions.
Anatomy
The card structure features a subject title followed by a icon/image, supporting text (optional) providing users with additional information, and a call-to-action button for further engagement.
Variant
The card component is available in various variants which are horizontal and vertical variants with visual icon or an image.
Horizontal / Visual Icon
Card Title
This supporting text is here to assist you in making informed decisions and taking the necessary steps
Horizontal / Visual Icon
Card Title
This supporting text is here to assist you in making informed decisions and taking the necessary steps
Vertical / Image
Card Title
This supporting text is here to assist you in making informed decisions and taking the necessary steps
Vertical / Image
Card Title
This supporting text is here to assist you in making informed decisions and taking the necessary steps
Options
Here are the different states of the card component
Vertical / Visual Icon / Title / Supporting Text / Icon Button
Card Title
This supporting text is here to assist you in making informed decisions and taking the necessary steps
Horizontal / Visual Icon / Title / Supporting Text / Text Button
Card Title
This supporting text is here to assist you in making informed decisions and taking the necessary steps
Vertical / Image / Title / Supporting Text
Card Title
This supporting text is here to assist you in making informed decisions and taking the necessary steps
Horizontal / Image / Title / Supporting Text / Text Button
Card Title
This supporting text is here to assist you in making informed decisions and taking the necessary steps
Product Card Example 1
Card title
Card related description will come here
Product Card Example 2
Card title
Product Card Example 3
Card title
Card related description will come here
Product Card Example 4
Card title
This supporting text is here to assist you in making informed decisions and taking the necessary steps.
Product Card Example 5
Card title
Card description will come here
Product Card Example 6
Card title
Card description will come here
Login Form
Login
Product Card Example 7
Global Coverage
Whether you’re living in India or abroad, our plan offers comprehensive protection, giving you peace of mind wherever you are.
Product Card Example 8
Critical illness Plus Rider
Provides financial security against critical illness, A lump sum benefit is paid on diagnosis of any of listed 19 Critical illnesses.
Product Card Example 9
Get Family Quotes
A wide range of policy options to choose from, for your family
Product Card Example 10
Financial Immunity Calculator
Product Card Example 11
Top 5 products
Sanchay Plus
Specifications
Structure and spacing measurements for card.
Live Demo
The Card is demonstrated in a live environment in this demo.