Overview

Notch attaches a short note to the top or bottom edge of a card — a button that opens the explanation behind the note, or a static strip.

1
Top · S
2
Top · M
3
Bottom · S
4
Bottom · M

1

2

3

4

States

One state — Standard; the Figma set stages no State axis.

Standard

1

2

3

1
Fill --background-base-grey — the default fill.--notch-fill — re-points it to any DS token on the instance.
2
Note --text-and-icon-secondary — the default note colour.--notch-text — re-points it to any DS token on the instance.
3
Icons --text-and-icon-primary — the start icon and the chevron.

With avatars

3 drivers are viewing your order

2 drivers are viewing your order

A driver is viewing your order

1

1
Avatar Stack The avatars are Squircle Mini (Img, border on) and inherit their styles from the Squircle component — the notch does not restyle them. One to three, as the Figma set stages.

Anatomy

The strip hosts Figma's exposed RowContent — StartSlot, StartText and EndSlot in one line.

3 drivers are viewing your order

2

3

4

1

5

1
Container var(--sp-s28) — the two outer corners; the inner two stay square against the host.--notch-fill — the fill.Required. Fills the host card's width.
2
StartSlot var(--sp-s24) — an IconContainer, discount-outlined by default; any DS icon.Optional, on by default.
3
StartText Body/Compact Body — the note: one line in S, up to two in M; the overflow ellipsizes.--notch-text — the note colour.Required.
4
EndSlot · Chevron var(--sp-s24) — an IconContainer with chevron-right-small; the chevron makes the notch a button.Optional, on by default.
5
EndSlot · Avatars var(--sp-s24) — each avatar, a Squircle Mini in a StackContainer; the styles are the Squircle component's.Takes the chevron's place; the notch stays static unless made a button.

Layout

Paddings, radius and the height cap sit on the SP/100% ratio and never scale; the icons and the text scale up to ×150%.

Size S

Box var(--sp-s32) — height, one line; a cap, not a floor.var(--sp-s4) — top and bottom padding.var(--sp-s20) — side paddings.var(--sp-s28) — the two outer corners.var(--sp-s0) — the two inner corners, flush with the host.
Row var(--sp-s4) — StartSlot to StartText and StartText to EndSlot.var(--sp-s24) — the StartSlot icon and the chevron.StartText fills the space between the slots.
Width Fills the host card's width — the master is staged at 360.

Size M

Box var(--sp-s44) — minimum height; one or two lines centre in it.var(--sp-s4) — top and bottom padding, as in S; it holds once scaled text outgrows the minimum.Up to two lines of text; the second ends with an ellipsis.The sides, the row and the corners as in S; Bottom rounds the two lower corners.
Figma Observation var(--sp-s10) — the padding the Figma set still stages for M; since the merge it allows two lines, which cannot fit under the s44 cap.The two-line M on the s44 minimum with s4 padding is the owner's call (2026-10-09) — flagged for the Figma side.

Alignment · Center

Centred Group The StartSlot, StartText and EndSlot hug their content and centre as one group; the text stops filling and ellipsizes only when the group reaches the side paddings. Start is the default.

RTL

The Row Mirrors The StartSlot moves to the right edge and the EndSlot to the left; the text aligns to the right. The chevron follows its RTL variant and points left; discount-outlined is not directional and does not flip. Figma stages it as RowContent RTL=On; the web takes it from dir="rtl".

Animation

Notch has no motion of its own — it rides on DecorateContainer: the card sits in Slot#1, the Notch in Slot#2 and slides out of the card's edge.

Economy

$16

Economy

$16

Docked On The Card --h-stretch — the Notch takes the card's width: a 320 card, a 320 Notch.--background-base-grey — the container's fill, the Notch's own token: the strip reads as part of the surface.var(--sp-s28) — the container's corners, the same as the card's and the Notch's outer ones.--dc-band — the band Slot#1 opens on the docking side (--v-bottom for the bottom one); it grows and collapses with the Notch, so the container really resizes.var(--sp-s32) — the band here: the Notch's height.The card stays still: the container is anchored on the card's side, so the band grows outward — up for the top Notch, down for the bottom one.
Slide --transforming-state-slow — appear, 300 ms slow-ease-out.--transforming-exit-slow — hide, 300 ms accelerated-ease-in.No scale: the Notch slides out of the card's edge and back (DecorateContainer --slide).

Usage

1
A Short Note Docked On A Card Notch carries one line in S, up to two in M, that belongs to a single card — "Fare is an estimate" on the tariff card. It always sits on the card's top or bottom edge through DecorateContainer, never in the page flow on its own.
2
Not A Message Banner A page-level or longer message is a Notification or a HeaderAlert; a primary action is a Button. The notch stays a secondary, informational strip.
3
One Target At Most With the chevron the whole strip is one button that opens the explanation; nothing inside it is tapped separately, and an avatar stack is never its own target.

Economy

$16

✓ Docked on its card — a short note the card owns

✕ On its own — the square inner corners point at nothing

Accessibility

The note is the content: an interactive notch is one button named by it, a static notch is plain text. Every glyph is decorative.

Fare is an estimate

1

2

1
Interactive Is One Button A real <button type="button"> whose text is the accessible name — "Fare is an estimate, button". TalkBack: Role.Button, one focus stop (mergeDescendants). VoiceOver: .isButton, one element (children: .combine). The hint is the host's when the destination is not obvious.
2
Static Is Plain Text A <div> with no role and no tabindex — never a div dressed as a button, never a button with nothing behind it. TalkBack reads it in the host's order, not as its own focus stop; VoiceOver marks it .isStaticText in the card's reading order.
Glyphs Are Decorative The start icon, the chevron and the StackContainer are hidden from TalkBack, VoiceOver and the web's tree (aria-hidden); the portraits carry alt="". An avatar stack is never read as images — the note says what it means ("3 drivers are viewing your order").
The Full Note Is The Label The ellipsis is visual only — S cuts after one line, M after two — and the accessible name stays the full note on every platform. RTL mirrors the row; the announcement is unchanged.