Surface

Sheet

View in Figma

A bottom sheet surface with a grabber, a header block, a content slot, and a home indicator, rounded only on its top corners so it sits flush to the screen bottom.

Overview

A bottom sheet surface with a grabber, a header block, a content slot, and a home indicator, rounded only on its top corners so it sits flush to the screen bottom.

Boost Account balance$5,000.00Every dollar is earning you cash rewards.
SlotCardBody

Anatomy

Sheet
Badge
Boost Account balance$5,000.00Every dollar is earning you cash rewards.
SlotCardBody
  1. 1Container  required
  2. 2Grabber  required  Drag handle at the top edge.
  3. 3Header  optional  Hidden when hasHeader is off; holds the title, an optional subtitle, and an optional status badge.
  4. 4Slot  required  The body content region (the CardBody slot); empty by default, filled by the consumer or the AI.
  5. 5HomeIndicator  required

Measurements

Badge
Boost Account balance$5,000.00Every dollar is earning you cash rewards.
SlotCardBody
Height, padding, gaps, and radius, measured live from the rendered component

Specs

Values resolved live from the token spine. Token names follow the active platform; each links to its page.

Container
Sheet surface fill
colorBackgroundElevatedPrimary
#FFFFFF
Top corner radius
radiusMd
12pt
Grabber
Grabber fill
colorBorderSecondary
#D3D5D8
Grabber and home indicator radius
radiusPill
Pill
Grabber top inset
spacingGapPositiveXs
4pt
Header
Header horizontal and bottom padding
spacingGapPositive2xl
16pt
Header block gap
spacingGapPositiveXl
12pt
Title to subtitle to description gap
spacingGapPositiveXs
4pt
Title and subtitle color
colorContentPrimary
#0C1828
Description color
colorContentSecondary
#6D747E
Title typography
title.md.semibold
Size 24px · typographyFontSizeTitleMdLine height 28px · typographyLineHeightTitleMdWeight 600 · typographyFontWeightSemiboldTracking 0.38px · typographyTrackingTitleMdParagraph spacing 0px · typographyParagraphSpacingTitleMdFamily SF Pro Display · typographyFontFamilyDisplay
Subtitle typography
body.md.semibold
Size 17px · typographyFontSizeBodyMdLine height 22px · typographyLineHeightBodyMdWeight 600 · typographyFontWeightSemiboldTracking -0.41px · typographyTrackingBodyMdParagraph spacing 0px · typographyParagraphSpacingBodyMdFamily SF Pro Text · typographyFontFamilyText
Description typography
body.sm.regular
Size 14px · typographyFontSizeBodySmLine height 18px · typographyLineHeightBodySmWeight 400 · typographyFontWeightRegularTracking -0.32px · typographyTrackingBodySmParagraph spacing 12px · typographyParagraphSpacingBodySmFamily SF Pro Text · typographyFontFamilyText
Slot
Content slot horizontal padding
spacingGapPositive2xl
16pt
Content slot item gap
spacingGapPositiveXl
12pt
Home indicator
Home indicator fill
colorContentPrimary
#0C1828

Properties

The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.

PropertyTypeValues
RootslotSlot
hasHeaderbooleanTrue

Accessibility

Present the sheet as a modal: move focus into it on open, keep focus within it while it is up, and provide a clear dismiss affordance. Return focus to the element that opened it on close.

Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.