Hero Block Stable Dark theme

The Hero Block works well for a conspicuous entrance, for example, on product pages or special topic detail pages where the content starts with one hero image.

Usage Code

<uimc-hero-block
  headline="Title"
>
  <img src="/ui-marcom/version/3.1" alt="" />
</uimc-hero-block>

Attribute	Description	Values	Default
headline	Text of the big headline		–
subheadline	Text of the sub headline		–
introduction-text	Text below the Hero Block		–
theme	Optionally choose white background color	`dark`, `light`	`dark`

Slot	Slotted content
default	The slot is solely intended for an `<img>`

Standard hero block

<uimc-hero-block
  headline="A Hero Block"
  subheadline="Introducing a page with a hero image"
  introduction-text="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et quae eum laboriosam animi modi repellat maiores debitis, necessitatibus deleniti at veniam perferendis ratione a distinctio nisi laborum voluptatem."
>
  <img src="/ui-marcom/version/3.1/assets/img/keyvisuals/keyvisual_ld.jpg" alt="" />
</uimc-hero-block>

White hero block

<uimc-hero-block
  headline="A Hero Block"
  subheadline="Introducing a page with a hero image"
  introduction-text="Lorem ipsum, dolor sit amet consectetur adipisicing elit. Et quae eum laboriosam animi modi repellat maiores debitis, necessitatibus deleniti at veniam perferendis ratione a distinctio nisi laborum voluptatem."
  theme="light"
>
  <img src="/ui-marcom/version/3.1/assets/img/aspect-ratios/di_ct_hero-image-04947279_7.jpg" alt="" />
</uimc-hero-block>