Examples
Content as a wrapper
Wrap arbitrary HTML in a
<div class="pf-v6-c-content">. PF v6's CSS styles every descendant tag
(h1-h6, p, ul, ol, dl, blockquote, etc.) automatically — no per-element wrappers needed.
Mixed content wrapper
The wrapper styles every direct descendant — headings, paragraphs, lists, blockquotes — using PF v6 typography. Use this mode when you have a block of arbitrary HTML you want consistently styled (e.g. server-rendered article body, markdown output).
- Bullets get list styling
- Links get link styling
- No extra wrappers required
A blockquote inside the wrapper picks up the editorial border treatment.
Headings
Render any heading level via component="h1"..component="h6".
Each emits the matching tag with pf-v6-c-content--{component} as its class.
First level heading
Second level heading
Third level heading
Fourth level heading
Fifth level heading
Sixth level heading
Body
Body-level elements: p, small,
blockquote, pre. Pass each through with the appropriate
component param.
A standard paragraph rendered through the Content component. It uses PF v6's body font size, line height, and text color tokens.
Small text — typically used for captions, footnotes, or secondary metadata.A blockquote with PF v6's editorial border accent on the inline-start edge.
Preformatted text. It preserves whitespace and line breaks.
Unordered list
Set component="ul" and pass <li> children through the
content slot. The wrapper itself becomes the <ul>.
- First item
- Second item
- Third item
Ordered list
Same shape as the unordered list with component="ol" — emits a numbered list.
- First step
- Second step
- Third step
Plain list
Combine component="ul" (or ol) with
plainList=true to strip default bullet / numbering styling.
- Unstyled item one
- Unstyled item two
- Unstyled item three
Description list
Set component="dl" and pass alternating <dt> /
<dd> children. PF v6's CSS lays the pairs out in a responsive grid.
- Name
- Example application
- Version
- 1.0.0
- Description
- A sample definition list rendered through the Content component.
Link and visited link
Set component="a" with href to render a styled anchor. Add
visited=true for the visited-state styling.
Editorial content
In wrapper mode, editorial=true bumps body and small text up one size tier — better for
long-form prose where readability matters more than density.
Editorial heading
Editorial styling bumps the body and small text up one size tier. Use it for long-form prose where readability matters more than density — release notes, article bodies, in-app documentation.
Even small text is larger in editorial mode.
Documentation
Content props
Parameters accepted by
{#include components/data-display/content ... /}. Model mode: pass
contentModel=<Content> built in Java instead — the Java tab on each example shows
the builder.
| Name | Type | Default | Description |
|---|---|---|---|
component
|
"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "a" | "small" | "blockquote" | "pre" | "hr" | "ul" | "ol"
| "dl" | "li" | "dt" | "dd"
|
— |
When set, switches to element mode — the include renders the named tag with
pf-v6-c-content--{component} as its class instead of the wrapper div. Omit
to render the default <div class="pf-v6-c-content"> wrapper around the
slot content.
|
text
|
String | — | Convenience: simple text body for element mode. When set, fills the element with this string; when omitted, the content slot is used. Ignored in wrapper mode. |
href
|
String | — |
Link target when component="a". Ignored otherwise.
|
editorial
|
boolean |
false
|
Applies pf-m-editorial — bumps body and small text up one size tier. Most
useful in wrapper mode.
|
visited
|
boolean |
false
|
Applies pf-m-visited. In wrapper mode, applies to all descendant links; with
component="a", applies to the link itself.
|
plainList
|
boolean |
false
|
Applies pf-m-plain when component is
ul / ol / dl. Strips
default list styling.
|
id
|
String | — |
DOM id on the rendered element (either the wrapper div or the chosen
component tag).
|
content (slot)
|
Qute insert | — |
Children. In wrapper mode, raw HTML descendants get auto-styled. In element mode, used as the inner content
(e.g. <li> children of a
component="ul" include).
|
Divergence from PF React. We skip ouiaId /
ouiaSafe (PF testing tooling we don't use yet) and
className (React-specific). Param naming is shortened:
isEditorial → editorial,
isPlainList → plainList,
isVisitedLink → visited.
Usage
Wrapper vs. element mode. Wrapper mode is the right default when you have a block of HTML (article body, markdown output, server-rendered prose) and want PF typography applied to everything inside. Element mode is what you reach for when you need to style a single element (a one-off styled paragraph, a stand-alone heading, a styled link inside other non-Content markup).
Text vs. slot. For single-line element content (heading text, paragraph copy, link label), pass
text as a parameter. For richer inline structure (a paragraph with embedded links,
lists with mixed children), open the content slot.
Overlap with Title. Both components/data-display/title and
components/data-display/content with component="h1".."h6"
render styled headings. Title is the right pick for the page-title slot (independent
size modifier, anchor-friendly id
pattern). Use Content's element mode when the heading lives inside other Content-styled prose and you want the
typography to feel coherent with the surrounding body text.
Overlap with List. Both components/data-display/list and
components/data-display/content component="ul" render styled lists. List is
purpose-built (inline / bordered / icon-replacement modifiers); Content's list mode is the right pick when the list
is part of an article-style body where you want it visually consistent with surrounding paragraphs.