GlobalIllustratedValidation

The GlobalIllustratedValidation is used to compose validation message views. Additional views can be added below the subHeadline as children.

Import

React

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

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

Angular

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

<dhl-global-illustrated-validation></dhl-global-illustrated-validation>

Vue.js

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

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

Code

React

<DhlIllustratedValidation 
  headlineText="Thank you!"
  headlineTag="h1"
  subHeadlineText="Your message was sent successfully"
  subHeadlineTag="h2"
  alt="An envelope with confetti"
  message="lorem ipsum"
  src="">  
  <DhlButton>
    Action
  </DhlButton>
</DhlIllustratedValidation>

Angular

<dhl-illustrated-validation 
  headlineText="Thank you!"
  headlineTag="h1" 
  subHeadlineText="Your message was sent successfully"
  subHeadlineTag="h2"
  alt="An envelope with confetti"
  message="lorem ipsum"
  src="">  
  <dhl-button>
    Action
  </dhl-button>
</dhl-illustrated-validation>

Vue.js

<dhl-illustrated-validation 
  headlineText="Thank you!"
  headlineTag="h1"
  subHeadlineText="Your message was sent successfully"
  subHeadlineTag="h2"
  alt="An envelope with confetti"
  message="lorem ipsum"
  src="">  
  <dhl-button>
    Action
  </dhl-button>
</dhl-illustrated-validation>

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
alt (required)	alt	A REQUIRED prop used to specify the alt text within the component.	string	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-illustrated-validation-${getRandomString()}
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
headlineTag	headline-tag	This is an optional prop. Defines which headline tag to use. (h1-h6) defaults to H1. 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_ILLUSTRATED_VALIDATION.HEADLINE_TAG.H1
headlineText	headline-text	An optional prop used to set the headline text	string	undefined
message	message	An optional prop used to set the validation message	string	undefined
src	src	An optional prop used to specify the image source.	string	undefined
subHeadlineTag	sub-headline-tag	An optional prop used to set the heading tag of the subHeadline.	"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "p"	DHL_ILLUSTRATED_VALIDATION.SUBHEADLINE_TAG.H2
subHeadlineText	sub-headline-text	An optional prop used to set the subHeadline text	string	undefined

Slots

Slot	Description
"unnamed"	unnamed children slot for DhlIllustratedValidation content inc. a call to action

Dependencies

Depends on

• dhl-icon-wrapper
• dhl-icon
• dhl-headline
• dhl-text

Graph

---

Built by DHL User Interface Library Team!