Search blocks by description or jump to a page.
A card that grows to reveal more text or controls when opened. Use it for FAQs, settings, or summaries that hide detail until the reader wants it.
Expandable Card is a single card with a header, a short body paragraph, and a footer row. The header holds a title and a one-line description. The body shows a brief summary paragraph that is always visible. The footer contains a Cancel button on the left and, on the right, a chevron toggle button paired with a primary action button. Clicking the chevron reveals a bordered section below the summary that lists additional detail items, and the chevron rotates to signal the open state. Clicking it again collapses that section with a smooth height transition.
The visible and hidden regions are independent. You can rewrite the title, description, summary copy, and expanded list items without affecting the expand behavior. The footer buttons are also free to relabel or repoint, and the hidden section can hold any short content in place of the bullet list.
Reach for this block when a card needs to surface a short answer up front and let curious readers pull up more without leaving the page. It fits well on an AI assistant product's feature or pricing page where a plan summary is visible at a glance and the full capability list sits one tap away. It beats a plain static card when the extra detail would make the default view feel cluttered, and it beats a full modal when the information is short enough to stay in context.
A natural flow around it on a Components page:
Before
After
The card suits any scenario where a brief prompt leads to a deeper list on demand. A few good fits:
Tip: keep the expanded list to five items or fewer so the card does not dwarf its neighbors when open and the transition stays snappy.