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
Copied to clipboard

Body text

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
Copied to clipboard

Unordered list

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

  • 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.
Copied to clipboard

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.
Copied to clipboard

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
Copied to clipboard

Props

Text Props

The Text component accepts the following props.

NameTypeRequiredDefaultDescription
componentenum'p'The text component
childrennodenullContent rendered within the Text
classNamestring''Additional classes added to the Text
anyAdditional props are spread to the container component

TextContent Props

The TextContent component accepts the following props.

NameTypeRequiredDefaultDescription
childrennodenullContent rendered within the TextContent
classNamestring''Additional classes added to the TextContent
anyAdditional props are spread to the container <div>

TextList Props

The TextList component accepts the following props.

NameTypeRequiredDefaultDescription
componentenum'ul'The text list component
childrennodenullContent rendered within the TextList
classNamestring''Additional classes added to the TextList
anyAdditional props are spread to the container component

TextListItem Props

The TextListItem component accepts the following props.

NameTypeRequiredDefaultDescription
componentenum'li'The text list item component
childrennodenullContent rendered within the TextListItem
classNamestring''Additional classes added to the TextListItem
anyAdditional props are spread to the container 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.75rem
--pf-c-content--h1--FontWeightc_content_h1_FontWeight400
--pf-c-content--h1--LineHeightc_content_h1_LineHeight1.3
--pf-c-content--h1--MarginBottomc_content_h1_MarginBottom1rem
--pf-c-content--h1--MarginTopc_content_h1_MarginTop1.5rem
--pf-c-content--h2--FontSizec_content_h2_FontSize1.5rem
--pf-c-content--h2--FontWeightc_content_h2_FontWeight400
--pf-c-content--h2--LineHeightc_content_h2_LineHeight1.3
--pf-c-content--h2--MarginBottomc_content_h2_MarginBottom1rem
--pf-c-content--h2--MarginTopc_content_h2_MarginTop1.5rem
--pf-c-content--h3--FontSizec_content_h3_FontSize1.3125rem
--pf-c-content--h3--FontWeightc_content_h3_FontWeight400
--pf-c-content--h3--LineHeightc_content_h3_LineHeight1.5
--pf-c-content--h3--MarginBottomc_content_h3_MarginBottom1rem
--pf-c-content--h3--MarginTopc_content_h3_MarginTop1.5rem
--pf-c-content--h4--FontSizec_content_h4_FontSize1.125rem
--pf-c-content--h4--FontWeightc_content_h4_FontWeight500
--pf-c-content--h4--LineHeightc_content_h4_LineHeight1.5
--pf-c-content--h4--MarginBottomc_content_h4_MarginBottom1rem
--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_MarginBottom1rem
--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.25rem
--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