Card

Cards render official ID layouts (Ghana Card, Voter ID, Passport, Driver License), informational notice tiles, a simple default container, and wallet shells with optional header, body, footer, and background art. Configure them with type and cardDetails.

Usage

Loading Code Block...

Default card

Pass cardDetails.content as a string or . The default shell is h-[254px] with p-[24px] padding — when using fixed-size content (e.g. w-96 h-[188px]), set containerClassName="h-[236px]" so shell height equals content + padding (188 + 48).

Default Card

Loading Code Block...

Wallet card (mobile money)

All slots — header, body, and footer — are optional, so you can render header-only or footer-only wallet shells. Use backgroundImage, overlay, overlayClassName, and overlayBackgroundColor for visual treatment.

Sophie Thompson

0241234567

MTN Airtime

top up

Loading Code Block...

Card types (interactive)

Use the control to switch type and inspect the matching cardDetails payload in the code panel.

default

Custom Content

Loading Code Block...

Ghana Card sides

cardDetails.side is front or back.

front

Ecowas Identity Card

Republic of Ghana

Surname/Nom

ASANTE

Firstnames/Prenoms

KWAME NKRUMAH

Nationality/Nationalite

GHANA

Date of Birth/Date de Naissance

15/09/1990

Personal ID Number

GHA-123456789-1

Sex/Sexe

m

Height/Taille (m)

1.75

Document Number/Numero du document

C123456789

Date of Issue/Date de delivrance

01/01/2020

Date of Expiry/Date d'expiration

01/01/2030

1234

Loading Code Block...

Wallet variants

Switch the control to compare mobile money, credit-style, and minimal wallet layouts.

mobile-money

Sophie Thompson

0241234567

MTN Airtime

top up

Loading Code Block...

---

Props

Props	Default	Type	Description
type	'default'	'default' | 'ghana-card' | 'voters-id' | 'passport' | 'driver-license' | 'notice' | 'wallet'	The type of card to display. Each type has its own data structure.
cardDetails	{}	object	Data and configuration for the card. Structure varies by card type.

CardDetails by Type

Default Card

Props	Default	Type	Description
content	-	ReactNode	Main body. Pass any `ReactNode` (string, JSX, fragment, array). Falls back to a built-in placeholder when omitted.
containerClassName	-	string	Classes on the outer card container.

Notice Card

Props	Default	Type	Description
content	-	ReactNode	Main content of the notice card. Falls back to a built-in placeholder when omitted.
showFooter	true	boolean	Whether to show the footer section.
footerHeader	'Notice Card'	string	Header text for the footer section.
footerDescription	'Mar 22, 2023 | 6 minutes read'	string | ReactNode	Footer description. React always wraps the value in a `<p>` element — passing a block-level node (e.g. `<div>`) produces invalid HTML.
chip	{ text: 'Label', color: 'primary', size: 'sm' }	ChipsProps	Chip/badge configuration for the card footer.
containerClassName	-	string	Custom CSS classes for the card container.
footerHeaderClassName	-	string	Classes for the footer title line.
footerDescriptionClassName	-	string	Classes for the footer description line.
footerContainerClassName	-	string	Classes for the footer wrapper.

Ghana Card

Props	Default	Type	Description
surname	-	string	Last name of the card holder.
firstName	-	string	First name of the card holder.
nationality	-	string	Nationality of the card holder.
dateOfBirth	-	string	Date of birth in DD/MM/YYYY format.
personalIDNumber	-	string	Personal identification number.
documentNumber	-	string	Document number of the card.
side	'front'	'front' | 'back'	Which side of the card to display.
gender	-	'male' | 'female'	Gender of the card holder.
dateOfIssue	-	string	Date the card was issued.
dateOfExpiry	-	string	Date the card expires.

Voter ID

Props	Default	Type	Description
surname	-	string	Last name of the voter.
firstName	-	string	First name of the voter.
gender	-	'male' | 'female'	Gender of the voter.
dateOfBirth	-	string	Date of birth in DD/MM/YYYY format.
pollingStationNumber	-	string	Assigned polling station number.
voterIDNumber	-	string	Unique voter identification number.
dateOfRegistration	-	string	Date of voter registration.

Passport

Props	Default	Type	Description
passportNumber	-	string	Passport identification number.
surname	-	string	Last name of the passport holder.
firstName	-	string	First name of the passport holder.
nationality	-	string	Nationality of the passport holder.
gender	-	'male' | 'female'	Gender of the passport holder.
dateOfBirth	-	string	Date of birth in DD/MM/YYYY format.
placeOfBirth	-	string	Place of birth.
dateOfIssue	-	string	Date the passport was issued.
dateOfExpiry	-	string	Date the passport expires.
placeOfIssue	-	string	Place where the passport was issued.

Driver License

Props	Default	Type	Description
licenseNumber	-	string	Driver license identification number.
surname	-	string	Last name of the license holder.
firstName	-	string	First name of the license holder.
gender	-	'male' | 'female'	Gender of the license holder.
dateOfBirth	-	string	Date of birth in DD/MM/YYYY format.
nationality	-	string	Nationality of the license holder.
classOfLicense	-	string	Class/category of the driving license.
dateOfIssue	-	string	Date the license was issued.
dateOfExpiry	-	string	Date the license expires.

Wallet Card

Props	Default	Type	Description
backgroundImage	-	string	URL of the background image.
containerClassName	-	string	Custom CSS classes for the card container.
overlayClassName	-	string	Custom CSS classes for the overlay.
overlayBackgroundColor	'black'	string	Background colour for the overlay.
header	-	ReactNode	Header content. Accepts the full `ReactNode` union (string, JSX, fragment).
body	-	ReactNode	Main body content. Optional in both frameworks.
footer	-	ReactNode	Footer content. Accepts the full `ReactNode` union.
overlay	true	boolean	Whether to show overlay on the card.