DescriptionList

Terms and their details.

JavaScript off: what the HTML and CSS do on their own.

Terms and their details, such as an order's fields: a <dl>, each pair wrapped in a <div>. Horizontal puts each term beside its detail from 640px up (the term column fits the longest term), stacking them on phones; Vertical puts the term above, optionally in Columns. No script.

Usage

razor

<DescriptionList Divided>
    <DescriptionItem Term="Status"><Badge Status="Status.Success" Dot>Paid</Badge></DescriptionItem>
    <DescriptionItem Term="Customer">Grace Hopper</DescriptionItem>
</DescriptionList>

Terms beside details

Use Divided for lines between items; terms sit beside their details from 640px up and above them on phones.

Preview Code

Preview

Invoice INV-1042

Status: Paid
Customer: Grace Hopper
Email: grace@example.com
Amount: $1,280.00
Billing address: 1 Navy Yard, Arlington, VA 22202

Code

Divided.razor

<Card Title="Invoice INV-1042" Grow MaxWidth="36.Rem">
    <DescriptionList Divided>
        <DescriptionItem Term="Status"><Badge Status="Status.Success" Dot>Paid</Badge></DescriptionItem>
        <DescriptionItem Term="Customer">Grace Hopper</DescriptionItem>
        <DescriptionItem Term="Email">grace@example.com</DescriptionItem>
        <DescriptionItem Term="Amount">$1,280.00</DescriptionItem>
        <DescriptionItem Term="Billing address">1 Navy Yard, Arlington, VA 22202</DescriptionItem>
    </DescriptionList>
</Card>

Vertical, in columns

Use Orientation.Vertical to put each term above its detail, and Columns to flow the items into columns.

Preview Code

Preview

Plan: Pro, yearly
Seats: 12 of 20
Renews: March 3, 2027
Region: US East
Created: Oct 12, 2026
Owner: Ada Lovelace

Code

Columns.razor

<DescriptionList Orientation="Orientation.Vertical" Columns="3" Grow>
    <DescriptionItem Term="Plan">Pro, yearly</DescriptionItem>
    <DescriptionItem Term="Seats">12 of 20</DescriptionItem>
    <DescriptionItem Term="Renews">March 3, 2027</DescriptionItem>
    <DescriptionItem Term="Region">US East</DescriptionItem>
    <DescriptionItem Term="Created">Oct 12, 2026</DescriptionItem>
    <DescriptionItem Term="Owner">Ada Lovelace</DescriptionItem>
</DescriptionList>

Parts

Written inside DescriptionList. The API page lists their parameters.

DescriptionItem: one term and its detail in a DescriptionList: <div><dt/><dd/></div>.

Mode support

What works in each mode, DescriptionList
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

It renders a native dl; each DescriptionItem is a dt and a dd in a div, which HTML allows, so the term and its detail stay paired.
Orientation and Columns change only the layout: the reading order is always term, then detail, item by item.
TermContent goes inside the dt, so keep it to text and inline content: a heading isn't allowed there.

Parameters

DescriptionList parameters
Prop	Type	Default
`ChildContent`The DescriptionItems.	`RenderFragment?`
`Orientation`Orientation.Horizontal (the default) puts each term beside its detail on screens 640px and wider; Orientation.Vertical puts the term above.	`Orientation`	`Orientation.Horizontal`
`Divided`Lines between the items.	`bool`	`false`
`Columns`For a vertical list, how many columns the items flow into on screens 640px and wider (1 to 4; defaults to 1).	`int`	`1`
`Size`Text size and spacing.	`ControlSize`	`ControlSize.Md`

Plus 25 surface props, 16 item props and 4 common props.

Full API