Card
Card renders informational notice tiles, a simple default container, and wallet shells with optional header, body, footer, and background art. Configure them with type and cardDetails.
For official ID documents (Ghana Card, Voter ID, Passport, Driver License), use Identity Card instead.
Loading Code Block...Pass cardDetails fields as JSX or strings where the API expects nodes — content fields accept the full React.ReactNode union (string, JSX, fragments, arrays, null).
For cardDetails content fields, pass a string or a VNode produced by h(...) / a rendered component. The Vue type unions are narrower than React’s ReactNode — fragments and arrays are not assignable. WalletCard header / body / footer accept VNode only (not a bare string) at the type level.
Default card
Section titled “Default card”Pass cardDetails.content as a string or 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)
Section titled “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
0241234567MTN Airtime
Loading Code Block...Card types (interactive)
Section titled “Card types (interactive)”Use the control to switch type and inspect the matching cardDetails payload in the code panel.
Loading Code Block...Wallet variants
Section titled “Wallet variants”Switch the control to compare mobile money, credit-style, and minimal wallet layouts.
Sophie Thompson
0241234567MTN Airtime
Loading Code Block...| Props | Default | Type | Description |
|---|---|---|---|
| type | 'default' | 'default' | '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
Section titled “CardDetails by Type”Default Card
Section titled “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
Section titled “Notice Card”The Vue NoticeCard exposes a new #footerDescription slot so consumers can render rich content (links, formatting, multiple lines) where the footerDescription string prop only allowed plain text. The default rendering still falls back to the prop when the slot is omitted:
<template> <Card type="notice" :cardDetails="{ content: '...', showFooter: true, footerHeader: 'Heads up', }" > <template #footerDescription> This requires <a href="/policy" class="underline">two-factor auth</a> to continue. </template> </Card></template>| 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. |
Wallet Card
Section titled “Wallet Card”Vue’s WalletCard also exposes named slots #header, #body, and #footer for direct-import usage. The slot only renders when the matching prop is truthy (the prop value is the slot’s fallback). Through the <Card type="wallet"> dispatcher, content always flows through the prop.
| 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. |