Skip to Content

Description list

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum
ExamplesResponsive column definitionsAuto-column-widthInline gridDocumentationCSS Variables

Examples

Default

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Default 2 col

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Default 3 col on lg

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Horizontal

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Horizontal 2 col

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Horizontal 3 col on lg

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Responsive column definitions

Default responsive columns

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Horizontal responsive columns

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Auto-column-width

Default auto columns width

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Horizontal auto column width

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Inline grid

Default inline grid

Name
example
Namespace
Labels
example
Pod selector
Annotation
2 Annotations

Documentation

Accessibility

AttributeApplied toOutcome
title.pf-c-description-listProvides an accessible title for the description list. Required

Usage

ClassApplied toOutcome
.pf-c-description-list<dl>Initiates the description list component. Required
.pf-c-description-list__group<div>Initiates a description list component group. Required
.pf-c-description-list__term<dt>Initiates a description list component term. Required
.pf-c-description-list__description<dd>Initiates a description list component description. Required
.pf-c-description-list__text<div>Initiates a description list component text element. Required
.pf-m-horizontal.pf-c-description-listModifies the description list component term and description pair to a horizontal layout.
.pf-m-auto-column-widths.pf-c-description-listModifies the description list to format automatically.
.pf-m-inline-grid.pf-c-description-listModifies the description list display to inline-grid.
.pf-m-{1,2,3}-col{-on-[md, lg, xl, 2xl]}.pf-c-description-listModifies the description list number of columns.

CSS Variables