Skip to Content
Patternfly Logo

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.ReactNodeNonullContent rendered within the TextContent
classNamestringNo''Additional classes added to the TextContent
Text properties
NameTypeRequiredDefaultDescription
component'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'a' | 'small' | 'blockquote' | 'pre'NoTextVariants.pThe text component
childrenReact.ReactNodeNonullContent rendered within the Text
classNamestringNo''Additional classes added to the Text
TextList properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered within the TextList
classNamestringNo''Additional classes added to the TextList
component'ul' | 'ol' | 'dl'NoTextListVariants.ulThe text list component
TextListItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeNonullContent rendered within the TextListItem
classNamestringNo''Additional classes added to the TextListItem
component'li' | 'dt' | 'dd'NoTextListItemVariants.liThe text list item component

CSS Variables

.pf-c-content--pf-c-content--MarginBottom
1rem
.pf-c-content--pf-c-content--LineHeight
1.5
.pf-c-content--pf-c-content--FontSize
1rem
.pf-c-content--pf-c-content--FontWeight
400
.pf-c-content--pf-c-content--Color
#151515
.pf-c-content--pf-c-content--heading--FontFamily
"overpass", overpass, "open sans", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
.pf-c-content--pf-c-content--h1--MarginTop
1.5rem
.pf-c-content--pf-c-content--h1--MarginBottom
0.5rem
.pf-c-content--pf-c-content--h1--LineHeight
1.3
.pf-c-content--pf-c-content--h1--FontSize
1.5rem
.pf-c-content--pf-c-content--h1--FontWeight
400
.pf-c-content--pf-c-content--h2--MarginTop
1.5rem
.pf-c-content--pf-c-content--h2--MarginBottom
0.5rem
.pf-c-content--pf-c-content--h2--LineHeight
1.3
.pf-c-content--pf-c-content--h2--FontSize
1.25rem
.pf-c-content--pf-c-content--h2--FontWeight
400
.pf-c-content--pf-c-content--h3--MarginTop
1.5rem
.pf-c-content--pf-c-content--h3--MarginBottom
0.5rem
.pf-c-content--pf-c-content--h3--LineHeight
1.5
.pf-c-content--pf-c-content--h3--FontSize
1.125rem
.pf-c-content--pf-c-content--h3--FontWeight
400
.pf-c-content--pf-c-content--h4--MarginTop
1.5rem
.pf-c-content--pf-c-content--h4--MarginBottom
0.5rem
.pf-c-content--pf-c-content--h4--LineHeight
1.5
.pf-c-content--pf-c-content--h4--FontSize
1rem
.pf-c-content--pf-c-content--h4--FontWeight
500
.pf-c-content--pf-c-content--h5--MarginTop
1.5rem
.pf-c-content--pf-c-content--h5--MarginBottom
0.5rem
.pf-c-content--pf-c-content--h5--LineHeight
1.5
.pf-c-content--pf-c-content--h5--FontSize
1rem
.pf-c-content--pf-c-content--h5--FontWeight
500
.pf-c-content--pf-c-content--h6--MarginTop
1.5rem
.pf-c-content--pf-c-content--h6--MarginBottom
0.5rem
.pf-c-content--pf-c-content--h6--LineHeight
1.5
.pf-c-content--pf-c-content--h6--FontSize
1rem
.pf-c-content--pf-c-content--h6--FontWeight
500
.pf-c-content--pf-c-content--small--MarginBottom
1rem
.pf-c-content--pf-c-content--small--LineHeight
1.5
.pf-c-content--pf-c-content--small--FontSize
0.875rem
.pf-c-content--pf-c-content--small--Color
#6a6e73
.pf-c-content--pf-c-content--a--Color
#06c
.pf-c-content--pf-c-content--a--TextDecoration
none
.pf-c-content--pf-c-content--a--hover--Color
#004080
.pf-c-content--pf-c-content--a--hover--TextDecoration
underline
.pf-c-content--pf-c-content--blockquote--PaddingTop
1rem
.pf-c-content--pf-c-content--blockquote--PaddingRight
1rem
.pf-c-content--pf-c-content--blockquote--PaddingBottom
1rem
.pf-c-content--pf-c-content--blockquote--PaddingLeft
1rem
.pf-c-content--pf-c-content--blockquote--FontWeight
300
.pf-c-content--pf-c-content--blockquote--Color
#6a6e73
.pf-c-content--pf-c-content--blockquote--BorderLeftColor
#d2d2d2
.pf-c-content--pf-c-content--blockquote--BorderLeftWidth
3px
.pf-c-content--pf-c-content--ol--PaddingLeft
1.5rem
.pf-c-content--pf-c-content--ol--MarginLeft
1.5rem
.pf-c-content--pf-c-content--ol--nested--MarginTop
0.5rem
.pf-c-content--pf-c-content--ol--nested--MarginLeft
0.5rem
.pf-c-content--pf-c-content--ul--PaddingLeft
1.5rem
.pf-c-content--pf-c-content--ul--MarginLeft
1.5rem
.pf-c-content--pf-c-content--ul--nested--MarginTop
0.5rem
.pf-c-content--pf-c-content--ul--nested--MarginLeft
0.5rem
.pf-c-content--pf-c-content--ul--ListStyle
disc outside
.pf-c-content--pf-c-content--li--MarginTop
0.5rem
.pf-c-content--pf-c-content--dl--ColumnGap
3rem
.pf-c-content--pf-c-content--dl--RowGap
1rem
.pf-c-content--pf-c-content--dt--FontWeight
500
.pf-c-content--pf-c-content--dt--MarginTop
1rem
.pf-c-content--pf-c-content--dt--sm--MarginTop
0
.pf-c-content--pf-c-content--hr--Height
1px
.pf-c-content--pf-c-content--hr--BackgroundColor
#d2d2d2
.pf-c-content a:hover--pf-c-content--a--Color
#004080
.pf-c-content a:hover--pf-c-content--a--TextDecoration
underline
.pf-c-content ol ul--pf-c-content--ul--MarginLeft
0.5rem
.pf-c-content ol ol--pf-c-content--ol--MarginLeft
0.5rem
.pf-c-content ul ul--pf-c-content--ul--MarginLeft
0.5rem
.pf-c-content ul ol--pf-c-content--ol--MarginLeft
0.5rem
.pf-m-redhat-font .pf-c-content--pf-c-content--h2--LineHeight
1.5
.pf-m-redhat-font .pf-c-content--pf-c-content--blockquote--FontWeight
400
.pf-m-redhat-font .pf-c-content--pf-c-content--h4--FontWeight
400
.pf-m-redhat-font .pf-c-content--pf-c-content--h5--FontWeight
400
.pf-m-redhat-font .pf-c-content--pf-c-content--h6--FontWeight
400

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2019 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines