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

Loading demo…

Content preview

Loading demo…

In a FunctionCard

Loading demo…

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

Loading demo…

Centered

CollapsibleHeader can be rendered in a centered state. In this case there are no children and only the button is shown, centered.

Loading demo…