Docs
Components
Cards
OverlayCard

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:

Sample Overlay Card

This is a sample subtitle.

<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

Another Overlay Card

Another subtitle example.

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