Examples
Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nuncvarius 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 ametturpis.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
- Donec blandit a lorem id convallis.
- Cras gravida arcu at diam gravida gravida.
- Integer in volutpat libero.
- Donec a diam tellus.
- Aenean nec tortor orci.
- Quisque aliquam cursus urna, non bibendum massa viverra eget.
- 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
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | React.ReactNode | No | null | Content rendered within the TextContent |
className | string | No | '' | Additional classes added to the TextContent |
Text
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | React.ReactNode | No | null | Content rendered within the Text |
className | string | No | '' | Additional classes added to the Text |
component | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'a' | 'small' | 'blockquote' | 'pre' | No | TextVariants.p | The text component |
TextList
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | React.ReactNode | No | null | Content rendered within the TextList |
className | string | No | '' | Additional classes added to the TextList |
component | 'ul' | 'ol' | 'dl' | No | TextListVariants.ul | The text list component |
TextListItem
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | React.ReactNode | No | null | Content rendered within the TextListItem |
className | string | No | '' | Additional classes added to the TextListItem |
component | 'li' | 'dt' | 'dd' | No | TextListItemVariants.li | The 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 | '"RedHatDisplay", "Overpass", overpass, helvetica, arial, sans-serif' | |
.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.5 | |
.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 | 400 | |
.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 | 400 | |
.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 | 400 | |
.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--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 | 700 | |
.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-overpass-font .pf-c-content | --pf-c-content--h2--LineHeight | 1.3 | |
.pf-m-overpass-font .pf-c-content | --pf-c-content--h4--FontWeight | 700 | |
.pf-m-overpass-font .pf-c-content | --pf-c-content--h5--FontWeight | 700 | |
.pf-m-overpass-font .pf-c-content | --pf-c-content--h6--FontWeight | 700 | |
View source on GitHub