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

Copied to clipboard

Body text

Copied to clipboard

Unordered list

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

Copied to clipboard

Ordered list

Copied to clipboard

Data list

Copied to clipboard

Props

Text Props

The Text component accepts the following props.

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

TextContent Props

The TextContent component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered within the TextContent
classNamestring''Additional classes added to the TextContent

TextList Props

The TextList component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered within the TextList
classNamestring''Additional classes added to the TextList
component'ul' | 'ol' | 'dl'TextListVariants.ulThe text list component

TextListItem Props

The TextListItem component accepts the following props.

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--Colorc_content_Color#151515
--pf-c-content--FontSizec_content_FontSize1rem
--pf-c-content--FontWeightc_content_FontWeight400
--pf-c-content--LineHeightc_content_LineHeight1.5
--pf-c-content--MarginBottomc_content_MarginBottom1rem
--pf-c-content--a--Colorc_content_a_Color#004080
--pf-c-content--a--TextDecorationc_content_a_TextDecorationunderline
--pf-c-content--a--hover--Colorc_content_a_hover_Color#004080
--pf-c-content--a--hover--TextDecorationc_content_a_hover_TextDecorationunderline
--pf-c-content--blockquote--BorderLeftColorc_content_blockquote_BorderLeftColor#d2d2d2
--pf-c-content--blockquote--BorderLeftWidthc_content_blockquote_BorderLeftWidth3px
--pf-c-content--blockquote--Colorc_content_blockquote_Color#72767b
--pf-c-content--blockquote--FontWeightc_content_blockquote_FontWeight300
--pf-c-content--blockquote--PaddingBottomc_content_blockquote_PaddingBottom1rem
--pf-c-content--blockquote--PaddingLeftc_content_blockquote_PaddingLeft1rem
--pf-c-content--blockquote--PaddingRightc_content_blockquote_PaddingRight1rem
--pf-c-content--blockquote--PaddingTopc_content_blockquote_PaddingTop1rem
--pf-c-content--dl--ColumnGapc_content_dl_ColumnGap3rem
--pf-c-content--dl--RowGapc_content_dl_RowGap1rem
--pf-c-content--dt--FontWeightc_content_dt_FontWeight500
--pf-c-content--dt--MarginTopc_content_dt_MarginTop1rem
--pf-c-content--dt--sm--MarginTopc_content_dt_sm_MarginTop0
--pf-c-content--h1--FontSizec_content_h1_FontSize1.5rem
--pf-c-content--h1--FontWeightc_content_h1_FontWeight400
--pf-c-content--h1--LineHeightc_content_h1_LineHeight1.3
--pf-c-content--h1--MarginBottomc_content_h1_MarginBottom0.5rem
--pf-c-content--h1--MarginTopc_content_h1_MarginTop1.5rem
--pf-c-content--h2--FontSizec_content_h2_FontSize1.3125rem
--pf-c-content--h2--FontWeightc_content_h2_FontWeight400
--pf-c-content--h2--LineHeightc_content_h2_LineHeight1.3
--pf-c-content--h2--MarginBottomc_content_h2_MarginBottom0.5rem
--pf-c-content--h2--MarginTopc_content_h2_MarginTop1.5rem
--pf-c-content--h3--FontSizec_content_h3_FontSize1.125rem
--pf-c-content--h3--FontWeightc_content_h3_FontWeight400
--pf-c-content--h3--LineHeightc_content_h3_LineHeight1.5
--pf-c-content--h3--MarginBottomc_content_h3_MarginBottom0.5rem
--pf-c-content--h3--MarginTopc_content_h3_MarginTop1.5rem
--pf-c-content--h4--FontSizec_content_h4_FontSize1rem
--pf-c-content--h4--FontWeightc_content_h4_FontWeight500
--pf-c-content--h4--LineHeightc_content_h4_LineHeight1.5
--pf-c-content--h4--MarginBottomc_content_h4_MarginBottom0.5rem
--pf-c-content--h4--MarginTopc_content_h4_MarginTop1.5rem
--pf-c-content--h5--FontSizec_content_h5_FontSize1rem
--pf-c-content--h5--FontWeightc_content_h5_FontWeight500
--pf-c-content--h5--LineHeightc_content_h5_LineHeight1.5
--pf-c-content--h5--MarginBottomc_content_h5_MarginBottom0.5rem
--pf-c-content--h5--MarginTopc_content_h5_MarginTop1.5rem
--pf-c-content--h6--FontSizec_content_h6_FontSize1rem
--pf-c-content--h6--FontWeightc_content_h6_FontWeight500
--pf-c-content--h6--LineHeightc_content_h6_LineHeight1.5
--pf-c-content--h6--MarginBottomc_content_h6_MarginBottom0.5rem
--pf-c-content--h6--MarginTopc_content_h6_MarginTop1.5rem
--pf-c-content--hr--BackgroundColorc_content_hr_BackgroundColor#d2d2d2
--pf-c-content--hr--Heightc_content_hr_Height1px
--pf-c-content--li--MarginTopc_content_li_MarginTop0.5rem
--pf-c-content--ol--MarginLeftc_content_ol_MarginLeft0.5rem
--pf-c-content--ol--MarginTopc_content_ol_MarginTop0.5rem
--pf-c-content--ol--PaddingLeftc_content_ol_PaddingLeft1.5rem
--pf-c-content--ol--nested--MarginLeftc_content_ol_nested_MarginLeft0.5rem
--pf-c-content--ol--nested--MarginTopc_content_ol_nested_MarginTop0.5rem
--pf-c-content--small--Colorc_content_small_Color#72767b
--pf-c-content--small--FontSizec_content_small_FontSize0.875rem
--pf-c-content--small--FontWeightc_content_small_FontWeight500
--pf-c-content--small--LineHeightc_content_small_LineHeight1.5
--pf-c-content--small--MarginBottomc_content_small_MarginBottom1rem
--pf-c-content--ul--ListStylec_content_ul_ListStyledisc outside
--pf-c-content--ul--MarginLeftc_content_ul_MarginLeft0.5rem
--pf-c-content--ul--MarginTopc_content_ul_MarginTop0.5rem
--pf-c-content--ul--PaddingLeftc_content_ul_PaddingLeft1.5rem
--pf-c-content--ul--nested--MarginLeftc_content_ul_nested_MarginLeft0.5rem
--pf-c-content--ul--nested--MarginTopc_content_ul_nested_MarginTop0.5rem