Action button Alert Avatar Bottom sheet Button Card Checkbox Chip Circular button Compact date input Critical banner Date input Date picker Dropdown Instruction Modal Money input Navigation option Nudge Password input Popover Promo card Radio Screen loader Search input Section header When to useBest practiceContentAvailabilitySegmented control Select Snackbar Summary Switch Tabs Text area Text input Upload Upload input
Design at Wise Foundations Components Action buttonAlertAvatarBottom sheetButtonCardCheckboxChipCircular buttonCompact date inputCritical bannerDate inputDate pickerDropdownInstructionModalMoney inputNavigation optionNudgePassword inputPopoverPromo cardRadioScreen loaderSearch inputSection headerSegmented controlSelectSnackbarSummarySwitchTabsText areaText inputUploadUpload inputPatterns Resources
Section header

A section header divides sections of a screen.

Section header
When to use

Use a section header:

  • to divide content with different purposes into sections within a screen
  • to introduce a list of items, and separate that list from the rest of the content on a screen
  • if here’s a single action that relates to the content in the section — for example, you could use the section header for a list with limited items, and a ‘See more' button to display the rest of them

Don't use a section header:

  • if you have a list that will always contain just one item — use a heading text style instead

Best practice
  • Keep the text short and relevant to the content in the section.
  • Don't include a link unless it's absolutely necessary.

Content

Text

Text should:

  • be no more than 3 words

  • use a noun that describes the information within the section, like ‘Account services’

  • not start with a verb or be an instruction (like ‘Select’ or ‘Choose')

Availability

Platform

Available

Developer documentation

Android

iOS

Web

Web documentation