OverlayCard

This component renders an overlay card with a title, subtitle, and background image.

Import

import {OverlayCard} from "cui-react";

Example

Render a basic overlay card:

<OverlayCard
  title="Sample Overlay Card"
  subtitle="This is a sample subtitle."
  imageUrl="https://cdn.pixabay.com/photo/2020/05/24/11/24/strawberry-5213787_1280.jpg"
  size="small"
  bg="gray"
/>

Customizing

You can customize the OverlayCard component using the following props:

• title (required): Title of the card.
• titleColor (optional): Color of the title text (gray, black, blue, red). Defaults to black.
• subtitle (required): Subtitle or additional content of the card.
• subtitleColor (optional): Color of the subtitle text (gray, black, blue, red). Defaults to black.
• imageUrl (required): URL of the background image for the card.
• size (optional): Size variant of the card (small, medium, large). Defaults to medium.
• bg (optional): Background color variant of the card (gray, white, black, blue, red). Defaults to gray.

Example: Custom Size, Background, and Colors

<OverlayCard
  title="Another Overlay Card"
  subtitle="Another subtitle example."
  imageUrl="https://cdn.pixabay.com/photo/2020/05/24/11/24/strawberry-5213787_1280.jpg"
  size="small"
  bg="blue"
  titleColor="blue"
  subtitleColor="white"
/>

This example renders a large overlay card with a blue background, blue title text, and white subtitle text.

Props

• title

  • Type: string
  • Description: Title of the card.

• titleColor

  • Type: "gray" | "black" | "blue" | "red"
  • Description: Color of the title text. Defaults to black.

• subtitle

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

• subtitleColor

  • Type: "gray" | "black" | "blue" | "red"
  • Description: Color of the subtitle text. Defaults to black.

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

• bg

  • Type: "gray" | "white" | "black" | "blue" | "red"
  • Description: Background color variant of the card. Defaults to gray.