Components / Surfaces and motion / Expandable island
M1 · Surfaces and motion New
Expandable island
A one-line sheet. Opening animates width first, then height. Closing reverses that and does not overshoot.
<div class="c-island">
<div class="c-island-bar"><span>4 items need a reviewer</span><button type="button" aria-expanded="false">Open</button></div>
<div class="c-island-body"><div class="c-pad"><ul><li>DOC-1042 Access policy</li></ul></div></div>
</div>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A status line can grow into a short list.
- The closed state must stay one line.
When not to use
- The content is a full page.
- The open state should be a route of its own.
Usage
<div class="c-island">
<div class="c-island-bar"><span>4 items need a reviewer</span><button type="button" aria-expanded="false">Open</button></div>
<div class="c-island-body"><div class="c-pad"><ul><li>DOC-1042 Access policy</li></ul></div></div>
</div>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| is-wide | class | absent | Applied first on open, removed last on close. |
| body height | px | 0 | Animated after the width, with --spring-panel at 320 ms. |
| aria-expanded | true or false | false | On the Open button. |
Keyboard
| Key | Action |
|---|---|
| Enter | Opens or closes the sheet. |
Accessibility
- The closed line is text.
- The button name switches between Open and Close.
- Reduced motion applies both stages at once.
Motion
- --spring-panel, 320 ms, cubic-bezier(.22, 1, .36, 1).
- Width leads height on open.
- Height leads width on close.
- The curve ends at rest and does not pass it.
Pattern origin
Pattern type: a sheet that opens width first, then height.