<!-- source-hash: 5f25c6a1147c0ccc8f2e18178114f0c9 -->
A composable card component for displaying structured key-value metadata, optional progress bars, and a footer section — used for surfacing device, asset, or service detail summaries in the OpenFrame UI.

## Key Components

| Export | Type | Description |
|---|---|---|
| `InfoCard` | Component | Root card with header, items, progress, and footer |
| `InfoCardData` | Interface | Data shape for the full card |
| `InfoCardFooterData` | Interface | Footer section with icon, text, logo, and link |
| `InfoCardValueRow` | Internal Component | Single label–value row with optional copy-to-clipboard |
| `InfoCardFooter` | Internal Component | Sticky footer with divider, icon, logo, and external link |

**Sub-features:**
- `copyable` items show a `Copy01Icon` that toggles to `CheckIcon` on success via `useCopyToClipboard`
- `value` accepts `string | string[]` — arrays render as stacked rows sharing the same label
- `progress` delegates to `ProgressBar` with warning/critical thresholds and inverted mode
- Footer `link` auto-strips the protocol for display if no custom label is provided

## Usage Example

```typescript
import { InfoCard } from '@openframe/ui'

<InfoCard
  data={{
    title: 'workstation-42',
    subtitle: 'macOS Sonoma 14.5',
    items: [
      { label: 'IP', value: '192.168.1.10', copyable: true },
      { label: 'Tags', value: ['managed', 'prod'] },
    ],
    progress: {
      value: 78,
      warningThreshold: 70,
      criticalThreshold: 90,
    },
    footer: {
      text: 'CrowdStrike Falcon',
      link: { href: 'https://falcon.crowdstrike.com' },
    },
  }}
/>
```

## Source

[`info-card.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/info-card.tsx)