Content

A content component contains a block of styled HTML content.

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
600
: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
600
: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
600
: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
600
: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
600
: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
600
:root--pf-v6-c-content--heading--m-page-title--FontWeight
800
: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
dashed
: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
dashed
: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) #e0e0e0
: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
600
: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) #e0e0e0
[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
dashed