import { Component } from '@angular/core';
import { WrDescriptionItem, WrDescriptions } from 'ngwr/descriptions';
@Component({ imports: [WrDescriptionItem, WrDescriptions] })
export class MyComponent {}Descriptions
A read-only list of labels and their values.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Default
Each label sits above its value with no rules, which suits a card that has its own frame.
<wr-descriptions title="Account">
<wr-description-item label="Name">Ada Lovelace</wr-description-item>
<wr-description-item label="Email">[email protected]</wr-description-item>
</wr-descriptions>Inline + bordered
inline puts each label beside its value and bordered draws rules; each also works alone.
<wr-descriptions title="Account" inline bordered>
<wr-description-item label="Name">Ada Lovelace</wr-description-item>
<wr-description-item label="Email">[email protected]</wr-description-item>
<wr-description-item label="Joined">2024-03-12</wr-description-item>
</wr-descriptions>Narrow container
With responsive, an inline list stacks when its own container is narrow.
<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 | The term shown beside the projected value — "Email", "Created". Keep it a noun: it is read as the name of the value, not as a sentence. | string | '' |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/descriptions's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-descriptions-border | var(--wr-border-base) | .wr-descriptions |
--wr-descriptions-font-family | var(--wr-font-family-base) | .wr-descriptions |
--wr-descriptions-label-font-size | var(--wr-text-xs) | .wr-descriptions +1 variant override |
--wr-descriptions-label-font-weight | var(--wr-font-weight-medium) | .wr-descriptions |
--wr-descriptions-label-letter-spacing | var(--wr-tracking-wide) | .wr-descriptions +1 variant override |
--wr-descriptions-list-column-gap | var(--wr-space-sm) | .wr-descriptions +1 variant override |
--wr-descriptions-list-row-gap | var(--wr-space-sm) | .wr-descriptions |
--wr-descriptions-radius | var(--wr-border-radius-base) | .wr-descriptions |
--wr-descriptions-row-gap | var(--wr-space-xs) | .wr-descriptions |
--wr-descriptions-row-padding-x | var(--wr-space-lg) | .wr-descriptions |
--wr-descriptions-row-padding-y | var(--wr-space-md) | .wr-descriptions |
--wr-descriptions-title-font-size | var(--wr-text-base) | .wr-descriptions |
--wr-descriptions-title-font-weight | var(--wr-font-weight-semibold) | .wr-descriptions |
--wr-descriptions-title-margin-bottom | var(--wr-space-md) | .wr-descriptions |
--wr-descriptions-value-font-size | var(--wr-text-sm) | .wr-descriptions |
--wr-descriptions-value-line-height | var(--wr-leading-normal) | .wr-descriptions |