A reusable React component that renders a labeled content block with a title and content element, supporting configurable typography, spacing, and semantic HTML elements. ## Key Components ### `TitleContentBlock` The main export — a client-side React component that pairs a title label with a primary content value. ### `TitleContentBlockProps` | Prop | Type | Default | Description | |------|------|---------|-------------| | `title` | `string` | — | Label/title text | | `content` | `React.ReactNode` | — | Primary content value | | `titleColor` | `string` | `text-ods-text-secondary` | Tailwind color class for title | | `titleClassName` | `string` | `text-h5 tracking-[-0.28px]` | Additional title styles | | `contentClassName` | `string` | `text-h2 tracking-[-0.64px] text-ods-text-primary` | Content element styles | | `containerClassName` | `string` | `''` | Wrapper `div` styles | | `titleAs` | `h1–h6 \| div` | `div` | Semantic element for the title | | `contentAs` | `h1–h6 \| p \| div` | `h4` | Semantic element for the content | | `spacing` | `sm \| md \| lg` | `md` | Vertical gap between title and content | ## Usage Example ```typescript // Basic usage — stat or metric display // Custom semantic elements and spacing 42} titleAs="h3" contentAs="p" spacing="lg" containerClassName="p-4 rounded-lg bg-ods-bg-surface" /> ```