Skip to main content
⌘K
Last modified: 24/Jun/2024

Card Accordion

The Card.Accordion is a simple UI wrapper around containers. This component is based on the Card.Frame but it has an interactive collapse feature built into it.

#Usage

import { Card } from '@kinsta/stratus'

const myComponent = () => (
  <Card header="Empire Strikes Back">
    <Card.Accordion defaultKeys={[1]}>
      <Card.Accordion.Item position={1} header="Boba Fett">
        Luke, when gone am I, the last of the Jedi will you be. Luke, the Force
        runs strong in your family. Pass on what you have learned, Luke. There
        is...another...Sky...Sky...walker.
      </Card.Accordion.Item>
      <Card.Accordion.Item position={2} header="Cad Bane">
        The Emperor has been expecting you. I know, father. So, you have
        accepted the truth. I've accepted the truth that you were once Anakin
        Skywalker, my father. That name no longer has any meaning for me.
      </Card.Accordion.Item>
    </Card.Accordion>
  </Card>
)

#Props

The Card components interface extends the HTMLElement interface. So you can use any props which documented there. Also, you can utilize all the React Synthetic events (on*), and props related to styling (className, style).

#defaultKeys
Required
number[]
Items expanded on load. The position prop needs to be set in the Accordion.Item as well.
#isLoading
boolean
If true, all items' content within the accordion will show as loading
false
#onActiveStateChange
(key: number) => void
The callback that runs when the active accordion item is changing

#Types

  • AccordionProps: props of the Accordion component processed by stratus

Read more about types here

#See also