Copytext

DhlCopyText component is used to preset the core textual content for our users. They are contained with headline and text and have few different variants which are tailored to the content we present.

Import

React

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

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

Angular

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

<dhl-copy-text></dhl-copy-text>

Vue.js

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

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

Code

React

<DhlCopyText>
  <span slot="headline">Copy text headline</span>
  <DhlText>Copy Text Content</DhlText>
</DhlCopyText>

Angular

<dhl-copy-text>
    <span slot="headline">Copy text headline</span>
  <dhl-text>Copy Text Content</dhl-text>
</dhl-copy-text>

Vue.js

<dhl-copy-text>
    <span slot="headline">Copy text headline</span>
  <dhl-text>Copy Text Content</dhl-text>
</dhl-copy-text>

Usage

Default DhlCopyText

Shows provided headline and the text in one column.

Example 2: Customise Headline and content columns

• Uppercase headline which is red in color
• Shows text in:
  • One column until viewport size md
  • Two columns from viewport size lg

Example 3: Bullet / Number List

• In the content you can use any other content elements like Bullet list or Number list
• You can also add margins to the bottom of the Copy Text component

Guidelines

• Please check the Do's and Dont's for dhl-page-headline
• Do use the one size as the default for copy text
• Do use spacing to better organize textual information, such as different paragraphs

Readme

Properties

Property	Attribute	Description	Type	Default
contentTextAlign	content-text-align	This is an optional prop. Text-align of the content	"center" \| "left" \| "right"	undefined
dataClassName	data-class-name	An optional prop for the class of the root element.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	dhl-copy-text-${getRandomString()}
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
hasTwoColumns	has-two-columns	This is an optional prop. Defines if the content is displayed in two columns in certain viewport widths; defaults to false	boolean	undefined
headlineColor	headline-color	This is an optional prop. Color of the headline	"black" \| "default" \| "red" \| "white"	DHL_COPY_TEXT.HEADLINE_COLOR.BLACK
headlineLevel	headline-level	This is an optional prop. Defines which font sizes and line heights are used	1 \| 2 \| 3 \| 4 \| 5	DHL_COPY_TEXT.HEADLINE_LEVEL[3]
headlineTag	headline-tag	This is an optional prop. Defines which headline tag to use. (h1-h6) defaults to H3. For a special case in which the element should not appear semantically as a headline; but should still get rendered in the same layout; it can additionally be rendered as a <p> tag.	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p"	DHL_COPY_TEXT.HEADLINE_TAG.H3
headlineTextAlign	headline-text-align	This is an optional prop. Text-align of the headline	"center" \| "left" \| "right"	undefined
headlineTextTransform	headline-text-transform	This is an optional prop. Text-transform state of the headline	"capitalize" \| "lowercase" \| "none" \| "uppercase"	DHL_COPY_TEXT.HEADLINE_TEXT_TRANSFORM.NONE

Slots

Slot	Description
"headline"	used to supply Headline text
"unnamed"	unnamed children slot for CopyText content

Dependencies

Depends on

• dhl-grid-container
• dhl-grid-cell
• dhl-headline

Graph

---

Built by DHL User Interface Library Team!