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:

<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 to medium.
• color (optional): Color variant of the card (default, primary, secondary, danger). Defaults to default.

Example: Custom Size, Background, and Colors

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

• titleColor

  • Type: string
  • Description: Color of the title text.

• subtitle

  • Type: string
  • Description: Subtitle or additional content of the card.

• subtitleColor

  • Type: string
  • Description: Color of the subtitle text.

• imageUrl

  • Type: string
  • Description: URL of the background image for the card.

• size

  • Type: "small" | "medium" | "large"
  • Description: Size variant of the card. Defaults to medium.

• color

  • Type: "default" | "primary" | "secondary" | "danger"
  • Description: Color variant of the card. Defaults to default.