Search blocks by description or jump to a page.
A collapsible panel with a soft shadow that lifts it off the page. Use it to highlight an expandable block of content inside a busy layout or feed.
Shadowed Collapsible is a single expandable panel. A lightly tinted trigger row shows a label on the left and a chevron icon on the right. Clicking the row opens a content area below it that lists details as labeled rows, while the panel's shadow deepens to mark the open state. The chevron flips direction as the panel opens and closes.
The label, shadow intensity, and list items are all yours to change. You can swap the specification rows for any key-value pairs that suit your content, add or remove rows freely, and replace the trigger label with whatever heading your context calls for. The shadow transition and icon swap are built in and need no adjustment.
Reach for this block when you need a single collapsible unit that stands out inside a crowded layout. The raised shadow gives the panel its own visual weight, which works well on an AI assistant product page where a model card, capability summary, or context window spec sits alongside other content and needs a clear boundary. It is a better fit than a flat panel when the surrounding page is dense and you want the expandable element to read as a distinct object rather than another row.
A natural flow around it on a Components page:
Before
After
Any concise set of labeled facts that readers may or may not need at a glance is a natural fit. A few directions to consider:
Tip: keep the list to four or five rows so the open panel stays compact and the shadow frame does not swallow too much vertical space.