Skip to content
PatternFly

Text

Text and TextList components are always wrapped in TextContent and provide correct formatting to a number of standard HTML tags.

The <Text> component provides simple, built-in styling for putting common blocks of HTML elements together. It establishes the block of content and styling within it for the elements listed in the component property(h1 through h6, p, a, small, blockquote, and pre), as well as the text component suite (<TextContent>, <TextList>, and <TextListItem>).

You cannot nest other components within <Text>, and doing so can cause styling overrides or other conflicts. Instead, you can use the <Text> component's properties to achieve the same results.

For example, rather than nesting the <List> and <Title> components within <Text>, you should pass component="h1" into the <TextList> and <Text> components. Similarly, when you need to add a divider , rather than passing in a separate <Divider> component, you should utilize the hr property that <Text> supports, which will be styled as a divider.

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.

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

  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.

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

Visited

Visited link example

Visited link


Visited content example

content link 1

content link 2

content link 3

Props

TextContent

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered within the TextContent
classNamestring''Additional classes added to the TextContent
isVisitedbooleanfalseFlag to indicate the all links in a the content block have visited styles applied if the browser determines the link has been visited

Text

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered within the Text
classNamestring''Additional classes added to the Text
component'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'a' | 'small' | 'blockquote' | 'pre'TextVariants.pThe text component
isVisitedLinkbooleanfalseFlag to indicate the link has visited styles applied if the browser determines the link has been visited
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleantrueSet 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.

TextList

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered within the TextList
classNamestring''Additional classes added to the TextList
component'ul' | 'ol' | 'dl'TextListVariants.ulThe text list component
isPlainbooleanfalseModifies the list to include plain styling

TextListItem

*required
NameTypeDefaultDescription
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

