Action button Alert Avatar Bottom sheet Button Card Carousel Cards Checkbox Chip Circular button Compact date input Copy Block Critical banner Date input Date picker Divider TypesDropdown 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 Tabs Text area Text input Upload Upload input
Design at Wise Foundations Components Action buttonAlertAvatarBottom sheetButtonCardCarousel CardsCheckboxChipCircular buttonCompact date inputCopy BlockCritical bannerDate inputDate pickerDividerDropdownImage RatiosInstructionMedia Button ModalMoney inputNavigation optionNudgePassword inputPopoverProgress Bar Progress SpinnersPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTabsText areaText inputUploadUpload inputPatterns Resources
Divider

Dividers are used to create stronger hierarchy between groups and sections.

Activity page and how to page
Types

Section

Section dividers are used to separate completely unrelated sections of content.

  • Use section spacing before and after.
  • Use at full width of container

Payments screen
Section divider between lists

Use full width of screen

Section divider between list items with indentation

Don’t include margin/padding

Group

Group dividers are used to separate related pieces of content that require additional hierarchy.

  • Use section spacing before and after
  • Include padding to match content
  • Don’t use with section headers that include dividers

Group divider on help centre
Group divider between content sections on help centre

Use to separate grouped information

Group divider before section header with underline

Don’t use with section headers that have built in dividers