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

  1. Donec blandit a lorem id convallis.
  2. Cras gravida arcu at diam gravida gravida.
  3. Integer in volutpat libero.
  4. Donec a diam tellus.
  5. Aenean nec tortor orci.
  6. Quisque aliquam cursus urna, non bibendum massa viverra eget.
  7. 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

  1. Donec blandit a lorem id convallis.
  2. component=liCras gravida arcu at diam gravida gravida.
  3. Integer in volutpat libero.
  4. Aenean nec tortor orci.
  5. Quisque aliquam cursus urna, non bibendum massa viverra eget.
  6. 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

Editorial content

Editorial styling increases the font size of body text and small text by 1 tier, where body text becomes "lg" and small text becomes "md". To applying editorial styling, use isEditorial.

Example of editorial content via components

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!


Example of editorial content via wrapper

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!

Props

Content

*required
NameTypeDefaultDescription
childrenReact.ReactNodeChildren rendered within the Content.
classNamestring''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.
isEditorialbooleanfalseFlag to indicate the content has editorial styling. This styling increases the font size of body text and small text by one tier, increasing body text to large and small text to the previous body text size.
isPlainListbooleanfalseModifies the list (ul, ol and dl components) to have plain styling.
isVisitedLinkbooleanfalseFlag to indicate the link (or all links within the content) has visited styles applied if the browser determines the link has been visited.
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleantrueSet 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 columnSelectorVariableValue
:root--pf-v6-c-content--MarginBlockEnd
1rem
:root--pf-v6-c-content--LineHeight
1.5
:root--pf-v6-c-content--FontSize
0.875rem
:root--pf-v6-c-content--m-editorial--FontSize
1rem
:root--pf-v6-c-content--FontWeight
400
:root--pf-v6-c-content--Color
(In light theme) #151515
:root--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
:root--pf-v6-c-content--h1--MarginBlockStart
1.5rem
:root--pf-v6-c-content--h1--MarginBlockEnd
0.5rem
:root--pf-v6-c-content--h1--LineHeight
1.3
:root--pf-v6-c-content--h1--FontSize
1.5rem
:root--pf-v6-c-content--h1--FontWeight
500
:root--pf-v6-c-content--h2--MarginBlockStart
1.5rem
:root--pf-v6-c-content--h2--MarginBlockEnd
0.5rem
:root--pf-v6-c-content--h2--LineHeight
1.3
:root--pf-v6-c-content--h2--FontSize
1.25rem
:root--pf-v6-c-content--h2--FontWeight
500
:root--pf-v6-c-content--h3--MarginBlockStart
1.5rem
:root--pf-v6-c-content--h3--MarginBlockEnd
0.5rem
:root--pf-v6-c-content--h3--LineHeight
1.3
:root--pf-v6-c-content--h3--FontSize
1.125rem
:root--pf-v6-c-content--h3--FontWeight
500
:root--pf-v6-c-content--h4--MarginBlockStart
1.5rem
:root--pf-v6-c-content--h4--MarginBlockEnd
0.5rem
:root--pf-v6-c-content--h4--LineHeight
1.3
:root--pf-v6-c-content--h4--FontSize
1rem
:root--pf-v6-c-content--h4--FontWeight
500
:root--pf-v6-c-content--h5--MarginBlockStart
1.5rem
:root--pf-v6-c-content--h5--MarginBlockEnd
0.5rem
:root--pf-v6-c-content--h5--LineHeight
1.3
:root--pf-v6-c-content--h5--FontSize
1rem
:root--pf-v6-c-content--h5--FontWeight
500
:root--pf-v6-c-content--h6--MarginBlockStart
1.5rem
:root--pf-v6-c-content--h6--MarginBlockEnd
0.5rem
:root--pf-v6-c-content--h6--LineHeight
1.3
:root--pf-v6-c-content--h6--FontSize
1rem
:root--pf-v6-c-content--h6--FontWeight
500
:root--pf-v6-c-content--small--MarginBlockEnd
1rem
:root--pf-v6-c-content--small--LineHeight
1.5
:root--pf-v6-c-content--small--FontSize
0.75rem
:root--pf-v6-c-content--m-editorial--small--FontSize
0.875rem
:root--pf-v6-c-content--small--Color
(In light theme) #4d4d4d
:root--pf-v6-c-content--a--Color
(In light theme) #0066cc
:root--pf-v6-c-content--a--TextDecorationLine
underline
:root--pf-v6-c-content--a--TextDecorationStyle
solid
:root--pf-v6-c-content--a--hover--Color
(In light theme) #004d99
:root--pf-v6-c-content--a--hover--TextDecorationLine
underline
:root--pf-v6-c-content--a--hover--TextDecorationStyle
solid
:root--pf-v6-c-content--a--visited--Color
(In light theme) #5e40be
:root--pf-v6-c-content--blockquote--PaddingBlockStart
1rem
:root--pf-v6-c-content--blockquote--PaddingInlineEnd
1rem
:root--pf-v6-c-content--blockquote--PaddingBlockEnd
1rem
:root--pf-v6-c-content--blockquote--PaddingInlineStart
1rem
:root--pf-v6-c-content--blockquote--Color
(In light theme) #4d4d4d
:root--pf-v6-c-content--blockquote--BorderInlineStartColor
(In light theme) #c7c7c7
:root--pf-v6-c-content--blockquote--BorderInlineStartWidth
3px
:root--pf-v6-c-content--list--Gap
0.5rem
:root--pf-v6-c-content--list--PaddingInlineStart
1.5rem
:root--pf-v6-c-content--list--nested--MarginBlockStart
0.5rem
:root--pf-v6-c-content--ul--ListStyle
disc outside
:root--pf-v6-c-content--dl--GridTemplateColumns--dt
12ch
:root--pf-v6-c-content--dl--GridTemplateColumns--dd
1fr
:root--pf-v6-c-content--dl--ColumnGap
1rem
:root--pf-v6-c-content--dl--RowGap
1.5rem
:root--pf-v6-c-content--dt--FontWeight
500
:root--pf-v6-c-content--dt--MarginBlockStart
1rem
:root--pf-v6-c-content--dt--sm--MarginBlockStart
0
:root--pf-v6-c-content--hr--Height
1px
:root--pf-v6-c-content--hr--BackgroundColor
(In light theme) #c7c7c7
[class*=pf-v6-c-content].pf-m-editorial--pf-v6-c-content--FontSize
1rem
[class*=pf-v6-c-content].pf-m-editorial--pf-v6-c-content--small--FontSize
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
:is(.pf-v6-c-content--a, .pf-v6-c-content a):is(:hover, :focus)--pf-v6-c-content--a--TextDecorationLine
underline
:is(.pf-v6-c-content--a, .pf-v6-c-content a):is(:hover, :focus)--pf-v6-c-content--a--TextDecorationStyle
solid