List

A list component embeds a formatted list—bulleted or numbered—into page content.

Examples

Unordered

In fermentum leo eu lectus mollis, quis dictum mi aliquet.
Morbi eu nulla lobortis, lobortis est in, fringilla felis.
Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
- In fermentum leo eu lectus mollis, quis dictum mi aliquet.
- Morbi eu nulla lobortis, lobortis est in, fringilla felis.
- Ut venenatis, nisl scelerisque.
  1. Donec blandit a lorem id convallis.
  2. Cras gravida arcu at diam gravida gravida.
  3. Integer in volutpat libero.
Ut non enim metus.

Ordered

Donec blandit a lorem id convallis.
Cras gravida arcu at diam gravida gravida.
Integer in volutpat libero.
Donec a diam tellus.
Etiam auctor nisl et.
- Donec blandit a lorem id convallis.
- Cras gravida arcu at diam gravida gravida.
- Integer in volutpat libero.
  1. Donec blandit a lorem id convallis.
  2. Cras gravida arcu at diam gravida gravida.
Aenean nec tortor orci.
Quisque aliquam cursus urna, non bibendum massa viverra eget.
Vivamus maximus ultricies pulvinar.

Inline

Inline list item 1
Inline list item 2
Inline list item 3

Plain

Donec blandit a lorem id convallis.
Integer in volutpat libero.
Donec a diam tellus.
- Donec blandit a lorem id convallis.
- Cras gravida arcu at diam gravida gravida.
- Integer in volutpat libero.
Aenean nec tortor orci.
Vivamus maximus ultricies pulvinar.

With horizontal rules

Donec blandit a lorem id convallis.
Integer in volutpat libero.
Donec a diam tellus.
Aenean nec tortor orci.
Vivamus maximus ultricies pulvinar.

With small icons

List item one
List item two
List item three

With large icons

List item one
List item two
List item three

Documentation

Overview

Non-inline lists can be nested up to any level.

Usage

Class	Applied to	Outcome
`.pf-v6-c-list`	`<ul>, <ol>`	Initiates a list. Required
`.pf-m-inline`	`.pf-v6-c-list`	Displays list items inline.
`.pf-m-plain`	`.pf-v6-c-list`	Removes the list marker and base indentation.
`.pf-m-bordered`	`.pf-v6-c-list`	Add horizontal divider between items in a list.
`.pf-m-icon-lg`	`.pf-v6-c-list`	Show all the icons or logos in the list large.

CSS variables

Expand or collapse column	Selector	Variable	Value
	:where(:root, .pf-v6-c-list)	--pf-v6-c-list--PaddingInlineStart	1.5rem
--pf-v6-c-list--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	:where(:root, .pf-v6-c-list)	--pf-v6-c-list--ul--ListStyle	disc outside
--pf-v6-c-list--ul--ListStyle --pf-t--global--list-style disc outside
	:where(:root, .pf-v6-c-list)	--pf-v6-c-list--Gap	0.5rem
--pf-v6-c-list--Gap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-list)	--pf-v6-c-list--nested--PaddingBlockStart	0.5rem
--pf-v6-c-list--nested--PaddingBlockStart --pf-v6-c-list--Gap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-list)	--pf-v6-c-list--m-plain--PaddingInlineStart	0
	:where(:root, .pf-v6-c-list)	--pf-v6-c-list--m-inline--PaddingInlineStart	0
	:where(:root, .pf-v6-c-list)	--pf-v6-c-list--m-inline--ColumnGap	1.5rem
--pf-v6-c-list--m-inline--ColumnGap --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	:where(:root, .pf-v6-c-list)	--pf-v6-c-list--m-inline--RowGap	0.25rem
--pf-v6-c-list--m-inline--RowGap --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	:where(:root, .pf-v6-c-list)	--pf-v6-c-list--m-bordered--li--PaddingBlockStart	0.5rem
--pf-v6-c-list--m-bordered--li--PaddingBlockStart --pf-v6-c-list--Gap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-list)	--pf-v6-c-list--m-bordered--li--BorderBlockStartColor	(In light theme) #c7c7c7
--pf-v6-c-list--m-bordered--li--BorderBlockStartColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	:where(:root, .pf-v6-c-list)	--pf-v6-c-list--m-bordered--li--BorderBlockStartWidth	1px
--pf-v6-c-list--m-bordered--li--BorderBlockStartWidth --pf-t--global--border--width--divider--default --pf-t--global--border--width--100 1px
	:where(:root, .pf-v6-c-list)	--pf-v6-c-list__item-icon--MinWidth	0.75rem
