Alert Avatar Bottom sheet Button Card Carousel Cards Checkbox 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 TypesWhen to useBest practiceContentAvailabilitySegmented 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
Section header

A section header divides sections of a screen.

Section header
Types

There are two different types of section header — section and group.

Section header on launchpad
Section

used to group different sections of content together.

Group header on list
Group

used to introduce a list of items, and separate lists from the rest of the content on a screen.

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
  • The icon border stroke should encroach the top or bottom of the text slightly without disrupting the visibility of the text.
  • 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