Insites Docs Design system Data EntryCredit Card

Credit Card

Last updated on April 04, 2025

The Insites Credit Card component allows users to have an actual visual representation of the Credit Cards linked to your account. This component displays (only) the last 4 digits of your card and its expiry date.

Requirements

To use the buttons component in Figma please install the latest version of the Insites Font Icons.

  • Download the latest font file here.
  • Install the font file on your machine.
  • Restart Figma to load the file in your font list.

How to change icons in Figma

  • Open the icons list here.
  • Select and copy the icon you want to use from the list
  • Paste the icon into the icon layer in the component.

Figma Component Variant Properties

Credit Card
Properties Options Notes
Selected True, False Toggle to use the selected state of the component.
Hover True, False Toggle to use the hover state of the component.
Show Expired True, False Toggle to show or hide the expired label for the component.
Expired Label — Text content for the expired label of the component.
Show Tag True, False Toggle to show or hide the tag for the component
Show Label — Toggle to show or hide the label for the component.
Label — Text content for the label of the component.
Last Four — Text content for the last four of the component.
Expiration Date — Text content for the expiration date label of the component.
Card Brand Amex, Dinner Club, Discover, JCB, Master, Union Pay, Visa Select the brand logo to use for the component.
Tag - Light True, False Toggle to use the default or light colors for the tag.
Tag - Outlined True, False Toggle to use outlined or solid style of the tag component.
Tag - Color Grey, Blue, Red, Green, Yellow, Orange Select the color to use for the tag.
Tag - Label — Enter the label for the tag.
Tag - Show Icon True, False Toggle to show or hide the icon for the tag.
Tag - Icon — Enter the icon for the tag. See the icons page to see the list of available icons. Copy and paste the icon to update the tag icon.
Credit Card Compact
Properties Options Notes
State Default, Selected, Expired Select the state to display the component.
Hover True, False Toggle to use the hover state of the component.
Options Button True, False Toggle to use the options button of the component.
Show Tag True, False Toggle to show or hide the tag for the component
Show Label — Toggle to show or hide the label for the component.
Label — Text content for the label of the component.
Last Four — Text content for the last four of the component.
Expiration Date — Text content for the expiration date label of the component.
Expired Label—Text content for the expiration date label of the component.
Card Brand Amex, Dinner Club, Discover, JCB, Master, Union Pay, Visa Select the brand logo to use for the component.
Tag - Light True, False Toggle to use the default or light colors for the tag.
Tag - Outlined True, False Toggle to use outlined or solid style of the tag component.
Tag - Color Grey, Blue, Red, Green, Yellow, Orange Select the color to use for the tag.
Tag - Label — Enter the label for the tag.
Tag - Show Icon True, False Toggle to show or hide the icon for the tag.
Tag - Icon — Enter the icon for the tag. See the icons page to see the list of available icons. Copy and paste the icon to update the tag icon.
Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.