Accordions can be used to hide additional information while displaying only the headings for each item.
import { Accordion, AccordionPanel } from "@ds-kit/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> <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>
children
object
array
bgHover
string
"grey.50"
header
string
object
headerHeight
string
"3.5rem"
open
bool
false
borderTop
string
"1px solid rgba(0,0,0,0.2)"
headerBg
string
children
object
array