Lists — iOS 27

Read when: you need an exact iOS 27 value for lists (size, colour, text, effect) as Apple's kit draws it. Owns: Lists in Apple's iOS 27 kit: components, anatomy, sizes, colours and states, text, effects, kit notes.

Source: specs/lists.txt from Apple's iOS 27 UI Kit (Sketch, v27.1.3), read 2026-11-01. Values are copied from the kit; derived values say so.

Components

117 components. Names with 􀻃 (U+100EC3) are building blocks. The page has no documentation boards; its header calls it "Lists (Tables)".

Anatomy

Row, Default (402 × 52)

Derived: 16 + 81 + 16 = 113 (content starts after the leading accessory and the 16 gap); 113 + 273 + 16 = 402; the title is vertically centred ((52 − 22) / 2 = 15). The separator is the content stack's 1 pt outside border, so it starts at x 113, not at the row edge.

Row, Large (402 × 68)

The two appearances differ because the Light tall leading image is 68 × 68 and the Dark one 52 × 52 (see Leading accessories). The text stack stores fill #FFFFFF in both appearances.

Button row (402 × 52)

Root: row fill, stack h gap0 pad0,16,0,16. group "Stack" 370 × 52 @16,0 with the separator border; text "Label" 370 × 22 @0,15, centred: "Action" (Default), "Destructive Action", "Disabled Action".

Section headers (370 wide)

Derived: heights are 10 + title line height + 10 (28, 25, 22); the trailing action ends 16 from the right (310 + 44 = 354 = 370 − 16).

Leading header blocks (sizes are the master sizes; title "Header", supertitle "Supertitle", subtitle "Subtitle"):

Nested header blocks: Title 59 × 22; Title + Subtitle 59 × 42 (Light) / 68 × 42 with pad0,9,0,0 (Dark), Subtitle 53 × 20 @0,22.

Derived: image + gap = 42 + 10 = 52, the text stack's x.

Trailing header blocks (Extra Prominent only):

Footer (370 × 30)

Root stack h gap0 pad8,16,6,16; text "Footer" 338 × 16 @16,8. Derived: 8 + 16 + 6 = 30; 16 + 338 + 16 = 370.

Grouped Table View (370 × 520)

Root: grouped secondary fill, corners 26 smoothing0.6 style1, stack v gap0. Ten 370 × 52 rows: Rows 1, 3, 5–10 → Rows/Default; Row 2 → Rows with Swipe Actions/Default - Symbol Only/Trailing; Row 4 → …/Default - Symbol + Label/Leading. Derived: 10 × 52 = 520.

Editing controls (25 × 52)

The control sits in a 22 × 22 frame @2,15. Light builds it from a circle and a glyph; Dark from flattened shapes.

Derived: 2 + 22 + 1 = 25 wide; (52 − 22) / 2 = 15 from the top.

Leading accessories

Derived: 25 + 4 = 29 (the image or symbol x); 25 + 4 + 52 = 81; 25 + 4 + 34 + 2 = 65. Leading/Placeholder is 52 × 52 with a bitmap fill; both appearances use this one Light component.

Trailing accessories

The "detail" accessories are stack h gap16 rows of: a "Detail" text (44 × 22 @0), the accessory itself, and a reorder group "Grabber" (38 wide, inner-shadow x0.5 y0 blur0 spread0 in the opaque separator colour, stack h pad0,0.25,0,12.75, holding text "􀌇" (U+100307) 25 × 22 @12.75).

Derived: 44 + 16 = 60; each following x = previous x + width + 16 (60 + 10 + 16 = 86; 86 + 38 = 124).

Light accessories are 52 tall (one row); most Dark ones are 44 tall, so the Dark text sits at y 11 instead of 15. The accessory roots store fill #FFFFFF (Dark editing and disclosure roots #000000); these fills are unbound and the row supplies its own background.

Swipe action buttons (Lists/􀻃/Slide Action/…)

Derived: Stacked 6 + 38 + 5 = 49 (the label's y). The swipe rows recolour the fill per action with color:fill-0 overrides.

Rows with swipe actions (402 wide)

Derived: 3 × 60 + 2 × 10 = 200 and 3 × 84 + 2 × 10 = 272; the row is shifted by the actions' width plus the 10 gap (200 + 10 = 210, 272 + 10 = 282); 192 + 10 + 200 = 402 and 120 + 10 + 272 = 402. Symbol-only actions sit at y 4 (Dark) or the actions group sits at y 4 (Light), so they are 4 pt in from the row's top and bottom (52 − 44 = 8). The row groups store pad0,-216,0,0 (Dark both edges, Light Leading) or pad0,0,0,0 (Light Trailing).

Section index

Lists/􀻃/Section Index (14 × 270): 27 text "Label" layers, 14 × 10 each, "#" then "A"–"Z", every 10 pt (y 0…260). Section Index - iPhone (16 × 667): use "Letters" 14 × 353 @1,158 with a blue fill override.

Examples (Examples/Lists/<App>/Grouped, 402 × 874)

Root: grouped primary fill, stack v gap0 pad62,16,0,16; use "Status Bar" 402 × 62 @0,0.07 → Status Bars/iPhone 17 Pro/<App> Background; group "Content" 370 × 624 (625 Light) @16,62, stack v gap20:

Derived: sections are 20 apart (146 + 20 = 166; 166 + 386 + 20 = 572); tables are inset 16 from the screen sides; content starts below the 62 pt status bar; each section's header sits directly on its table with no gap.

Sizes

Colours and states

Rows, buttons and accessories

Editing controls

Headers and footer

Swipe actions

Section index

States the kit has: the four editing controls, Default/Destructive/Disabled button rows, Disclosure Expanded/Collapsed and the toggle on/off swap. A pressed or highlighted row: Not in the kit.

Text

The bound text styles match text-styles.md except the two 17 / 20 layers noted.

Effects

There are no shared layer styles, blurs or drop shadows on this page.

Kit notes

The page has no documentation boards. Its only non-component layer is a _Header instance (1600 × 126) with the title "Lists (Tables)" and a description the dump cuts off after "Lists and tables present data in one or …". The full text is Not in the dump.

What the components show (summarised from their layout): grouped lists are 370 pt tables inset 16 pt with 26 pt corners on a grouped background; a row is a 16 pt-padded strip whose separator begins where the content begins, after any leading image or symbol; swiping slides the row under a rounded edge to reveal circular or capsule actions spaced 10 pt apart.

Finding it in the spec