Renders a styled card with a colored highlight behind a category label, and a grid layout component for displaying multiple highlight cards with responsive borders. ## Key Components | Export | Type | Description | |---|---|---| | `HighlightCardItem` | Interface | Data shape for a single card: `category`, `categoryColor`, `highlightBg`, `description` | | `HighlightCardProps` | Interface | Props for `HighlightCard`: `item` + optional `className` | | `HighlightCard` | Component | Single card with a color-highlighted category label and description text | | `HighlightCardGridProps` | Interface | Props for `HighlightCardGrid`: `items`, `columns` (2 or 3), `className`, `cardClassName` | | `HighlightCardGrid` | Component | Responsive grid of `HighlightCard` components with automatic border management | ## Usage Example ```typescript import { HighlightCardGrid, HighlightCardItem } from './highlight-card'; const items: HighlightCardItem[] = [ { category: 'Network', categoryColor: '#3B82F6', highlightBg: '#DBEAFE', description: 'infrastructure is monitored 24/7', }, { category: 'Security', categoryColor: '#EF4444', highlightBg: '#FEE2E2', description: 'posture is always up to date', }, ]; // 2-column grid (default) // 3-column grid with custom wrapper styles // Single card ``` ## Notes - Category highlight width is calculated dynamically from `category.length` (`×12px` mobile, `×14px` desktop). - `HighlightCardGrid` handles responsive border placement automatically — right borders appear only on desktop, bottom borders are suppressed on the last item/row per breakpoint. - Styling relies on Tailwind CSS with custom design tokens (`ods-bg`, `ods-text-primary`, `ods-border`, etc.) from the OpenFrame Design System.