# DisclosureCard

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

## When to use
- A linked card that previews a destination — eyebrow tag, headline, supporting text, and an arrow indicator.
- Marketing/discovery surfaces driving users into deeper content (product detail, feature page, article).

## When NOT to use
- For a list of disclosure cards — use `DisclosureCardSecondary` (which takes a `cards` array).
- For a non-link card that holds form controls or media — use a `Tile`, `BillCard`, or build a custom card.
- For an expand-in-place toggle — use `Accordion` / `AccordionButton`.

## Variants & decision tree
- **`variant="primary"`** (default): the larger, hero-style card. Use as the lead card in a section.
- **`variant="secondary"`**: a denser card layout intended for use inside a list (typically rendered by `DisclosureCardSecondary`).

`headlineType` (`'h1'`–`'h6'`) sets the heading element so the page outline stays correct. `tag`, `headline`, `supportingText`, and `href` are all required — the Lit source returns nothing if any are missing.

## States
- Hover, Pressed, Focused — handled by Arrow CSS; force-state props exist for visual testing only.
- `inverse` swaps to dark-background styling for cards on dark sections.

## Props
| Prop | Type | Default | Description |
|---|---|---|---|
| `tag` | `string` | — | Required eyebrow text above the headline. |
| `headline` | `ReactNode` | — | Required headline content. |
| `supportingText` | `ReactNode` | — | Required body text. |
| `href` | `string` | — | Required link destination. |
| `variant` | `'primary' \| 'secondary'` | `'primary'` | Visual size/weight. |
| `headlineType` | `'h1' \| … \| 'h6'` | — | Heading element for the headline. |
| `inverse` | `boolean` | inherited | Dark-background styling. |
| `className` | `string` | — | Extra class on the root anchor. |

## Usage examples
```tsx
<DisclosureCard
  tag="New"
  headline="WiFi 6 Gateway"
  headlineType="h3"
  supportingText="Experience faster speeds with our latest router."
  href="/products/wifi6"
  variant="primary"
/>
```

## Composition
Often grouped with siblings via `tdds:row` / `tdds:col-*` for grid layouts. For a homogenous list, use `DisclosureCardSecondary` and pass the `cards` array. Pair with a `SectionHeader` above for context.

## Accessibility
- The whole card is one `<a>` — the entire surface is clickable and focusable once.
- The arrow icon is decorative; the headline provides the link's accessible name.
- Pick `headlineType` so the heading order on the page is correct (e.g. `h3` within an `h2` section).

## Do / Don't
- Do keep `tag` short (1–2 words) and `supportingText` to a sentence.
- Do use `inverse` on dark sections instead of custom CSS.
- Don't put interactive controls (buttons, inputs) inside a `DisclosureCard` — anchors can't legally nest interactive descendants.
- Don't omit `href` — the component renders nothing without it.
