HoverCard
This component displays a card that reveals additional content when hovered over.
Import
import {HoverCard} from "cui-react";
Example
Render a basic hover card:
Sample Hover Card
Hover over me!
<HoverCard
title="Sample Hover Card"
subtitle="Hover over me!"
imageUrl="https://cdn.pixabay.com/photo/2020/05/24/11/24/strawberry-5213787_1280.jpg"
size="medium"
color="default"
titleColor="text-white"
subtitleColor="text-gray-300"
/>
Customizing
You can customize the HoverCard
component using the following props:
title
(required): Title of the card.titleColor
(optional): Color of the title text.subtitle
(required): Subtitle or additional content of the card.subtitleColor
(optional): Color of the subtitle text.imageUrl
(required): URL of the background image for the card.size
(optional): Size variant of the card (small
,medium
,large
). Defaults tomedium
.color
(optional): Color variant of the card (default
,primary
,secondary
,danger
). Defaults todefault
.
Example: Custom Size, Background, and Colors
Another Hover Card
Hover over me for more!
<HoverCard
title="Another Hover Card"
subtitle="Hover over me for more!"
imageUrl="https://cdn.pixabay.com/photo/2020/05/24/11/24/strawberry-5213787_1280.jpg"
size="small"
color="primary"
titleColor="text-black"
subtitleColor="text-gray-600"
/>
This example renders a large hover card with a primary color variant, a custom title color, and subtitle color.
Props
-
title
- Type:
string
- Description: Title of the card.
- Type:
-
titleColor
- Type:
string
- Description: Color of the title text.
- Type:
-
subtitle
- Type:
string
- Description: Subtitle or additional content of the card.
- Type:
-
subtitleColor
- Type:
string
- Description: Color of the subtitle text.
- Type:
-
imageUrl
- Type:
string
- Description: URL of the background image for the card.
- Type:
-
size
- Type:
"small" | "medium" | "large"
- Description: Size variant of the card. Defaults to
medium
.
- Type:
-
color
- Type:
"default" | "primary" | "secondary" | "danger"
- Description: Color variant of the card. Defaults to
default
.
- Type: