Collapsible card

CollapsibleCard combines Accordion's expand/collapse behavior with Card's container styling. Use for FAQs and proposal sections that benefit from both individual emphasis and progressive disclosure.

For tight FAQ lists where individual cards would be visual overhead, use Accordion directly. For non-collapsible card content, use Card.

Use it for

• Long-form proposal sections (Section 01 / Section 02 / Section 03)
• FAQ entries that need standalone visual weight
• Settings groups inside dashboards
• Stacked content blocks where each is meaningful enough to be its own surface

Import

import { CollapsibleCard } from '@brikdesigns/bds';

Variants

Default — uncontrolled

Click the header to toggle. Internal state.

<CollapsibleCard
  sectionLabel="Section 01"
  title="Overview and Goals"
>
  <p>Content goes here…</p>
</CollapsibleCard>

Initially open

<CollapsibleCard title="Settings" defaultOpen>
  <p>Settings content…</p>
</CollapsibleCard>

Controlled

When you need parent control over expansion (e.g. accordion-style "only one open" coordination across multiple cards).

import { useState } from 'react';

const [open, setOpen] = useState(false);

<CollapsibleCard
  title="Pricing"
  isOpen={open}
  onOpenChange={setOpen}
>
  <p>Pricing details…</p>
</CollapsibleCard>

Without section label

sectionLabel is optional. Drop it for FAQ-style cards where numbered sections aren't meaningful.

<CollapsibleCard title="Do you offer discounts for nonprofits?">
  <p>Yes — 20% off all annual plans for verified 501(c)(3) organizations.</p>
</CollapsibleCard>

Header actions

headerActions accepts ReactNode rendered next to the toggle — useful for per-card edit / share / dismiss buttons.

<CollapsibleCard
  title="Project brief"
  headerActions={<IconButton icon={<EditIcon />} label="Edit brief" />}
>
  <p>...</p>
</CollapsibleCard>

When not to use

• Don't use CollapsibleCard when content shouldn't be hidden. If users need to see the content to make a decision, render it directly in a Card without the collapse.
• Don't use CollapsibleCard for navigation. It's content disclosure, not navigation. Use TabBar / SidebarNavigation for navigation.

Accessibility

• The header is a real <button> with aria-expanded reflecting open/closed state.
• The content panel uses role="region" linked via aria-labelledby to the header.
• Keyboard Enter / Space toggles. Focus stays on the header after toggling.

API

Plus standard <div> HTML attributes.

Related

• Accordion — for tight FAQ stacks
• Card — non-collapsible card sibling
• CardList — wrapper for stacking multiple CollapsibleCards
• Storybook playground