Card Image

Updated:

Displays a visual representation of a credit or debit card with customizable styling and card details. Supports horizontal and vertical orientations with responsive sizing that adapts content visibility based on container width.

Slots

The q2-card-image element has one slot that can be used to insert custom content into the component.

Learn more about slots

An optional slot for interactive elements. Supported elements:

  • Dropdown — Renders in the top-right corner. Only visible at large and medium sizes.

Properties

Learn more about properties.

accessibilityLabel
accessibility-label

Accessible label for the card image. When provided, this value is applied as aria-label on either the card container (non-clickable) or the wrapping button (clickable).

background

Background style for the base layer.

  • 'primary' | 'secondary' | 'tertiary': Solid theme colors
  • 'gradient': Grayscale gradient (themable via CSS variables)
  • Custom string: URL/path to an image file (SVG, PNG, JPG)
cardHolder
card-holder

The card holder name to display on the card. Only rendered at large and medium sizes. When not provided, neither the label nor the name is displayed.

cardHolderLabel
card-holder-label

Controls whether the "CARD HOLDER" label is displayed above the card holder name. The label is only supported at large size. At medium size, only the name is shown regardless of this prop. When false, only the name is shown without the label.

cardNumber
card-number

The card number to display. Only the last 4 characters are used, prefixed with **** **** **** . The last 4 characters must all be digits; otherwise the card number is not displayed. Not rendered at tiny size.

cardStatus
card-status

The status of the card. When set, renders a status banner at the top of the card for card sizes medium and up.

cardType
card-type

The card type label displayed alongside the expiration date. Not rendered at tiny size.

cardTypeColor
card-type-color

The color of the card type text. Only applies when cardType is set.

chip

The chip style displayed on the card. Not rendered at tiny size.

  • 'gold': Gold/brass colored EMV chip
  • 'silver': Silver/platinum colored EMV chip
clickable

If true, the card image is wrapped in a q2-btn to handle click interactions.

disabled

If true, the card image is visually disabled and not clickable. Does not affect the dropdown.

expirationDate
expiration-date

The expiration date of the card in ISO 8601 extended format (YYYY-MM). Displayed as MM / YY on the card. Only rendered at large and medium sizes. When not provided, neither the label nor the date value is displayed.

expirationDateLabel
expiration-date-label

Controls whether the "EXPIRES" label is displayed above the expiration date. The label is only supported at large size. At medium size, only the date value is shown regardless of this prop. When false, only the date value is shown without the label.

fiLogo
fi-logo

Path to the financial institution logo image (SVG, PNG, or JPG). Max display dimensions: 280x45 for horizontal cards, 250x45 for vertical cards. When not provided, an empty placeholder div is rendered to maintain consistent card structure.

inline

If true, the component uses display: inline-block. If false, uses display: block.

orientation

The orientation of the card image.

overlay

Background style for the overlay layer. When undefined, the overlay is not rendered.

  • 'dot': CSS-generated dot pattern with mix-blend-mode overlay (themable via CSS variables)
  • Custom string: URL/path to an image file (SVG, PNG, JPG)
statusTextOverride
status-text-override

Overrides the default status banner text (which is the cardStatus value in uppercase). Maximum 14 characters (including spaces) to ensure the text fits within the banner.

vendor

The card vendor. Renders the vendor logo in the bottom-right of the card. Not rendered at tiny size.

vendorColor
vendor-color

The color variant of the vendor logo. Only applies when vendor is set. Defaults to 'white' for Visa and 'brand' for Mastercard.

vendorLogo
vendor-logo

Path to a custom vendor logo image (SVG, PNG, or JPG). When set, this overrides the vendor prop and displays the custom logo. Not rendered at tiny size.

Events

The q2-card-image element exposes events that can be used to send and receive data from the component based on user interaction.

Learn more about events.

tctClick

Emitted when a clickable card is clicked. Contains card details.

Event Detail Type signature

{ cardNumber: string; cardStatus: string; statusTextOverride: string; cardHolder: string; expirationDate: string; cardType: string; vendor: string; }

Accessibility

Accessibility Report

Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

CSS Variables

The following CSS variables are available to override the default theme styles of the q2-card-image component.

Dependencies

Many Tecton components consume other components to maintain visual and functional consistency. If you are looking for a CSS variable you think should exist but are not seeing it, it may be defined in one of the dependent components below. Either way, if you think it's something we should expose more conveniently, let us know!