A composable warning card component that renders a highlighted alert banner header followed by optional body content, built for the OpenFrame Design System (ODS).
## Key Components
### `WarningBlock`
The primary export — a card-style container with two regions:
- **Banner** — styled with ODS warning colors (`bg-ods-warning-secondary`, `text-ods-warning`), displays an optional icon and a title
- **Body** — renders `children` below the banner; fully composable (text, `PathsDisplay` lists, command rows, etc.)
### `WarningBlockProps`
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `React.ReactNode` | — | Content rendered inside the warning banner header |
| `icon` | `React.ReactNode` | `` | Icon shown at banner start; pass `null` to hide |
| `children` | `React.ReactNode` | — | Body content below the banner |
| `className` | `string` | — | Extra classes for the outer card container |
## Usage Example
```typescript
import { WarningBlock } from './warning-block'
import { PathsDisplay } from './paths-display'
// Basic usage
Ensure all paths are set correctly before continuing.
// With custom icon and composed body
}
className="my-4"
>
Run the setup command to register this device.
// Without icon
Migrate to the v2 API before the next release cycle.
```
## Notes
- Spacing follows the ODS scale: card padding `16px` / gap `12px`, banner padding `12px` / gap `16px`
- `title` uses `text-h3` — responsive (`14px` mobile, `18px` from `md` up), bold by token default
- Client component (`'use client'`) — safe for interactive React trees