Live demo — this example is server-driven; run the showcase locally for the interactive version.

Description list

Term + description pairs rendered semantically as a <dl> with PF v6 styling. Use for record details — entity properties displayed read-only.

Examples

Basic

Plain term + description groups inside a semantic <dl>.

Name: Jane Doe
Email: jane@example.com
Role: Senior engineer

Term help text

Terms styled as help triggers (pf-m-help-text); the first opens a popover, mirroring PF’s DescriptionListTermHelpTextButton.

Name Additional name info: the resource's unique display name.: Example
Namespace Additional info about namespace: mary-test
Labels Additional info about labels: example
Pod selector Additional info about pod selector
Annotation Additional info about annotation: 2 Annotations

Default 2 col

pf-m-2-col — two columns of groups.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Default 3 col on lg

pf-m-3-col-on-lg — three columns from the lg breakpoint.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Horizontal

pf-m-horizontal — terms and descriptions side by side.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Horizontal using custom term width modifier

Responsive --pf-v6-c-description-list--m-horizontal__term--width custom properties size the term column.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Horizontal 2 col

Horizontal layout in two columns.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Horizontal 3 col on lg

Horizontal layout, three columns from lg.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Compact

pf-m-compact — reduced row gap.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Compact horizontal

Compact + horizontal combined.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Fluid horizontal

pf-m-fluid — the horizontal term column sizes to content instead of a fixed width.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Column fill

pf-m-fill-columns — groups fill columns top-to-bottom before wrapping.

Status: Active
Created: 2026-05-20

Large display size

pf-m-display-lg — larger term/description type.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Default responsive columns

pf-m-2-col-on-lg pf-m-3-col-on-xl — column count steps up with the viewport.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Horizontal responsive columns

Horizontal layout with responsive column counts.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Responsive horizontal, vertical group layout

Orientation flips per breakpoint — pf-m-vertical-on-md pf-m-horizontal-on-lg pf-m-vertical-on-xl pf-m-horizontal-on-2xl.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Default auto column width

pf-m-auto-column-widths — columns size to their content.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Horizontal auto column width

Auto column widths combined with the horizontal layout.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Default inline grid

pf-m-inline-grid — the list renders as an inline-grid.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Description list with card

Each group is wrapped in a pf-v6-c-card instead of a plain group div.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Large display size and card

Card groups + pf-m-display-lg.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Display size with card, three column on large breakpoint

Card groups, large display size, three columns on lg.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Display size with card, horizontal, modified term width

Card groups, horizontal layout, and a 10ch term width via --pf-v6-c-description-list__term--width.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Auto-fit basic

pf-m-auto-fit — grid auto-fits as many columns as fit.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Auto-fit, min width modified grid template columns

Auto-fit with --pf-v6-c-description-list--GridTemplateColumns--min: 200px.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Auto-fit, min width modified, responsive grid template columns

Auto-fit min widths set per breakpoint (md/lg/xl/2xl).

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Icons on terms

Each term carries a __term-icon before its text.

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

Display 2xl

The largest display styling (pf-m-display-2xl).

Name: Example
Namespace: mary-test
Labels: example
Pod selector
Annotation: 2 Annotations

In drawer

A two-column column-fill description list inside a drawer panel beside a card gallery.

Card-1

Card-2

Card-3

Card-4

Card-5

Card-6

test

Name: test
Namespace: mary-test
Labels: app=test
Pod selector: Node selector is not available at this time
Tolerations: No tolerations
Annotations: No annotations
Status: Active
Created at:: 3 minutes ago
Pod selector
Session affinity: None

Documentation

Description list props

Parameters accepted by {#include components/data-display/description-list ... /}. Model mode: pass list=<DescriptionList> built in Java instead — the Java tab on each example shows the builder. The DescriptionList model generates the inner structure (groups + terms + descriptions); in param mode it is hand-rendered using PF subclasses.

* required
Name	Type	Description
* `id`	String	DOM id on the <dl>.
`fillColumns`	boolean	Adds `pf-m-fill-columns` — terms and descriptions sit in equal-width columns.
slot `content`	Qute block	One or more `.pf-v6-c-description-list__group` blocks containing <dt> / <dd>.

Usage

Read-only data. Description list is for displaying record details. For editable fields use a Form.

Vs. Data list. Description list shows the properties of one item. Data list shows multiple items as rows.

Edit description-list.html on GitHub