# DisclosureCardSecondary

> Slug: `disclosure-card-secondary` · Category: Disclosure

## When to use
- Rendering a list of related disclosure cards — feature grids, related-articles rails, "Explore more" sections.
- When you need the secondary (denser) `DisclosureCard` variant rendered consistently in a list.

## When NOT to use
- For a single hero card — use `DisclosureCard` directly with `variant="primary"`.
- For a heterogeneous list with mixed item types — use `Lists` (which supports nav/link/toggle/plain item types).
- For non-link cards with interactive controls — build a custom card layout.

## Variants & decision tree
- **Single component, single variant**: each item in the `cards` array is rendered as a `DisclosureCard` with `variant="secondary"`.
- Decide between `DisclosureCardSecondary` and rendering `DisclosureCard` items manually:
  - List of similar destinations → `DisclosureCardSecondary` (pass `cards`).
  - Mix of secondary + primary cards → render `DisclosureCard` instances yourself with grid utilities.

## States
Each card supports the same hover/pressed/focused/inverse treatment as `DisclosureCard`. The wrapper itself is purely structural (a list container).

## Props
| Prop | Type | Default | Description |
|---|---|---|---|
| `cards` | `DisclosureCardProps[]` | — | Required; each item passes through to `DisclosureCard`. |
| `inverse` | `boolean` | inherited | Dark-background styling applied to all cards. |
| `className` | `string` | — | Extra class on the list container. |

Each `cards[]` entry uses the same shape as `DisclosureCardProps`: `{ tag, headline, supportingText, href, headlineType?, variant?, inverse? }`.

## Usage examples
```tsx
<DisclosureCardSecondary
  cards={[
    {
      tag: 'Feature',
      headline: 'Mesh WiFi',
      supportingText: 'Whole-home coverage for every device.',
      href: '/features/mesh',
    },
    {
      tag: 'Feature',
      headline: 'Parental Controls',
      supportingText: 'Manage what kids can access online.',
      href: '/features/parental',
    },
  ]}
/>
```

## Composition
Place beneath a `SectionHeader` and within a section container (e.g. `tdds:container-md`). To mix primary + secondary cards, render `DisclosureCard` instances yourself.

## Accessibility
- Inherits accessibility from `DisclosureCard` — each card is a single focusable anchor.
- `headlineType` should match the page outline; pass it per card via the `cards` array.
- Avoid putting active page links inside this list — there's no `aria-current` slot here.

## Do / Don't
- Do keep card content parallel in length and tone.
- Do reuse the same `headlineType` across all cards in a list.
- Don't put nested interactive elements inside any card.
- Don't import a non-existent `DisclosureCardSecondaryItem` — items are plain objects in the `cards` prop.
