Content

A content component contains a block of styled HTML content.

The <Content> component allows you to establish a block of HTML content and apply simple, built-in styling. <Content> can be used for any element supported by the component property (including h1 through h6, hr, p, a, small, blockquote, and pre).

You cannot nest other components within <Content>, and doing so can cause styling overrides or other conflicts. Instead, you can use the <Content> component's properties to achieve the same results.

For example, to create a level 1 heading, you should pass component="h1" to <Content>, instead of nesting a <Title> component within <Content>. Similarly, when you need to add a divider to a page, you should utilize the hr property of <Content> (which is styled as a divider), rather than using a separate <Divider> component.

Examples

HTML elements wrapped by <Content> are styled by the content component.

Content as a wrapper

Content with a component of type "p" still renders the same when wrapped with a Content.

If located within a wrapping Content, html elements are styled as well!

Headings

Hello World

Second level

Third level

Fourth level

Fifth level

Sixth level

Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub works as well!

Quisque ante lacus, malesuada ac auctor vitae, congue non ante . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.

Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.

Sometimes you need small text to display things like date created

Unordered list

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 non enim metus.

Ordered list

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

Plain list

Plain unordered list

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.
Ut non enim metus.

Plain ordered list

Donec blandit a lorem id convallis.
component=liCras gravida arcu at diam gravida gravida.
Integer in volutpat libero.
Aenean nec tortor orci.
Quisque aliquam cursus urna, non bibendum massa viverra eget.
Vivamus maximus ultricies pulvinar.

Description list

Web: The part of the Internet that contains websites and web pages
HTML: A markup language for creating web pages
CSS: A technology to make HTML look better

Link and visited link

Link example

Click to visit link

Link content example

content link 1

content link 2

content link 3

Props

Content

*required
Name	Type	Default	Description
children	React.ReactNode		Children rendered within the Content.
className	string	''	Additional classes added to the Content.
component	\| 'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6' \| 'p' \| 'a' \| 'small' \| 'blockquote' \| 'pre' \| 'hr' \| 'ul' \| 'ol' \| 'dl' \| 'li' \| 'dt' \| 'dd'		The content component. If none provided, it will be a 'div' and styling will be applied to all its child components.
isPlainList	boolean	false	Modifies the list (ul, ol and dl components) to have plain styling.
isVisitedLink	boolean	false	Flag to indicate the link (or all links within the content) has visited styles applied if the browser determines the link has been visited.
ouiaId	number \| string		Value to overwrite the randomly generated data-ouia-component-id.
ouiaSafe	boolean	true	Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.

CSS variables

