React

Text

The text component can wrap any static HTML content you want to place on your page to provide correct formatting when using standard HTML tags.

ExamplesPropsCSS Variables

Examples

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

Text components such as Text, TextList, TextListItem need to be placed within a TextContent

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.

Data 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

Props

TextContent properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered within the TextContent
classNamestring''Additional classes added to the TextContent
Text properties
NameTypeRequiredDefaultDescription
component'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'a' | 'small' | 'blockquote' | 'pre'TextVariants.pThe text component
childrenReact.ReactNodenullContent rendered within the Text
classNamestring''Additional classes added to the Text
TextList properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered within the TextList
classNamestring''Additional classes added to the TextList
component'ul' | 'ol' | 'dl'TextListVariants.ulThe text list component
TextListItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered within the TextListItem
classNamestring''Additional classes added to the TextListItem
component'li' | 'dt' | 'dd'TextListItemVariants.liThe text list item component

CSS Variables

--pf-c-content--a--Colorc_content_a_Color
#004080
--pf-c-content--a--hover--Colorc_content_a_hover_Color
#004080
--pf-c-content--a--hover--TextDecorationc_content_a_hover_TextDecoration
underline
--pf-c-content--a--TextDecorationc_content_a_TextDecoration
underline
--pf-c-content--blockquote--BorderLeftColorc_content_blockquote_BorderLeftColor
#d2d2d2
--pf-c-content--blockquote--BorderLeftWidthc_content_blockquote_BorderLeftWidth
3px
--pf-c-content--blockquote--Colorc_content_blockquote_Color
#737679
--pf-c-content--blockquote--FontWeightc_content_blockquote_FontWeight
400
--pf-c-content--blockquote--PaddingBottomc_content_blockquote_PaddingBottom
1rem
--pf-c-content--blockquote--PaddingLeftc_content_blockquote_PaddingLeft
1rem
--pf-c-content--blockquote--PaddingRightc_content_blockquote_PaddingRight
1rem
--pf-c-content--blockquote--PaddingTopc_content_blockquote_PaddingTop
1rem
--pf-c-content--Colorc_content_Color
#151515
--pf-c-content--dl--ColumnGapc_content_dl_ColumnGap
3rem
--pf-c-content--dl--RowGapc_content_dl_RowGap
1rem
--pf-c-content--dt--FontWeightc_content_dt_FontWeight
700
--pf-c-content--dt--MarginTopc_content_dt_MarginTop
1rem
--pf-c-content--dt--sm--MarginTopc_content_dt_sm_MarginTop
0
--pf-c-content--FontSizec_content_FontSize
1rem
--pf-c-content--FontWeightc_content_FontWeight
400
--pf-c-content--h1--FontSizec_content_h1_FontSize
1.5rem
--pf-c-content--h1--FontWeightc_content_h1_FontWeight
400
--pf-c-content--h1--LineHeightc_content_h1_LineHeight
1.3
--pf-c-content--h1--MarginBottomc_content_h1_MarginBottom
0.5rem
--pf-c-content--h1--MarginTopc_content_h1_MarginTop
1.5rem
--pf-c-content--h2--FontSizec_content_h2_FontSize
1.25rem
--pf-c-content--h2--FontWeightc_content_h2_FontWeight
400
--pf-c-content--h2--LineHeightc_content_h2_LineHeight
1.5
--pf-c-content--h2--MarginBottomc_content_h2_MarginBottom
0.5rem
--pf-c-content--h2--MarginTopc_content_h2_MarginTop
1.5rem
--pf-c-content--h3--FontSizec_content_h3_FontSize
1.125rem
--pf-c-content--h3--FontWeightc_content_h3_FontWeight
400
--pf-c-content--h3--LineHeightc_content_h3_LineHeight
1.5
--pf-c-content--h3--MarginBottomc_content_h3_MarginBottom
0.5rem
--pf-c-content--h3--MarginTopc_content_h3_MarginTop
1.5rem
--pf-c-content--h4--FontSizec_content_h4_FontSize
1rem
--pf-c-content--h4--FontWeightc_content_h4_FontWeight
400
--pf-c-content--h4--LineHeightc_content_h4_LineHeight
1.5
--pf-c-content--h4--MarginBottomc_content_h4_MarginBottom
0.5rem
--pf-c-content--h4--MarginTopc_content_h4_MarginTop
1.5rem
--pf-c-content--h5--FontSizec_content_h5_FontSize
1rem
--pf-c-content--h5--FontWeightc_content_h5_FontWeight
400
--pf-c-content--h5--LineHeightc_content_h5_LineHeight
1.5
--pf-c-content--h5--MarginBottomc_content_h5_MarginBottom
0.5rem
--pf-c-content--h5--MarginTopc_content_h5_MarginTop
1.5rem
--pf-c-content--h6--FontSizec_content_h6_FontSize
1rem
--pf-c-content--h6--FontWeightc_content_h6_FontWeight
400
--pf-c-content--h6--LineHeightc_content_h6_LineHeight
1.5
--pf-c-content--h6--MarginBottomc_content_h6_MarginBottom
0.5rem
--pf-c-content--h6--MarginTopc_content_h6_MarginTop
1.5rem
--pf-c-content--heading--FontFamilyc_content_heading_FontFamily
RedHatDisplay,Overpass,overpass,helvetica,arial,sans-serif
--pf-c-content--hr--BackgroundColorc_content_hr_BackgroundColor
#d2d2d2
--pf-c-content--hr--Heightc_content_hr_Height
1px
--pf-c-content--li--MarginTopc_content_li_MarginTop
0.5rem
--pf-c-content--LineHeightc_content_LineHeight
1.5
--pf-c-content--MarginBottomc_content_MarginBottom
1rem
--pf-c-content--ol--MarginLeftc_content_ol_MarginLeft
0.5rem
--pf-c-content--ol--MarginTopc_content_ol_MarginTop
0.5rem
--pf-c-content--ol--nested--MarginLeftc_content_ol_nested_MarginLeft
0.5rem
--pf-c-content--ol--nested--MarginTopc_content_ol_nested_MarginTop
0.5rem
--pf-c-content--ol--PaddingLeftc_content_ol_PaddingLeft
1.5rem
--pf-c-content--small--Colorc_content_small_Color
#737679
--pf-c-content--small--FontSizec_content_small_FontSize
0.875rem
--pf-c-content--small--FontWeightc_content_small_FontWeight
700
--pf-c-content--small--LineHeightc_content_small_LineHeight
1.5
--pf-c-content--small--MarginBottomc_content_small_MarginBottom
1rem
--pf-c-content--ul--ListStylec_content_ul_ListStyle
disc outside
--pf-c-content--ul--MarginLeftc_content_ul_MarginLeft
0.5rem
--pf-c-content--ul--MarginTopc_content_ul_MarginTop
0.5rem
--pf-c-content--ul--nested--MarginLeftc_content_ul_nested_MarginLeft
0.5rem
--pf-c-content--ul--nested--MarginTopc_content_ul_nested_MarginTop
0.5rem
--pf-c-content--ul--PaddingLeftc_content_ul_PaddingLeft
1.5rem