Alert Avatar Bottom sheet Button Card Carousel Cards When to useAccessibilityCheckbox Chip Circular button Compact date input Copy Block Critical banner Date input Date picker Divider Dropdown Icon button Image Ratios Instruction Media Button Modal Money input Navigation option Nudge Password input Popover Progress Bar Progress Spinners Promo card Radio Screen loader Search input Section header Segmented control Select Snackbar Summary Switch Table Tabs Text area Text input Upload Upload input
Design at Wise Foundations Components AlertAvatarBottom sheetButtonCardCarousel CardsCheckboxChipCircular buttonCompact date inputCopy BlockCritical bannerDate inputDate pickerDividerDropdownIcon buttonImage RatiosInstructionMedia Button ModalMoney inputNavigation optionNudgePassword inputPopoverProgress Bar Progress SpinnersPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTableTabsText areaText inputUploadUpload inputPatterns Resources
Carousel Cards

The carousel cards allow us to display different types of information in a carousel pattern.

Card carousel types
When to use

Our carousel cards are used within our carousel pattern to help showcase steps, customer imagery or reviews. We have 5 cards types:

  • Image

  • Stepper White

  • Stepper Neutral

  • Video Testimonial

  • Text Testimonial

Card types should never be mixed within the same pattern.

Image carousel card
Image

Use images when showcasing Wise customers

White stepper card
Stepper White

Use stepper white when guiding users through a step by step process and the carousel pattern has a colour background

Neutral stepper card
Stepper Neutral

Use stepper neutral when guiding users through a step by step process and the carousel pattern has a white background

Video card
Video Testimonial

Use the video testimonial card when we have a video from a Wise customer to showcase

Quote card
Text Testimonial

Use the text testimonial card when we have a quote from a Wise customer, typically from Trustpilot

Accessibility

To ensure maximum accessibility for our users, use plain language in accordance with our tone of voice for an inclusive reading experience. The text should be precise and informative. Ensure that images are accompanied by appropriate alternative text (alt text) for screen readers. An ideal alt text is descriptive and concise to convey the meaning and purpose of the image to users who may not be able to see it.