<!-- source-hash: 63aa69e366662eef49a80f4c013e6522 -->
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
<TitleContentBlock
  title="Total Devices"
  content="1,248"
/>

// Custom semantic elements and spacing
<TitleContentBlock
  title="Active Tickets"
  content={<span className="text-red-500">42</span>}
  titleAs="h3"
  contentAs="p"
  spacing="lg"
  containerClassName="p-4 rounded-lg bg-ods-surface"
/>
```