Collapsible React-only
Open in Storybook Open in Figma
A Collapsible is a user interface element that expands when clicked on. It allows to hide content that is not immediately relevant to the user.
Collapsibles in George exist in a variety of different forms. Their default can be either collapsed - hence the name - or expanded.
Rules For Developers
- The state of a collapsible (expanded/collapsed) should be stored to display/hide the content when the user returns to that part of the application the page.
Basic Collapsible
Content preview
In a FunctionCard
CollapsibleHeader
CollapsibleHeader automatically wraps its children in .g-faded paragraph when they are a string. Any other type gets rendered as-is, this is useful e.g. for headings.
Rules For Developers
- Wrap complex children in
<Paragraph faded />to align the visuals
Centered
CollapsibleHeader can be rendered in a centered state. In this case there are no children and only the button is shown, centered.