Spoiler
Long text cut to a few lines with a “Show more” link, so lists and cards stay easy to scan.
When to use
Section titled “When to use”- Task descriptions in cards, long tool outputs in a timeline, previews of knowledge chunks.
- Not for instructions people must read. Show those in full.
What the consumer provides
Section titled “What the consumer provides”maxHeight(by default three lines ofbody, 66px), the content, and the labels “Show more” / “Show less”.
Behaviour
Section titled “Behaviour”- Cut-off content fades into the ground over the last 32px. The button is
emerald-deep, weight 600, inbody-sm. Itsaria-expandedis wired to the body. It expands over 200ms. If the content fits, no button renders.
Tokens
Section titled “Tokens”ink-secondary, emerald-deep, emerald-hover, surface-000 (the fade), measure.
Mantine
Section titled “Mantine”<Spoiler maxHeight={66} showLabel="Show more" hideLabel="Show less" transitionDuration={200}>.