DealCard
Markdown for agentsDeal opportunity card with sector, status, metrics, NDA/CIM badges and access actions.
npx @slipstream-ui/cli@latest add deal-cardDeal grid
Transportation
AvailableMulti-regional fleet services platform
South Atlantic
Recurring maintenance and compliance services across a multi-state fleet.
- Revenue
- $20.4M
- EBITDA
- $4.2M
- Margin
- 21%
NDA availableCIM available
Technology
Under NDAHospitality procurement platform
South Atlantic
- Revenue
- $14.4M
- EBITDA
- $6.8M
- Margin
- 47%
NDA available
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | required | Deal headline. |
| sector | string | required | Sector or industry label. |
| location | string | — | Region or location. |
| description | string | — | Optional short summary. |
| metrics | DealMetric[] | required | Three headline metrics. |
| status | 'available' | 'under-nda' | 'closed' | 'draft' | 'available' | Availability state. |
| ndaAvailable | boolean | — | Show the NDA badge. |
| cimAvailable | boolean | — | Show the CIM badge. |
| href | string | — | Optional deal detail link. |
| linkComponent | React.ElementType | — | Custom link element for routers. |
| saved | boolean | false | Save toggle state. |
| onSave | () => void | — | Save toggle handler. |
| saveLabel | string | 'Save' | Save button label. |
| onRequestAccess | () => void | — | Request access handler. |
| requestLabel | string | 'Request access' | Request access label. |
Accessibility
- NDA and CIM access are text badges, never color or icons alone.
- Request access and Save are real buttons; Save exposes aria-pressed.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.