Description list

Term/description pairs.

Full name: Sofia Carter
Email: [email protected]
Plan: Pro (annual)

import { BuiDescriptionList, BuiDescriptionItem } from 'ng-blatui';

<dl buiDescriptionList [bordered]="true">
  <bui-description-item term="Plan">Pro</bui-description-item>
  <bui-description-item term="Seats">5</bui-description-item>
</dl>

Bordered

Invoice: #INV-2048
Status: Paid
Amount: $1,200.00

<dl buiDescriptionList [bordered]="true">
  <bui-description-item term="Invoice">#INV-2048</bui-description-item>
</dl>

Vertical

Shipping address: 128 Maple Street, Brooklyn, NY 11201
Billing address: Same as shipping

<dl buiDescriptionList layout="vertical">
  <bui-description-item term="Shipping address">128 Maple Street…</bui-description-item>
</dl>

API reference

dl[buiDescriptionList]

Inputs

Prop	Type	Default	Description
`layout`	`"horizontal" \| "vertical"`	`'horizontal'`	Arrangement of each item's term and description, side by side or stacked.
`bordered`	`boolean`	`false`	Whether to render a bordered card with dividers between items.

bui-description-item

Inputs

Prop	Type	Default	Description
`term`	`string`	`''`	The term label shown in the row's `<dt>`.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.