Card

The Card component provides a flexible container for displaying related content, media, links, and actions.

Cards are built from several composable subcomponents that can be combined to create simple or highly customized layouts.

Import

import { Card } from "@promethey/bsui";

Note

Badge inherits all utility props supported by the Prime component, including layout, spacing, typography, colors, borders, sizing, positioning, and other Bootstrap utility APIs.

Basic usage

Images

Display an image above or below the card body.

Bottom image

Use the placement prop to move the image below the content.

Semantic headers

The as prop allows semantic heading elements.

Images

Use Card.Image to display an image at the top or bottom of the card.

Image placement can be changed using the placement prop.

Header and Footer

Cards support optional header and footer sections.

Titles and Subtitle

Use Card.Title and Card.Subtitle to organize textual content.

Links

Use Card.Link to create Bootstrap-styled links inside card content.

Utility props

All utility props provided by Prime are supported.

API

Card

Prop	Type	Default	Description
children	ReactNode	—	Card content.
className	string	—	Additional CSS classes.
style	object	—	Inline styles.
as	elementType	"div"	HTML element used for rendering.

Card.Body

Prop	Type	Default	Description
children	ReactNode	—	Body content.
className	string	—	Additional CSS classes.
style	object	—	Inline styles.
as	elementType	"div"	HTML element used for rendering.

Card.Header

Prop	Type	Default	Description
children	ReactNode	—	Header content.
className	string	—	Additional CSS classes.
style	object	—	Inline styles.
as	"div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"	"div"	HTML element used for rendering.

Card.Footer

Prop	Type	Default	Description
children	ReactNode	—	Footer content.
className	string	—	Additional CSS classes.
style	object	—	Inline styles.
as	"div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6"	"div"	HTML element used for rendering.

Card.Image

Prop	Type	Default	Description
src	string	—	Image source.
alt	string	—	Alternative text.
placement	"top" | "bottom"	"top"	Image placement inside the card.
className	string	—	Additional CSS classes.
style	object	—	Inline styles.

Card.Title

Prop	Type	Default	Description
children	ReactNode	—	Title content.
className	string	—	Additional CSS classes.
style	object	—	Inline styles.
as	"h1" | "h2" | "h3" | "h4" | "h5" | "h6"	"h5"	HTML element used for rendering.

Card.Subtitle

Prop	Type	Default	Description
children	ReactNode	—	Subtitle content.
className	string	—	Additional CSS classes.
style	object	—	Inline styles.
as	"h1" | "h2" | "h3" | "h4" | "h5" | "h6"	"h6"	HTML element used for rendering.

Card.Text

Prop	Type	Default	Description
children	ReactNode	—	Text content.
className	string	—	Additional CSS classes.
style	object	—	Inline styles.

Card.Link

Prop	Type	Default	Description
children	ReactNode	—	Link content.
to	string	"#"	Navigation target.
className	string	—	Additional CSS classes.
style	object	—	Inline styles.

Card.Group

Prop	Type	Default	Description
children	ReactNode	—	Card collection.
className	string	—	Additional CSS classes.
style	object	—	Inline styles.
as	elementType	"div"	HTML element used for rendering.