<!-- source-hash: d0a2530b7492095645c20b724f126d0d -->
A client-side React card component that displays a brand association item with an icon, title, description, and an external link button.

## Key Components

### Interfaces

| Interface | Description |
|-----------|-------------|
| `BrandAssociationItem` | Data model for a single card — accepts a React component or element as icon, plus title, description, button text, and link URL |
| `BrandAssociationCardProps` | Props for the card component; wraps `BrandAssociationItem` with an optional `className` |

### `BrandAssociationCard`

The primary exported component. Renders a styled card with:

- **Icon** — handles both raw `React.ReactElement` and `React.ComponentType` via an internal `renderIcon()` helper
- **Title** — displayed as an `h3` with ODS primary text styling
- **Description** — secondary text using DM Sans font
- **CTA Button** — an outline `Button` with an `ExternalLink` icon that opens the provided `link` in a new tab

## Usage Example

```typescript
import { BrandAssociationCard } from './brand-association-card';
import { ShieldCheck } from 'lucide-react';

const item = {
  icon: ShieldCheck,
  title: 'Security Tools',
  description: 'Browse our curated list of security integrations.',
  buttonText: 'Integrations',
  link: 'https://flamingo.run/integrations',
};

export default function Page() {
  return <BrandAssociationCard item={item} className="rounded-xl" />;
}
```

> **Note:** The `icon` prop accepts either a component type (e.g., a Lucide icon) or a pre-rendered `React.ReactElement`. When passing a component, it is rendered at `120px` size with `w-20 h-20` Tailwind classes applied automatically.