Design system
Credit Card
Last updated 4 April 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 these components in Figma, install the latest Insites font icons.
- Download the Insites icon font.
- Install the font file on your computer.
- Restart Figma so the font shows in your font list.
To change an icon, copy it from the font icons list and paste it into the icon layer of 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. |