Site settings
Change the appearance of the site to suit your preferences
Accordion
Accordions are user-friendly interface elements that allow for the expansion or collapse of one or more sections, enabling users to reveal or hide information as needed.
Example of a simple accordion
<Expandable title="Read more about the summer disruption"> <Text> The summer disruption is when BaneNOR closes significant portions of the railway network during periods throughout the summer to carry out necessary improvements. </Text> </Expandable>
Example of an accordion with multiple items
<Accordion> <ExpandableItem value="a" title="When to use accordion?"> <Text> Use accordions when you have multiple fields that should be related, and you only want to display one at a time. </Text> </ExpandableItem> <ExpandableItem value="b" title="When to use expandable?"> <Text> Use Expandable when you want only one expandable block that stands alone. </Text> </ExpandableItem> </Accordion>
An accordion where several items can be open at the same time
<Accordion multiple> <ExpandableItem title="Here is a panel" value="a"> Hi from the first panel! 👋 </ExpandableItem> <ExpandableItem title="Here is another panel" value="b"> The other panel is waving back. 👋 </ExpandableItem> </Accordion>
An accordion where one can close an open item
<Expandable title="A panel that can be opened and closed" collapsible > Now you can also close me! </Expandable>
Different variants
<Stack gap={2}> <Expandable variant="ghost" title="This is a ghost-variant"> The ghost variant is often used for menus, lists, or individual elements that need to expand. </Expandable> <Expandable variant="core" title="This is the core-variant"> The core variant is quite similar to the ghost variant but can also be used alongside other graphic elements. </Expandable> <Expandable variant="floating" title="This is the floating-variant"> The floating variant is the most flexible option and should be used in more advanced scenarios. </Expandable> <Expandable variant="underlined" title="This is the underlined-variant"> The underlined variant display with a thin line at the bottom. </Expandable> </Stack>
Accordions with icons on the left
<Expandable title="Read more about the summer disruption" startElement={<InformationOutline24Icon />} collapsible > <Text> The summer disruption is when BaneNOR closes significant portions of the railway network during periods throughout the summer to carry out necessary improvements. </Text> </Expandable>
A more customised example
<Accordion collapsible> <AccordionItem value="Woah, upside down!"> <AccordionItemContent>Woah, upside down!</AccordionItemContent> <AccordionItemTrigger> Here is a title </AccordionItemTrigger> </AccordionItem> </Accordion>