UI MarCom 3

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.

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

AttributeDescriptionValuesDefault
headlineText of the big headline
subheadlineText of the sub headline
introduction-textText below the Hero Block
themeOptionally choose white background colordark, lightdark

SlotSlotted content
defaultThe 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/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/assets/img/aspect-ratios/di_ct_hero-image-04947279_7.jpg" alt="" />
</uimc-hero-block>