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
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.
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.
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.
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.
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.
To make a card in Horizontal view you need to set
horizontal props as
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.
Explore the available props for the card component
|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.|
|className||Custom class to be added to the card.||string||None|