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 toblack
.subtitle
(required): Subtitle or additional content of the card.subtitleColor
(optional): Color of the subtitle text (gray
,black
,blue
,red
). Defaults toblack
.imageUrl
(required): URL of the background image for the card.size
(optional): Size variant of the card (small
,medium
,large
). Defaults tomedium
.bg
(optional): Background color variant of the card (gray
,white
,black
,blue
,red
). Defaults togray
.
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.
- Type:
-
titleColor
- Type:
"gray" | "black" | "blue" | "red"
- Description: Color of the title text. Defaults to
black
.
- Type:
-
subtitle
- Type:
string
- Description: Subtitle or additional content of the card.
- Type:
-
subtitleColor
- Type:
"gray" | "black" | "blue" | "red"
- Description: Color of the subtitle text. Defaults to
black
.
- 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:
-
bg
- Type:
"gray" | "white" | "black" | "blue" | "red"
- Description: Background color variant of the card. Defaults to
gray
.
- Type: