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!
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
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
| 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. | |
| isEditorial | boolean | false | Flag 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. |
| 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 | |
|---|---|---|---|---|
| :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 | ||
| ||||
