Accordion

Accordions can be used to hide additional information while displaying only the headings for each item.

import { Accordion, AccordionPanel } from "@ds-kit/accordion"

Basic Accordion

<Accordion>
  <AccordionPanel header="Panel 1">
    <P>
      Datastory.org is a new platform for data storytelling. We make the world’s
      most important information available for free through beautiful apps and
      stories.
    </P>
  </AccordionPanel>
  <AccordionPanel header="Panel 2">
    <P>
      Datastory.org is a new platform for data storytelling. We make the world’s
      most important information available for free through beautiful apps and
      stories.
    </P>
  </AccordionPanel>
  <AccordionPanel header="Panel 3">
    <P>
      Datastory.org is a new platform for data storytelling. We make the world’s
      most important information available for free through beautiful apps and
      stories.
    </P>
  </AccordionPanel>
  <AccordionPanel header="Panel 4">
    <P>
      Datastory.org is a new platform for data storytelling. We make the world’s
      most important information available for free through beautiful apps and
      stories.
    </P>
  </AccordionPanel>
</Accordion>

Accordion with custom Header component

<Accordion>
  <AccordionPanel header={<Heading size="xs">Panel 1</Heading>}>
    <Div mt="1rem" mb="2rem" ml="1rem">
      <P>
        Datastory.org is a new platform for data storytelling. We make the
        world’s most important information available for free through beautiful
        apps and stories.
      </P>
    </Div>
  </AccordionPanel>
  <AccordionPanel header={<Heading size="xs">Panel 2</Heading>}>
    <Div mt="1rem" mb="2rem" ml="1rem">
      <P>
        Datastory.org is a new platform for data storytelling. We make the
        world’s most important information available for free through beautiful
        apps and stories.
      </P>
    </Div>
  </AccordionPanel>
  <AccordionPanel header={<Heading size="xs">Panel 3</Heading>}>
    <Div mt="1rem" mb="2rem" ml="1rem">
      <P>
        Datastory.org is a new platform for data storytelling. We make the
        world’s most important information available for free through beautiful
        apps and stories.
      </P>
    </Div>
  </AccordionPanel>
  <AccordionPanel header={<Heading size="xs">Panel 4</Heading>}>
    <Div mt="1rem" mb="2rem" ml="1rem">
      <P>
        Datastory.org is a new platform for data storytelling. We make the
        world’s most important information available for free through beautiful
        apps and stories.
      </P>
    </Div>
  </AccordionPanel>
</Accordion>

Accordion props

Name
Type
Default
children
objectarray

AccordionPanel props

Name
Type
Default
bgHover
string
"grey.50"
header
stringobject
headerHeight
string
"3.5rem"
open
bool
false
borderTop
string
"1px solid rgba(0,0,0,0.2)"
headerBg
string
children
objectarray