Overview

StackContainer lays its items in one row and pulls each next one back over the previous, so a group reads as one compact cluster — the drivers viewing your order, the people sharing a trip. Any content goes in; the default is an avatar stack of Mini squircles at a s8 overlap — shown on this page at L with a s24 overlap so the stacking reads.

1
Last on top
2
First on top

1

2

Anatomy

A hug row and its items — nothing else; the items keep their own contract.

1

2

3

1
Container var(--sp-s0) — paddings; no fill and no radius of its own.Hugs its items. Required.
2
Items One or more direct children — any component. The default is the Squircle Mini (Img, border on), its styles the Squircle component's; each item after the first tucks over the previous one.
3
Top Of The Stack The last item paints on top by default; --first-on-top hands the top to the first one. The row order never changes.

Layout

One value drives the whole layout — the overlap; everything else is the items' own size.

General

L · s24 — this page

Mini · s8 — the default

Overlap var(--sp-s8) — the default overlap: the Figma item spacing −8 at Mini.--stack-container-overlap — re-points it per instance.var(--sp-s24) — the overlap on this page, at L.
No Gap, No Padding var(--sp-s0) — paddings.CSS gap cannot be negative: the overlap is a negative inline-start margin on every item after the first, and the items stay in flow.
Size The container hugs its items; the items keep their own size — one size per stack, so the overlap reads even.

RTL

The Row Follows The Reading Direction Under dir="rtl" the first item sits at the right edge and each next one tucks over it towards the left; the paint order holds — last or first on top. The overlap is a logical margin, so the mirror needs no class of its own.

Usage

1
A Small Group As One Cluster Use it when the members matter as a group, not one by one — the avatar stack in the Notch EndSlot, the people sharing a ride.
2
Three Or Four, Then Say The Count Past three or four items the cluster stops reading; the host's text carries the number instead — "and 12 more".
3
One Size, No Separate Targets The overlap is one value, so items of different sizes tuck unevenly; overlapped items have no room for a tap target each — the stack is one visual unit.

✓ A small cluster of one size

✕ Seven in a row — say the count in text

Accessibility

The stack is decorative: whatever the cluster means, the host's text says it.

1

1
Hidden From Assistive Tech The container is aria-hidden on the web and hidden from VoiceOver and TalkBack in the apps; the portraits carry empty alternatives. A screen reader never hears "image, image, image".
The Host Says What It Means "3 drivers are viewing your order" — the count and the meaning live in the text next to the stack, never in the pictures.
Members To Identify? A List A stack whose members must be told apart one by one is not a stack — list them, each with its own name.