A bordered card component that stacks rows vertically, supporting full-width title rows, multi-column data rows, and arbitrary content rows with ODS-compliant styling. ## Key Components | Export | Type | Description | |--------|------|-------------| | `StackedRowsPanel` | Component | Root container; renders an optional uppercase title above a bordered, rounded card | | `PanelColumn` | Interface | Defines a single column cell with `value`, `label`, `icon`, `leadingIcon`, `href`, `width`, `align`, and `hideAt` | | `PanelRow` | Interface | Defines a row with either `columns` (1 = full-width, N = multi-column) or arbitrary `content` | | `StackedRowsPanelProps` | Interface | Props for `StackedRowsPanel`: `rows`, optional `title`, optional `className` | | `PanelColumnAlign` | Type | `"left" \| "center" \| "right"` | | `PanelHideAt` | Type | `"md" \| "lg" \| "xl"` — responsive column visibility breakpoints | | `CellValue` | Internal | Renders the `value` (h4) + `label` (h6) pair with optional inline icon and link | | `PanelCell` | Internal | Resolves layout variant: custom `content`, `leadingIcon` banner, or standard value/label stack | | `PanelRowView` | Internal | Switches between full-width, multi-column, and arbitrary-content row layouts | ## Usage Example ```typescript import { StackedRowsPanel } from "@/components/stacked-rows-panel" import { Tag } from "@/components/tag" // Multi-column detail card with an optional title Online, label: "Status" }, { key: "owner", value: "Jane Smith", label: "Assigned To", hideAt: "md" }, ], }, { id: "external", columns: [ { key: "docs", value: "View Docs", label: "External Link", href: "https://flamingo.run/docs", }, ], }, ]} /> ``` **Source:** [`stacked-rows-panel.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/stacked-rows-panel.tsx)