Expand or collapse columnSelectorVariableValue
.pf-v5-c-content--pf-v5-c-content--MarginBottom
1rem
.pf-v5-c-content--pf-v5-c-content--LineHeight
1.5
.pf-v5-c-content--pf-v5-c-content--FontSize
1rem
.pf-v5-c-content--pf-v5-c-content--FontWeight
400
.pf-v5-c-content--pf-v5-c-content--Color
#151515
.pf-v5-c-content--pf-v5-c-content--heading--FontFamily
'"RedHatDisplay", helvetica, arial, sans-serif'
.pf-v5-c-content--pf-v5-c-content--h1--MarginTop
1.5rem
.pf-v5-c-content--pf-v5-c-content--h1--MarginBottom
0.5rem
.pf-v5-c-content--pf-v5-c-content--h1--LineHeight
1.3
.pf-v5-c-content--pf-v5-c-content--h1--FontSize
1.5rem
.pf-v5-c-content--pf-v5-c-content--h1--FontWeight
400
.pf-v5-c-content--pf-v5-c-content--h2--MarginTop
1.5rem
.pf-v5-c-content--pf-v5-c-content--h2--MarginBottom
0.5rem
.pf-v5-c-content--pf-v5-c-content--h2--LineHeight
1.5
.pf-v5-c-content--pf-v5-c-content--h2--FontSize
1.25rem
.pf-v5-c-content--pf-v5-c-content--h2--FontWeight
400
.pf-v5-c-content--pf-v5-c-content--h3--MarginTop
1.5rem
.pf-v5-c-content--pf-v5-c-content--h3--MarginBottom
0.5rem
.pf-v5-c-content--pf-v5-c-content--h3--LineHeight
1.5
.pf-v5-c-content--pf-v5-c-content--h3--FontSize
1.125rem
.pf-v5-c-content--pf-v5-c-content--h3--FontWeight
400
.pf-v5-c-content--pf-v5-c-content--h4--MarginTop
1.5rem
.pf-v5-c-content--pf-v5-c-content--h4--MarginBottom
0.5rem
.pf-v5-c-content--pf-v5-c-content--h4--LineHeight
1.5
.pf-v5-c-content--pf-v5-c-content--h4--FontSize
1rem
.pf-v5-c-content--pf-v5-c-content--h4--FontWeight
400
.pf-v5-c-content--pf-v5-c-content--h5--MarginTop
1.5rem
.pf-v5-c-content--pf-v5-c-content--h5--MarginBottom
0.5rem
.pf-v5-c-content--pf-v5-c-content--h5--LineHeight
1.5
.pf-v5-c-content--pf-v5-c-content--h5--FontSize
1rem
.pf-v5-c-content--pf-v5-c-content--h5--FontWeight
400
.pf-v5-c-content--pf-v5-c-content--h6--MarginTop
1.5rem
.pf-v5-c-content--pf-v5-c-content--h6--MarginBottom
0.5rem
.pf-v5-c-content--pf-v5-c-content--h6--LineHeight
1.5
.pf-v5-c-content--pf-v5-c-content--h6--FontSize
1rem
.pf-v5-c-content--pf-v5-c-content--h6--FontWeight
400
.pf-v5-c-content--pf-v5-c-content--small--MarginBottom
1rem
.pf-v5-c-content--pf-v5-c-content--small--LineHeight
1.5
.pf-v5-c-content--pf-v5-c-content--small--FontSize
0.875rem
.pf-v5-c-content--pf-v5-c-content--small--Color
#6a6e73
.pf-v5-c-content--pf-v5-c-content--a--Color
#06c
.pf-v5-c-content--pf-v5-c-content--a--TextDecoration
none
.pf-v5-c-content--pf-v5-c-content--a--hover--Color
#004080
.pf-v5-c-content--pf-v5-c-content--a--hover--TextDecoration
underline
.pf-v5-c-content--pf-v5-c-content--a--visited--Color
#40199a
.pf-v5-c-content--pf-v5-c-content--blockquote--PaddingTop
1rem
.pf-v5-c-content--pf-v5-c-content--blockquote--PaddingRight
1rem
.pf-v5-c-content--pf-v5-c-content--blockquote--PaddingBottom
1rem
.pf-v5-c-content--pf-v5-c-content--blockquote--PaddingLeft
1rem
.pf-v5-c-content--pf-v5-c-content--blockquote--Color
#6a6e73
.pf-v5-c-content--pf-v5-c-content--blockquote--BorderLeftColor
#d2d2d2
.pf-v5-c-content--pf-v5-c-content--blockquote--BorderLeftWidth
3px
.pf-v5-c-content--pf-v5-c-content--ol--PaddingLeft
1.5rem
.pf-v5-c-content--pf-v5-c-content--ol--MarginLeft
1.5rem
.pf-v5-c-content--pf-v5-c-content--ol--nested--MarginTop
0.5rem
.pf-v5-c-content--pf-v5-c-content--ol--nested--MarginLeft
0.5rem
.pf-v5-c-content--pf-v5-c-content--ul--PaddingLeft
1.5rem
.pf-v5-c-content--pf-v5-c-content--ul--MarginLeft
1.5rem
.pf-v5-c-content--pf-v5-c-content--ul--nested--MarginTop
0.5rem
.pf-v5-c-content--pf-v5-c-content--ul--nested--MarginLeft
0.5rem
.pf-v5-c-content--pf-v5-c-content--ul--ListStyle
disc outside
.pf-v5-c-content--pf-v5-c-content--li--MarginTop
0.5rem
.pf-v5-c-content--pf-v5-c-content--dl--ColumnGap
3rem
.pf-v5-c-content--pf-v5-c-content--dl--RowGap
1rem
.pf-v5-c-content--pf-v5-c-content--dt--FontWeight
700
.pf-v5-c-content--pf-v5-c-content--dt--MarginTop
1rem
.pf-v5-c-content--pf-v5-c-content--dt--sm--MarginTop
0
.pf-v5-c-content--pf-v5-c-content--hr--Height
1px
.pf-v5-c-content--pf-v5-c-content--hr--BackgroundColor
#d2d2d2
.pf-v5-c-content a:hover--pf-v5-c-content--a--Color
#004080
.pf-v5-c-content a:hover--pf-v5-c-content--a--TextDecoration
underline
.pf-v5-c-content ol ul--pf-v5-c-content--ul--MarginLeft
0.5rem
.pf-v5-c-content ol ol--pf-v5-c-content--ol--MarginLeft
0.5rem
.pf-v5-c-content ul ul--pf-v5-c-content--ul--MarginLeft
0.5rem
.pf-v5-c-content ul ol--pf-v5-c-content--ol--MarginLeft
0.5rem

View source on GitHub
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines