Content display
Components for presenting text, media, and structured data.
Components
| Component | Purpose |
|---|---|
| Card | Surface transaction details and summary breakdowns |
| Badge | Label status, category, or count |
| Country flag | Show a country's flag as a circular image |
| Scroll area | Custom scrollable container with styled scrollbar |
| Hover card | Rich content preview on hover |
| Table | Display structured data in rows and columns |
| List | Unordered list for structured content |
| Disclosure | Legal, regulatory, and compliance text |
Card
Used for transaction detail layouts — FROM/TO sections with person info and payment methods, plus summary breakdowns with fee, rate, and total.
- Built with
data-slot="form-card"pattern from the prototype - Uses CountryFlag for sender/recipient identity
- Summary rows use
tabular-numsfor aligned numbers
From
To
Badge
Short label for status, category, or count.
- Variants: default, secondary, outline, destructive
- Used in transaction lists and status indicators
Country flag
Circular country flag image, replacing traditional avatars. In Senco, user identity is tied to their country.
- Renders PNG from
/flags/{code}.pngvia Next.js Image - Sizes: 16px (inline), 20px (table rows), 28px (list items), 36px (cards)
- Circular crop with
rounded-full
36px28px
20px
16pxScroll area
Custom scrollable container with a styled, auto-hiding scrollbar.
- Scrollbar fades in on hover/scroll, fades out when idle
- Used for payment method lists and long content areas
Hover card
Rich content preview that appears on hover. Shows profile info with country flag, name, location.
- More detailed than a Tooltip — supports structured content
- Opens on hover with a short delay
- Not touch-friendly — provide alternative access on mobile
Table
Structured data in a scannable grid. Used for transaction history on larger screens.
- Right-align numeric columns for scannability
- Rows show recipient with country flag, amount, status badge, and date
| Contact | Amount | Status | Date |
|---|---|---|---|
| Adaeze Okafor | -250.00 USD | Completed | Apr 15 |
 Kwame Johnson | +1,200.00 GHS | Processing | Apr 14 |
| Carlos Rivera | -800.00 USD | Failed | Apr 13 |
List
Unordered list with primary-colored bullets.
- Used for requirements, feature lists, and options
- Bullet color uses
--ds-primaryfor visual emphasis
- •Valid government-issued photo ID
- •Proof of residential address
- •Active bank account or mobile wallet
Disclosure
Legal, regulatory, and compliance text container.
- Text at caption size (12px) in muted color
- Variant-based icons: regulatory (ShieldCheck), crypto (AlertTriangle), biometric (Fingerprint)
- Supports inline links and optional checkbox for acknowledgement
| Variant | Icon | Usage |
|---|---|---|
| default | None | General informational disclosure |
| regulatory | ShieldCheck | Licensing, compliance, legal notices |
| crypto | AlertTriangle | Risk warnings for crypto/volatile assets |
| biometric | Fingerprint | Biometric data collection notices |
Transfer processing times may vary depending on the recipient's bank and country.
Senco is licensed and regulated by the Financial Services Authority. Your funds are held in segregated accounts.
Cryptocurrency values are volatile. You may lose some or all of your investment. Past performance is not indicative of future results.
Design and accessibility
- Cards must have a clear heading and purpose
- Heading hierarchy is sequential (no skipping levels)
- Icons never convey meaning without an accompanying text label
- All text meets contrast requirements