--pf-v6-c-list__item-icon--MinWidth --pf-t--global--icon--size--sm --pf-t--global--icon--size--100 0.75rem
	:where(:root, .pf-v6-c-list)	--pf-v6-c-list__item-icon--MarginBlockStart	0.25rem
--pf-v6-c-list__item-icon--MarginBlockStart --pf-t--global--spacer--xs --pf-t--global--spacer--100 0.25rem
	:where(:root, .pf-v6-c-list)	--pf-v6-c-list__item-icon--MarginInlineEnd	0.5rem
--pf-v6-c-list__item-icon--MarginInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-list)	--pf-v6-c-list__item-icon--Color	(In light theme) #1f1f1f
--pf-v6-c-list__item-icon--Color --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	:where(:root, .pf-v6-c-list)	--pf-v6-c-list__item-icon--FontSize	0.75rem
--pf-v6-c-list__item-icon--FontSize --pf-t--global--icon--size--sm --pf-t--global--icon--size--100 0.75rem
	:where(:root, .pf-v6-c-list)	--pf-v6-c-list--m-icon-lg__item-icon--MinWidth	1rem
--pf-v6-c-list--m-icon-lg__item-icon--MinWidth --pf-t--global--icon--size--lg --pf-t--global--icon--size--250 1rem
	:where(:root, .pf-v6-c-list)	--pf-v6-c-list--m-icon-lg__item-icon--MarginInlineEnd	1rem
--pf-v6-c-list--m-icon-lg__item-icon--MarginInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-list)	--pf-v6-c-list--m-icon-lg__item-icon--FontSize	1rem
--pf-v6-c-list--m-icon-lg__item-icon--FontSize --pf-t--global--icon--size--lg --pf-t--global--icon--size--250 1rem
	.pf-v6-c-list.pf-m-icon-lg	--pf-v6-c-list__item-icon--MinWidth	1rem
--pf-v6-c-list__item-icon--MinWidth --pf-v6-c-list--m-icon-lg__item-icon--MinWidth --pf-t--global--icon--size--lg --pf-t--global--icon--size--250 1rem
	.pf-v6-c-list.pf-m-icon-lg	--pf-v6-c-list__item-icon--MarginBlockStart	0
	.pf-v6-c-list.pf-m-icon-lg	--pf-v6-c-list__item-icon--MarginInlineEnd	1rem
--pf-v6-c-list__item-icon--MarginInlineEnd --pf-v6-c-list--m-icon-lg__item-icon--MarginInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-list.pf-m-icon-lg	--pf-v6-c-list__item-icon--FontSize	1rem
--pf-v6-c-list__item-icon--FontSize --pf-v6-c-list--m-icon-lg__item-icon--FontSize --pf-t--global--icon--size--lg --pf-t--global--icon--size--250 1rem
	.pf-v6-c-list.pf-m-plain	--pf-v6-c-list--PaddingInlineStart	0
--pf-v6-c-list--PaddingInlineStart --pf-v6-c-list--m-plain--PaddingInlineStart 0
	.pf-v6-c-list.pf-m-inline	--pf-v6-c-list--PaddingInlineStart	0
--pf-v6-c-list--PaddingInlineStart --pf-v6-c-list--m-inline--PaddingInlineStart 0
	.pf-v6-c-list.pf-m-inline	--pf-v6-c-list--Gap	0.25rem 1.5rem
--pf-v6-c-list--Gap --pf-v6-c-list--m-inline--RowGap --pf-v6-c-list--m-inline--ColumnGap --pf-t--global--spacer--xs --pf-t--global--spacer--lg --pf-t--global--spacer--100 --pf-t--global--spacer--400 0.25rem 1.5rem

View source on GitHub