Text

The Text component is used to display text with available prop values adhering to brand styling rules.

Import

React

// with @dhl-official/react-library:
import { DhlText } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlText } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-text></dhl-text>

Vue.js

// with @dhl-official/vue-library:
import { DhlText } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlText } from "@dhl-official/ui-libraries/vue-library"

Guidelines

• Please note that if no values are supplied to the size and weight prop respectively, then the Text component inherits these values from their parent.

Code

React

<DhlText>Example Text</DhlText>

Angular

<dhl-text>Example Text</dhl-text>

Vue.js

<dhl-text>Example Text</dhl-text>

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
dataAriaAtomic	data-aria-atomic	An optional prop used to indicate whether assistive technologies such as a screen reader will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.	string	undefined
dataAriaHidden	data-aria-hidden	An optional prop used to indicate whether the element is exposed to an accessibility API.	string	undefined
dataAriaLabel	data-aria-label	An optional prop defining the text read by the screen reader to represent the component; use this if you need different text to be read from label.	string	undefined
dataAriaLabelledby	data-aria-labelledby	An optional ariaLabelledby prop that establishes the relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labelling. List multiple element IDs in a space delimited fashion.	string	undefined
dataAriaLive	data-aria-live	An optional prop used to expose dynamic content changes in a way that can be announced by assistive technologies.	string	undefined
dataClassName	data-class-name	An optional class name prop for the component.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	dhl-text-${getRandomString()}
dataLang	data-lang	An optional prop used to set the lang attribute of the Text component	string	undefined
dataRole	data-role	An optional prop defining the role attribute of the component.	string	undefined
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
dataTitle	data-title	An optional prop used to set the title for the text component.	string	undefined
fontStyle	font-style	An optional prop used to set the font-style property of the text component.	"italic" \| "normal"	undefined
isParagraph	is-paragraph	An optional prop used to set if ReadMore should use a <p> instead of a <span> tag.	boolean	false
size	size	An optional size prop for the component.	"10xl" \| "11xl" \| "2xl" \| "2xs" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "8xl" \| "9xl" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"	DHL_TEXT.SIZE.MD
stretch	stretch	An optional prop used to set the font-stretch property of the component.	"condensed" \| "normal"	undefined
weight	weight	An optional prop used to set the font-weight property of the text component.	200 \| 400 \| 700 \| 800	DHL_TEXT.WEIGHT[400]

Slots

Slot	Description
"unnamed"	unnamed children slot intended for Text text

Dependencies

Used by

• dhl-autocomplete-field
• dhl-back-to-top
• dhl-date-picker
• dhl-date-range-picker
• dhl-footer
• dhl-global-validation
• dhl-illustrated-validation
• dhl-indicator-step
• dhl-navbar
• dhl-read-more
• dhl-stage
• dhl-stage-action-box
• dhl-text-area-field

Graph

---

Built by DHL User Interface Library Team!