Expand or collapse column	Selector	Variable	Value
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--MarginBlockEnd	1rem
--pf-v6-c-content--MarginBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--LineHeight	1.5
--pf-v6-c-content--LineHeight --pf-t--global--font--line-height--body --pf-t--global--font--line-height--200 1.5
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--FontSize	0.875rem
--pf-v6-c-content--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--m-editorial--FontSize	1rem
--pf-v6-c-content--m-editorial--FontSize --pf-t--global--font--size--body--lg --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--FontWeight	400
--pf-v6-c-content--FontWeight --pf-t--global--font--weight--body--default --pf-t--global--font--weight--100 400
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--Color	(In light theme) #151515
--pf-v6-c-content--Color --pf-t--global--text--color--regular --pf-t--global--text--color--100 --pf-t--color--gray--95 #151515
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--heading--FontFamily	"Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif
--pf-v6-c-content--heading--FontFamily --pf-t--global--font--family--heading --pf-t--global--font--family--200 "Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h1--MarginBlockStart	1.5rem
--pf-v6-c-content--h1--MarginBlockStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h1--MarginBlockEnd	0.5rem
--pf-v6-c-content--h1--MarginBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h1--LineHeight	1.3
--pf-v6-c-content--h1--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h1--FontSize	1.375rem
--pf-v6-c-content--h1--FontSize --pf-t--global--font--size--heading--h1 --pf-t--global--font--size--2xl --pf-t--global--font--size--600 1.375rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h1--FontWeight	700
--pf-v6-c-content--h1--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 700
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h2--MarginBlockStart	1.5rem
--pf-v6-c-content--h2--MarginBlockStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h2--MarginBlockEnd	0.5rem
--pf-v6-c-content--h2--MarginBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h2--LineHeight	1.3
--pf-v6-c-content--h2--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h2--FontSize	1.25rem
--pf-v6-c-content--h2--FontSize --pf-t--global--font--size--heading--h2 --pf-t--global--font--size--xl --pf-t--global--font--size--500 1.25rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h2--FontWeight	700
--pf-v6-c-content--h2--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 700
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h3--MarginBlockStart	1.5rem
--pf-v6-c-content--h3--MarginBlockStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h3--MarginBlockEnd	0.5rem
--pf-v6-c-content--h3--MarginBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h3--LineHeight	1.3
--pf-v6-c-content--h3--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h3--FontSize	1.125rem
--pf-v6-c-content--h3--FontSize --pf-t--global--font--size--heading--h3 --pf-t--global--font--size--lg --pf-t--global--font--size--400 1.125rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h3--FontWeight	700
--pf-v6-c-content--h3--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 700
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h4--MarginBlockStart	1.5rem
--pf-v6-c-content--h4--MarginBlockStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h4--MarginBlockEnd	0.5rem
--pf-v6-c-content--h4--MarginBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h4--LineHeight	1.3
--pf-v6-c-content--h4--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h4--FontSize	1rem
--pf-v6-c-content--h4--FontSize --pf-t--global--font--size--heading--h4 --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h4--FontWeight	700
--pf-v6-c-content--h4--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 700
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h5--MarginBlockStart	1.5rem
--pf-v6-c-content--h5--MarginBlockStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h5--MarginBlockEnd	0.5rem
--pf-v6-c-content--h5--MarginBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h5--LineHeight	1.3
--pf-v6-c-content--h5--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h5--FontSize	1rem
--pf-v6-c-content--h5--FontSize --pf-t--global--font--size--heading--h5 --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h5--FontWeight	700
--pf-v6-c-content--h5--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 700
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h6--MarginBlockStart	1.5rem
--pf-v6-c-content--h6--MarginBlockStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h6--MarginBlockEnd	0.5rem
--pf-v6-c-content--h6--MarginBlockEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h6--LineHeight	1.3
--pf-v6-c-content--h6--LineHeight --pf-t--global--font--line-height--heading --pf-t--global--font--line-height--100 1.3
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h6--FontSize	1rem
--pf-v6-c-content--h6--FontSize --pf-t--global--font--size--heading--h6 --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--h6--FontWeight	700
--pf-v6-c-content--h6--FontWeight --pf-t--global--font--weight--heading--default --pf-t--global--font--weight--300 700
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--small--MarginBlockEnd	1rem
--pf-v6-c-content--small--MarginBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--small--LineHeight	1.5
--pf-v6-c-content--small--LineHeight --pf-t--global--font--line-height--body --pf-t--global--font--line-height--200 1.5
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--small--FontSize	0.75rem
--pf-v6-c-content--small--FontSize --pf-t--global--font--size--body--sm --pf-t--global--font--size--xs --pf-t--global--font--size--100 0.75rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--m-editorial--small--FontSize	0.875rem
--pf-v6-c-content--m-editorial--small--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--small--Color	(In light theme) #4d4d4d
--pf-v6-c-content--small--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--a--Color	(In light theme) #0066cc
--pf-v6-c-content--a--Color --pf-t--global--text--color--link--default --pf-t--global--text--color--link--100 --pf-t--color--blue--50 #0066cc
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--a--TextDecorationLine	underline
--pf-v6-c-content--a--TextDecorationLine --pf-t--global--text-decoration--link--line--default --pf-t--global--text-decoration--line--200 underline
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--a--TextDecorationStyle	solid
--pf-v6-c-content--a--TextDecorationStyle --pf-t--global--text-decoration--link--style--default --pf-t--global--text-decoration--style--100 solid
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--a--hover--Color	(In light theme) #004d99
--pf-v6-c-content--a--hover--Color --pf-t--global--text--color--link--hover --pf-t--global--text--color--link--200 --pf-t--color--blue--60 #004d99
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--a--hover--TextDecorationLine	underline
--pf-v6-c-content--a--hover--TextDecorationLine --pf-t--global--text-decoration--link--line--hover --pf-t--global--text-decoration--line--200 underline
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--a--hover--TextDecorationStyle	solid
--pf-v6-c-content--a--hover--TextDecorationStyle --pf-t--global--text-decoration--link--style--hover --pf-t--global--text-decoration--style--100 solid
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--a--visited--Color	(In light theme) #5e40be
--pf-v6-c-content--a--visited--Color --pf-t--global--text--color--link--visited --pf-t--global--text--color--link--300 --pf-t--color--purple--50 #5e40be
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--blockquote--PaddingBlockStart	1rem
--pf-v6-c-content--blockquote--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--blockquote--PaddingInlineEnd	1rem
--pf-v6-c-content--blockquote--PaddingInlineEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--blockquote--PaddingBlockEnd	1rem
--pf-v6-c-content--blockquote--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--blockquote--PaddingInlineStart	1rem
--pf-v6-c-content--blockquote--PaddingInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--blockquote--Color	(In light theme) #4d4d4d
--pf-v6-c-content--blockquote--Color --pf-t--global--text--color--subtle --pf-t--global--text--color--200 --pf-t--color--gray--60 #4d4d4d
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--blockquote--BorderInlineStartColor	(In light theme) #c7c7c7
--pf-v6-c-content--blockquote--BorderInlineStartColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--blockquote--BorderInlineStartWidth	3px
--pf-v6-c-content--blockquote--BorderInlineStartWidth --pf-t--global--border--width--300 3px
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--list--Gap	0.5rem
--pf-v6-c-content--list--Gap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--list--PaddingInlineStart	1.5rem
--pf-v6-c-content--list--PaddingInlineStart --pf-t--global--spacer--lg --pf-t--global--spacer--400 1.5rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--list--nested--MarginBlockStart	0.5rem
--pf-v6-c-content--list--nested--MarginBlockStart --pf-v6-c-content--list--Gap --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--ul--ListStyle	disc outside
--pf-v6-c-content--ul--ListStyle --pf-t--global--list-style disc outside
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--dl--ColumnGap	3rem
--pf-v6-c-content--dl--ColumnGap --pf-t--global--spacer--2xl --pf-t--global--spacer--600 3rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--dl--RowGap	1rem
--pf-v6-c-content--dl--RowGap --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--dt--FontWeight	500
--pf-v6-c-content--dt--FontWeight --pf-t--global--font--weight--body--bold --pf-t--global--font--weight--200 500
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--dt--MarginBlockStart	1rem
--pf-v6-c-content--dt--MarginBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--dt--sm--MarginBlockStart	0
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--hr--Height	1px
--pf-v6-c-content--hr--Height --pf-t--global--border--width--divider--default --pf-t--global--border--width--100 1px
	:where(:root, .pf-v6-c-content)	--pf-v6-c-content--hr--BackgroundColor	(In light theme) #c7c7c7
