List

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-c-list`	`<ul>, <ol>`	Initiates a list. Required
`.pf-m-inline`	`.pf-c-list`	Displays list items inline.
`.pf-m-plain`	`.pf-c-list`	Removes the list marker and base indentation.
`.pf-m-bordered`	`.pf-c-list`	Add horizontal divider between items in a list.
`.pf-m-icon-lg`	`.pf-c-list`	Show all the icons or logos in the list large.

CSS variables


	.pf-c-list	--pf-c-list--PaddingLeft	1.5rem
--pf-c-list--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-list	--pf-c-list--nested--MarginTop	0.5rem
--pf-c-list--nested--MarginTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-list	--pf-c-list--nested--MarginLeft	0.5rem
--pf-c-list--nested--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-list	--pf-c-list--ul--ListStyle	disc outside
--pf-c-list--ul--ListStyle --pf-global--ListStyle $pf-global--ListStyle disc outside
	.pf-c-list	--pf-c-list--li--MarginTop	0.5rem
--pf-c-list--li--MarginTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-list	--pf-c-list--m-inline--li--MarginRight	1.5rem
--pf-c-list--m-inline--li--MarginRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-list	--pf-c-list--m-bordered--li--PaddingBottom	0.5rem
--pf-c-list--m-bordered--li--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-list	--pf-c-list--m-bordered--li--BorderBottomColor	#d2d2d2
--pf-c-list--m-bordered--li--BorderBottomColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-list	--pf-c-list--m-bordered--li--BorderBottomWidth	1px
--pf-c-list--m-bordered--li--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-list	--pf-c-list__item-icon--MinWidth	0.625rem
--pf-c-list__item-icon--MinWidth --pf-global--icon--FontSize--sm $pf-global--icon--FontSize--sm pf-font-prem(10px) 0.625rem
	.pf-c-list	--pf-c-list__item-icon--MarginTop	0.375rem
	.pf-c-list	--pf-c-list__item-icon--MarginRight	0.5rem
--pf-c-list__item-icon--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-list	--pf-c-list__item-icon--Color	#6a6e73
--pf-c-list__item-icon--Color --pf-global--icon--Color--light $pf-global--icon--Color--light $pf-color-black-600 #6a6e73
	.pf-c-list	--pf-c-list__item-icon--FontSize	0.625rem
--pf-c-list__item-icon--FontSize --pf-global--icon--FontSize--sm $pf-global--icon--FontSize--sm pf-font-prem(10px) 0.625rem
	.pf-c-list	--pf-c-list--m-icon-lg__item-icon--MinWidth	1.5rem
--pf-c-list--m-icon-lg__item-icon--MinWidth --pf-global--icon--FontSize--lg $pf-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem
	.pf-c-list	--pf-c-list--m-icon-lg__item-icon--MarginRight	1rem
--pf-c-list--m-icon-lg__item-icon--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-list	--pf-c-list--m-icon-lg__item-icon--FontSize	1.5rem
--pf-c-list--m-icon-lg__item-icon--FontSize --pf-global--icon--FontSize--lg $pf-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem
	.pf-c-list.pf-m-icon-lg	--pf-c-list__item-icon--MinWidth	1.5rem
--pf-c-list__item-icon--MinWidth --pf-c-list--m-icon-lg__item-icon--MinWidth --pf-global--icon--FontSize--lg $pf-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem
	.pf-c-list.pf-m-icon-lg	--pf-c-list__item-icon--MarginTop	0
	.pf-c-list.pf-m-icon-lg	--pf-c-list__item-icon--MarginRight	1rem
--pf-c-list__item-icon--MarginRight --pf-c-list--m-icon-lg__item-icon--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-list.pf-m-icon-lg	--pf-c-list__item-icon--FontSize	1.5rem
--pf-c-list__item-icon--FontSize --pf-c-list--m-icon-lg__item-icon--FontSize --pf-global--icon--FontSize--lg $pf-global--icon--FontSize--lg pf-font-prem(24px) 1.5rem
	.pf-c-list.pf-m-plain	--pf-c-list--PaddingLeft	0
	.pf-c-list.pf-m-inline	--pf-c-list--PaddingLeft	0
	.pf-c-list.pf-m-inline li	--pf-c-list--li--MarginTop	0
	.pf-c-list.pf-m-bordered > :last-child	--pf-c-list--m-bordered--li--PaddingBottom	0
	.pf-c-list.pf-m-bordered > :last-child	--pf-c-list--m-bordered--li--BorderBottomWidth	0

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines