Accordion

An accordion is composed of vertically stacked headers that reveal more information when triggered.

AccordionItem

AccordionItem is composed of a header and expandable panel content

headerContent must include a Heading component or semantic h\* tag
Expandable panel content is passed as children, and can be either a text string or a React component

live

<Accordion>
  <AccordionItem
    headerContent={
      <Heading noMargin size="small">
        Header
      </Heading>
    }
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </AccordionItem>
</Accordion>

Accordion

Accordion is composed of AccordionItems

live

<Accordion>
  <AccordionItem
    headerContent={
      <Heading noMargin size="small">
        Simple item
      </Heading>
    }
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
  </AccordionItem>
  <AccordionItem
    headerContent={
      <Heading noMargin size="large">
        Custom item
      </Heading>
    }
    iconType="plus-minus"
  >
    <Box
      backgroundColor="neutral.100"
      borderRadius="200"
      mt="400"
      padding="200"
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </Box>
  </AccordionItem>
</Accordion>

Blueprint

Settings

Accordion

AccordionItem

Accordion