--pf-v6-c-content--hr--BackgroundColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	[class*=pf-v6-c-content].pf-m-editorial	--pf-v6-c-content--FontSize	1rem
--pf-v6-c-content--FontSize --pf-v6-c-content--m-editorial--FontSize --pf-t--global--font--size--body--lg --pf-t--global--font--size--md --pf-t--global--font--size--300 1rem
	[class*=pf-v6-c-content].pf-m-editorial	--pf-v6-c-content--small--FontSize	0.875rem
--pf-v6-c-content--small--FontSize --pf-v6-c-content--m-editorial--small--FontSize --pf-t--global--font--size--body--default --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	:is(.pf-v6-c-content--a, .pf-v6-c-content a):is(:hover, :focus)	--pf-v6-c-content--a--Color	(In light theme) #004d99
--pf-v6-c-content--a--Color --pf-v6-c-content--a--hover--Color --pf-t--global--text--color--link--hover --pf-t--global--text--color--link--200 --pf-t--color--blue--60 #004d99
	:is(.pf-v6-c-content--a, .pf-v6-c-content a):is(:hover, :focus)	--pf-v6-c-content--a--TextDecorationLine	underline
--pf-v6-c-content--a--TextDecorationLine --pf-v6-c-content--a--hover--TextDecorationLine --pf-t--global--text-decoration--link--line--hover --pf-t--global--text-decoration--line--200 underline
	:is(.pf-v6-c-content--a, .pf-v6-c-content a):is(:hover, :focus)	--pf-v6-c-content--a--TextDecorationStyle	solid
--pf-v6-c-content--a--TextDecorationStyle --pf-v6-c-content--a--hover--TextDecorationStyle --pf-t--global--text-decoration--link--style--hover --pf-t--global--text-decoration--style--100 solid

View source on GitHub