# Descriptions

> Read-only labeled key/value list. `inline` for label-left / value-right, `bordered` for a card.

Source: https://ngwr.dev/reference/components/descriptions

## Installation

```angular-ts
import { WrDescriptions, WrDescriptionItem } from 'ngwr/descriptions';

@Component({ imports: [WrDescriptions, WrDescriptionItem] })
export class MyComponent {}
```

## Inline + bordered

```angular-html
<wr-descriptions title="Account" inline bordered>
  <wr-description-item label="Name">Ada Lovelace</wr-description-item>
  <wr-description-item label="Email">ada@example.com</wr-description-item>
  <wr-description-item label="Joined">2024-03-12</wr-description-item>
</wr-descriptions>
```

## Narrow container (container query)

With `responsive`, inline layouts query their own width, not the viewport — so the same `inline bordered` descriptions reflows to a stacked layout when placed in a narrow container, even on a wide page. The box below is fixed at 280px.

```html
<div style="width: 280px"><wr-descriptions responsive inline bordered>…</wr-descriptions></div>
```

## Descriptions API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `title` | Optional title shown above the list. | `string` | `''` |
| `inline` | Two-column rows (label left, value right) instead of stacked. | `boolean` | `false` |
| `bordered` | Add visible borders around each row. | `boolean` | `false` |
| `responsive` | Reflow `inline` rows back to a stacked layout when the box itself is narrow (a container query on its own width, not the viewport — so it adapts inside a narrow card or side panel). Makes the box fill its container's width. | `boolean` | `false` |

## Description item API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `label` | — | `string` | `''` |