DocsComponentsBlocks

Credit Card

Credit card components for displaying and validating credit card information.

Chase Logo
Chase Mark
Chip

John R. Doe

0123 4567 8901 2345

01/24

123

Installation

npx kibo-ui@latest add credit-card

Features

  • Display a credit card
  • Display the card number, name, expiry, and CVV
  • Flip the card by hovering, or tapping on touch devices
  • Hide/reveal the sensitive information on click

Examples

Apple card

Apple Logo
Chip

John R. Doe

Mastercard Logo

Back only

0123 4567 8901 2345

John R. Doe

01/24

123

Amex card

Scotiabank Logo
Scene Plus Mark
Chip

John R. Doe

0123 4567 8901 2345

01/24

123

Image Zoom

Image zoom is a component that allows you to zoom in on an image.

Ticker

A composable finance ticker for displaying symbols, prices and changes.

On this page

Installation
Features
Examples
Apple card
Back only
Amex card