Choosing the Right Header Style for Lists in iOS

As a UX designer working on iOS apps, you’ve likely stared at Apple’s Figma libraries wondering: Which header style should I use for this list? The answer isn’t always obvious, and Apple’s documentation doesn’t spell it out for you. However, after investigating patterns across Apple’s own apps for years, I’ve found there is a logic behind it, and it starts with understanding your list content.

In iOS, there are four core styles of list headers used throughout Apple’s ecosystem: Plain, Grouped, Prominent Grouped, and Extra Prominent Grouped. For reasons unknown, the iOS 18 Figma file only includes three of them — skipping over the Extra Prominent style entirely. Rest assured, it’s a real and supported UI pattern.

This guide breaks down each header style, when to use it, and how Apple uses them in real apps — so you can design with clarity and confidence.

Plain Header

Plain Headers are used for simple lists that contain one type of content, meaning the list is made up of different instances of the same object. These headers are intentionally minimal so the user can focus on the content. Plain Headers can be sticky on scroll to provide persistent context as users move through longer lists.

The Contacts app is a perfect example of Plain Headers. Each contact contains different information, but every item in the list is the same object — a contact. Similarly, the Maps app uses Plain Headers when listing locations. Interestingly, the maps list is styled in groups (something generally not used with Plain Headers), but since each item in the list is the same object — a location — the Plain Header style was chosen.

Grouped Header

Grouped Headers (referred to in the iOS 18 Figma File as “Default”) come into play when a list starts to include more than one type of content. Grouped Headers structure related items into sections, making the list easier to scan and understand. Although slightly more complex than lists that use Plain Headers, lists with Grouped Headers still retain a relatively simple layout.

The classic example of Grouped Headers can be found in the Settings app. Grouped Headers are used throughout Settings to organize the content (and associated selections and actions) into logical clusters. Grouped Headers can also be found in a range of other utility-focused apps, like when Creating a new home in the Home App. It is extremely common to see Grouped Headers used with form-like flows that require lots of user inputs, but aren’t too visually complex.

Prominent Grouped Header

When grouped headers begin to feel too subtle, especially in visually dense or content-rich lists, then it’s time to consider the Prominent Grouped Header. This style provides more visual weight, making each section stand out clearly. Additionally, Prominent Headers often feature interactions like collapsing sections, or an action button at the trialing end of the header.

This header style is also used in many of Apple’s apps. In the Notes App, each note cell contains a lot of details, and the Prominent Header provides a strong hierarchy that makes it easy to identify the groupings without getting lost. In the Clock App, the Prominent Header fits the scale of the large alarms. In both cases, a smaller header would be harder to see because it’s scale wouldn’t work with the rest of the content.

Extra Prominent Grouped Header

Finally, the Extra Prominent Grouped Header is the largest header style provided by the iOS system. They should be reserved for lists with extremely rich visual content. Think of them as being sections that almost deserve their own page. In some cases they can lead to their own pages when paired with disclosure icons (like in ‘iPhone Essentials’ example in the screenshot below) but this will not be the case for every header in the list grouping. These headers can be paired with subheadlines to provide additional context for a grouping, and trailing actions such as “Show More”, “Create”, etc.

The App Store App and the Face Gallery tab on the Watch App both utilize Extra Prominent Grouped Headers. Lists on the App Store are made up of many different types of sections, and the Extra Prominent Header is used to make these groupings clear for some (but not all!) sections. The Watch App uses this large header because it pairs proportionally with the large watch faces displayed. A smaller header wouldn’t bring the same visual balance.

Summary

In the end, selecting the right header style is about understanding your content and structuring it in a way that enhances clarity and usability. Think of each header style as a tool to reflect hierarchy, importance, and intent. Choose the style that best supports the experience you’re creating. When the right style is used, the page design just feels ✨effortless✨.