Examples
Basic
A standard unordered list rendered as <ul> with default bullets and indent.
- First item
- Second item
- Third item
Inline
Set inline=true for pf-m-inline — items flow horizontally on
one row (wrapping as needed).
- Home
- Products
- Pricing
- About
- Contact
Ordered
Set component="ol" to render an <ol>. Pair with
type (1 | A |
a | I | i) for non-numeric
numbering.
Default numeric (type "1")
- First step
- Second step
- Third step
Uppercase letters (type("A"))
- First step
- Second step
- Third step
Lowercase roman (type("i"))
- First step
- Second step
- Third step
Plain
Set plain=true for pf-m-plain — bullets removed, no
inline-start padding. Useful when the items themselves provide their own visual cues.
- No bullets here
- Just plain text
- Clean and simple
With horizontal rules
Combine bordered=true with plain=true to render dividing
lines between items. PF v6 calls this the 'with horizontal rules' variant.
- Bordered row one
- Bordered row two
- Bordered row three
- Bordered row four
With icons
Render an icon in place of the bullet by wrapping each
<li>'s leading element in
<span class="pf-v6-c-list__item-icon">. Use the
icons:svg() namespace for the SVG content. Plain mode is required so the default bullet
isn't doubled.
- Step one complete
- Step two complete
- Step three in progress
- Step four needs attention
With large icons
Add iconLg=true on top of the icon pattern to size icons at PF v6's
icon-size--lg token. Best for media-style rows with title + supporting copy.
Documentation
List props
Parameters accepted by
{#include components/data-display/list ... /}. Model mode: pass
itemList=<ItemList> built in Java instead — the Java tab on each example shows
the builder. List items go in the content slot.
| Name | Type | Default | Description |
|---|---|---|---|
id
|
String | — | DOM id on the list element. |
component
|
"ul" | "ol"
|
"ul"
|
Wrapping element. "ol" renders an ordered list. Matches PF React's
component prop name.
|
type
|
"1" | "A" | "a" | "I" | "i"
|
"1" (HTML default)
|
Numbering style for ordered lists. Passes through to the HTML type attr on
<ol>. Ignored when component is not
"ol".
|
inline
|
boolean |
false
|
Applies pf-m-inline — items flow horizontally, wrapping as needed.
|
plain
|
boolean |
false
|
Applies pf-m-plain — removes bullets and inline-start padding. Required when
using __item-icon spans inside items, and when combining with
bordered.
|
bordered
|
boolean |
false
|
Applies pf-m-bordered — horizontal rule between adjacent items. (PF docs call
this 'With horizontal rules'.)
|
iconLg
|
boolean |
false
|
Applies pf-m-icon-lg — switches
__item-icon glyphs to PF v6's large icon size token. Equivalent to PF React's
iconSize="large".
|
ariaLabel
|
String | — |
Sets aria-label on the list element. Use when the list's purpose isn't clear
from surrounding context.
|
content (slot)
|
Qute insert | — |
One or more <li> children. For icon rows, prepend
<span class="pf-v6-c-list__item-icon">{icons:svg('...').raw}</span>
inside the item.
|
Divergence from PF React. PF exposes className,
ref, and a typed iconSize enum. We model
iconSize as the boolean iconLg (only the large variant
exists in CSS); className / ref
are React-specific.
Usage
Compose items inside the slot. The container is just chrome — list items live inside
{#content}...{/content}. That's deliberate so consumers can mix plain text, links,
icons, and arbitrary markup without the runtime template needing to know about every shape.
Icons replace bullets. The PF v6 markup expects each <li> to
contain a leading <span class="pf-v6-c-list__item-icon"> followed by the row's
content. The container needs plain=true in this mode so the default bullet doesn't
double up. Use iconLg=true when the row is media-style (icon + title + supporting
copy).
Ordered with custom numbering. Pass type for non-numeric ordered lists
— alphabetic (A/a) or roman (I/i). PF v6's CSS doesn't style the numbering itself; the html
type attribute drives it.
When to reach for something else. For richer per-item structure (checkboxes, actions, badges), use
simple-list or
data-list
— they ship richer slot conventions and selection semantics.