Anatomy
Backpack icon
This part of the card button is a Backpack icon that represents the action triggered upon interaction.
Hit area
The hit area is the surrounding area of the card button.
Container (optional)
The optional container is a semi-transparent circular shape behind the icon.
Types
There are currently 2 types of card buttons with corresponding actions.
Save
The save card button allows users to save flights, hotels and car hire deals.
Share
The share card button lets users share flights, hotels and car hire deals.
Sizes
Default
The default size is 24px. This card button suits most use cases on inventory cards or pages.
Small
The smaller size card button is 16px. Use this size on smaller inventory cards where space is limited.
Styles
Default
The 'default' style is a Backpack icon and is designed for most use cases.
Contained
The 'contained' style has a semi-transparent colour around the icon. Use this style if the image it’s placed on causes contrast issues with the default card button.
On dark
The 'on dark' style is for when the icon is placed on a dark background or over an image where there is sufficient contrast.
States
Default
The default state is the resting state of the card button that hasn’t been interacted with.
Hover
The hover state shows when a user hovers over the card button.
Transition (for save card button)
The transition state displays a pulsating animation that’s triggered when a user interacts with the card button.
Saved (for save card button)
The saved state is for when an item is saved.
Removed
The removed state is used when a saved item has been removed from the saved items list. It appears as though it hasn’t been interacted with similar to the default state.
Card button spacing
There is set guidance around spacing for when card buttons are next to one another. The spacing between the buttons changes depending on which style is used.
Use the lockup component to keep designs consistent.
