diff --git a/packages/react-core/src/components/Text/examples/Text.md b/packages/react-core/src/components/Text/examples/Text.md index b3a9530df53..b3edc39572c 100644 --- a/packages/react-core/src/components/Text/examples/Text.md +++ b/packages/react-core/src/components/Text/examples/Text.md @@ -5,16 +5,24 @@ cssPrefix: pf-v5-c-content propComponents: ['TextContent', 'Text', 'TextList', 'TextListItem'] --- +The `` 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 (``, ``, and ``). + +You cannot nest other components within ``, and doing so can cause styling overrides or other conflicts. Instead, you can use the `` component's properties to achieve the same results. + +For example, rather than nesting the `` and `` 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 ```ts file="./TextHeadings.tsx" + ``` ### Body ```ts file="./TextBody.tsx" + ``` Text components such as Text, TextList, TextListItem need to be placed within a TextContent @@ -22,24 +30,29 @@ Text components such as Text, TextList, TextListItem need to be placed within a ### Unordered list ```ts file="./TextUnorderedList.tsx" + ``` ### Ordered list ```ts file="./TextOrderedList.tsx" + ``` ### Plain list ```ts file="./TextPlainList.tsx" + ``` ### Description list ```ts file="./TextDescriptionList.tsx" + ``` ### Visited ```ts file="./TextVisited.tsx" + ```