Card - Keep React
Table of Contents#
- Default Card
- Card With Icon
- Profile Card
- Profile Card With Cover Image
- Post Card
- Product Card
- Horizontal Card
- Pricing Card
- API Reference
Default Card#
The Default Card in the Keep React is a foundational component that provides a clean and straightforward appearance. It serves as a starting point for creating more complex card designs.
Card With Icon#
The Card component in the Keep React can be enhanced with icons to provide additional visual context and meaning. By incorporating icons into your cards, you can effectively communicate information and improve the overall user experience.
Profile Card#
The Profile Card is a specialized variant of the Card component in the Keep React that is specifically designed to display user profiles. It combines textual information with icons and images to create a visually appealing and informative representation of an individual's profile.
Component design systems can help developers to be more productive by providing them with a ready-made set of components to use. This can save time and effort, and it can also help to reduce the risk of errors.
Md Ariful Islam
Product Designer
Khairul Islam Ridoy
UI/UX Designer
Profile Card With Cover Image#
The Profile Card with Cover Image is an extended version of the Profile Card component in the Keep React. It includes a prominent cover image alongside the user's profile information, offering a visually striking way to showcase individuals' profiles.
Khairul Islam
UI/UX Designer
Post Card#
This component is particularly useful for creating an organized and engaging display of your blog content, allowing users to quickly browse through and access your latest articles.
Keep Design System
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo excepturi quam incidunt tempora?
Read More
Keep Design System
Component design systems can help developers to be more productive by providing them with a ready-made set of components to use.
Product Card#
It provides a structured layout that includes key details about each product, such as the product image, title, price, and a brief description. This component is designed to effectively present your products to users, making it easier for them to evaluate and make purchase decisions.
$9.99
Men Nike Shoe
This can save time and effort, and it can also help to reduce the risk of errors.
By Static Mania
4:05
10:05
Garden Street,Ring Road
3 Bed Room
1 Bath
1,032 sqft
Family
$649,00
Horizontal Card#
To make a card in Horizontal view you need to set horizontal props as true.
Garden Street,Ring Road
3 Bed Room
1 Bath
1,032 sqft
Family
$649,00
Pricing Card#
It offers a structured layout that includes details such as the plan name, price, features, and call-to-action buttons. This component is particularly useful for displaying pricing options in a clear and organized manner, helping users make informed decisions about which plan suits their needs best.
Business
Until recently, the prevailing view assumed.
API Reference#
Explore the available props for the card component
| Property | Description | Type | Default |
|---|---|---|---|
| shadow | Toggle the shadow effect for the card. | boolean | false |
| border | Toggle the border for the card. | boolean | false |
| horizontal | Display the card content horizontally. | boolean | false |
| href | URL link for the card. | string | None |
| imgAlt | Alt text for the card's background image. | string | None |
| imgSrc | Source URL for the card's background image. | string | URL |
| imgSize | Size of the card's background image. | sm md lg | lg |