Hero

In progress

The element is used on channel landing pages at the top of the page (ie. pages accessible from 1st level navigation). The element is tailored to each breakpoint. The components of the element are a1) coloured content area, 2) picture, 3) overflowing text items and 4) a CTA-button Content producers have the option to select element colour from a preselected range (initial colours blue and white).

Hero element has several variations. The type of variation is passed via heroType property.

front_page: Front page hero is used as the only hero option in a front page of the site. It has three color variations.
landing: This hero variation is used on landing pages at the top of the page (ie. pages situated at level 2 in site hierarchy, front page being the level 1). Landing page hero can contain an array of shortcut links. Links are manually added by admin. The number of shortcut links can vary between 3-6.
minor_landing: The hero variant is used on landing pages that are situated on level 3 and below in site hierarchy (front page being the level 1). Landing page hero can contain an array of shortcut links. Links are manually added by admin. The number of shortcut links can vary between 3-6.

Hero on the Research Group main page has the type of minor_landing but is rendered slightly different. The property heroGroupType of value "research_group" should be passed to the element in this case.

# Example of Front page Hero

undefined

<hy-hero 
hero-type="front_page" 
color-variant="fp_white" 
image="https://www.helsinki.fi/assets/drupal/styles/hero_image_wide/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=C5s7JlyZ"
source-set="[{&quot;src&quot;:&quot;https://www.helsinki.fi/assets/drupal/styles/hero_image/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=-mk2uZ4k 1040w&quot;,&quot;media&quot;:&quot;all and (min-width: 1200px)&quot;,&quot;type&quot;:&quot;image/png&quot;,&quot;sizes&quot;:&quot;65vw&quot;},{&quot;src&quot;:&quot;https://www.helsinki.fi/assets/drupal/styles/hero_image_wide/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=C5s7JlyZ 1x&quot;,&quot;media&quot;:&quot;all and (min-width: 960px)&quot;,&quot;type&quot;:&quot;image/png&quot;},{&quot;src&quot;:&quot;https://www.helsinki.fi/assets/drupal/styles/hero_image_tablet/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=A4YGkKpU 1x, https://www.helsinki.fi/assets/drupal/styles/hero_image_wide/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=C5s7JlyZ 2x&quot;,&quot;media&quot;:&quot;all and (min-width: 768px) and (max-width: 959px)&quot;,&quot;type&quot;:&quot;image/png&quot;},{&quot;src&quot;:&quot;https://www.helsinki.fi/assets/drupal/styles/hero_image_mobile/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=glv-Bbg- 1x, https://www.helsinki.fi/assets/drupal/styles/hero_image_tablet/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=A4YGkKpU 2x&quot;,&quot;media&quot;:&quot;all and (min-width: 480px) and (max-width: 767px)&quot;,&quot;type&quot;:&quot;image/png&quot;},{&quot;src&quot;:&quot;https://www.helsinki.fi/assets/drupal/styles/hero_image_mobile/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=glv-Bbg- 1x, /assets/drupal/styles/hero_image_tablet/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=A4YGkKpU 2x&quot;,&quot;media&quot;:&quot;(min-width: 0px)&quot;,&quot;type&quot;:&quot;image/png&quot;}]" 
heading="Thinkers thrive" 
description="Pursuit of the new is not achieved by constant movement. Create meaningful growth in your career with an insightful pause." 
url="https://www.helsinki.fi/en/admissions-and-education/continuous-learning" 
url-title="Choose from over 1,000 courses and expand your expertise" 
is-external="false" class="hydrated">
</hy-hero>

# Example of Landing page Hero

undefined

<hy-hero 
hero-type="landing" 
color-variant="white" 
image="https://www.helsinki.fi/assets/drupal/styles/hero_image_wide/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=C5s7JlyZ"
source-set="[{&quot;src&quot;:&quot;https://www.helsinki.fi/assets/drupal/styles/hero_image/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=-mk2uZ4k 1040w&quot;,&quot;media&quot;:&quot;all and (min-width: 1200px)&quot;,&quot;type&quot;:&quot;image/png&quot;,&quot;sizes&quot;:&quot;65vw&quot;},{&quot;src&quot;:&quot;https://www.helsinki.fi/assets/drupal/styles/hero_image_wide/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=C5s7JlyZ 1x&quot;,&quot;media&quot;:&quot;all and (min-width: 960px)&quot;,&quot;type&quot;:&quot;image/png&quot;},{&quot;src&quot;:&quot;https://www.helsinki.fi/assets/drupal/styles/hero_image_tablet/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=A4YGkKpU 1x, https://www.helsinki.fi/assets/drupal/styles/hero_image_wide/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=C5s7JlyZ 2x&quot;,&quot;media&quot;:&quot;all and (min-width: 768px) and (max-width: 959px)&quot;,&quot;type&quot;:&quot;image/png&quot;},{&quot;src&quot;:&quot;https://www.helsinki.fi/assets/drupal/styles/hero_image_mobile/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=glv-Bbg- 1x, https://www.helsinki.fi/assets/drupal/styles/hero_image_tablet/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=A4YGkKpU 2x&quot;,&quot;media&quot;:&quot;all and (min-width: 480px) and (max-width: 767px)&quot;,&quot;type&quot;:&quot;image/png&quot;},{&quot;src&quot;:&quot;https://www.helsinki.fi/assets/drupal/styles/hero_image_mobile/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=glv-Bbg- 1x, /assets/drupal/styles/hero_image_tablet/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=A4YGkKpU 2x&quot;,&quot;media&quot;:&quot;(min-width: 0px)&quot;,&quot;type&quot;:&quot;image/png&quot;}]" 
heading="Thinkers thrive" 
description="Learning something new starts with thinking. Thinking starts with challenging yourself." 
url="https://www.helsinki.fi/en/admissions-and-education/continuous-learning" 
url-title="Choose from over 1,000 courses and expand your expertise" 
is-external="false" class="hydrated">
</hy-hero>

# Example of Minor landing page Hero

undefined

<hy-hero 
hero-type="minor_landing" 
color-variant="" 
image="https://www.helsinki.fi/assets/drupal/styles/hero_image_wide/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=C5s7JlyZ"
source-set="[{&quot;src&quot;:&quot;https://www.helsinki.fi/assets/drupal/styles/hero_image/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=-mk2uZ4k 1040w&quot;,&quot;media&quot;:&quot;all and (min-width: 1200px)&quot;,&quot;type&quot;:&quot;image/png&quot;,&quot;sizes&quot;:&quot;65vw&quot;},{&quot;src&quot;:&quot;https://www.helsinki.fi/assets/drupal/styles/hero_image_wide/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=C5s7JlyZ 1x&quot;,&quot;media&quot;:&quot;all and (min-width: 960px)&quot;,&quot;type&quot;:&quot;image/png&quot;},{&quot;src&quot;:&quot;https://www.helsinki.fi/assets/drupal/styles/hero_image_tablet/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=A4YGkKpU 1x, https://www.helsinki.fi/assets/drupal/styles/hero_image_wide/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=C5s7JlyZ 2x&quot;,&quot;media&quot;:&quot;all and (min-width: 768px) and (max-width: 959px)&quot;,&quot;type&quot;:&quot;image/png&quot;},{&quot;src&quot;:&quot;https://www.helsinki.fi/assets/drupal/styles/hero_image_mobile/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=glv-Bbg- 1x, https://www.helsinki.fi/assets/drupal/styles/hero_image_tablet/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=A4YGkKpU 2x&quot;,&quot;media&quot;:&quot;all and (min-width: 480px) and (max-width: 767px)&quot;,&quot;type&quot;:&quot;image/png&quot;},{&quot;src&quot;:&quot;https://www.helsinki.fi/assets/drupal/styles/hero_image_mobile/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=glv-Bbg- 1x, /assets/drupal/styles/hero_image_tablet/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=A4YGkKpU 2x&quot;,&quot;media&quot;:&quot;(min-width: 0px)&quot;,&quot;type&quot;:&quot;image/png&quot;}]" 
heading="Thinkers thrive" 
description="Learning something new starts with thinking. Thinking starts with challenging yourself." 
url="https://www.helsinki.fi/en/admissions-and-education/continuous-learning" 
url-title="Choose from over 1,000 courses and expand your expertise" 
size-variant="large"
is-external="false" class="hydrated">
</hy-hero>

# Example of Research Group main page Hero

undefined

<hy-hero 
hero-type="minor_landing" 
hero-group-type="research_group" 
color-variant="" 
image="https://www.helsinki.fi/assets/drupal/styles/hero_image_wide/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=C5s7JlyZ"
source-set="[{&quot;src&quot;:&quot;https://www.helsinki.fi/assets/drupal/styles/hero_image/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=-mk2uZ4k 1040w&quot;,&quot;media&quot;:&quot;all and (min-width: 1200px)&quot;,&quot;type&quot;:&quot;image/png&quot;,&quot;sizes&quot;:&quot;65vw&quot;},{&quot;src&quot;:&quot;https://www.helsinki.fi/assets/drupal/styles/hero_image_wide/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=C5s7JlyZ 1x&quot;,&quot;media&quot;:&quot;all and (min-width: 960px)&quot;,&quot;type&quot;:&quot;image/png&quot;},{&quot;src&quot;:&quot;https://www.helsinki.fi/assets/drupal/styles/hero_image_tablet/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=A4YGkKpU 1x, https://www.helsinki.fi/assets/drupal/styles/hero_image_wide/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=C5s7JlyZ 2x&quot;,&quot;media&quot;:&quot;all and (min-width: 768px) and (max-width: 959px)&quot;,&quot;type&quot;:&quot;image/png&quot;},{&quot;src&quot;:&quot;https://www.helsinki.fi/assets/drupal/styles/hero_image_mobile/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=glv-Bbg- 1x, https://www.helsinki.fi/assets/drupal/styles/hero_image_tablet/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=A4YGkKpU 2x&quot;,&quot;media&quot;:&quot;all and (min-width: 480px) and (max-width: 767px)&quot;,&quot;type&quot;:&quot;image/png&quot;},{&quot;src&quot;:&quot;https://www.helsinki.fi/assets/drupal/styles/hero_image_mobile/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=glv-Bbg- 1x, /assets/drupal/styles/hero_image_tablet/s3/media-image/HY_kuvat_verkkoon_1744x1090_TEKSTITO%CC%88N.png?h=6ed13397&amp;itok=A4YGkKpU 2x&quot;,&quot;media&quot;:&quot;(min-width: 0px)&quot;,&quot;type&quot;:&quot;image/png&quot;}]" 
heading="Old empires" 
description="Centres of Excellence 2018-25" 
url="https://www.helsinki.fi/en/admissions-and-education/continuous-learning" 
url-title="Check our latest publications" 
size-variant="large"
is-external="false" class="hydrated">
</hy-hero>

# Properties

Property	Attribute	Description	Type	Default
`colorVariant`	`color-variant`		`HeroColorVariant.black \\| HeroColorVariant.blue \\| HeroColorVariant.fp_white \\| HeroColorVariant.white`	`HeroColorVariant.blue`
`description`	`description`	Text description	`string`	`undefined`
`disableLazy`	`disable-lazy`		`boolean`	`false`
`hasShortcuts`	`has-shortcuts`		`boolean`	`false`
`headerstyle`	`headerstyle`		`string`	`'common'`
`heading`	`heading`	Main title of hero	`string`	`undefined`
`heroGroupType`	`hero-group-type`		`HeroGroupTypeVariant.default \\| HeroGroupTypeVariant.research`	`HeroGroupTypeVariant.default`
`heroType`	`hero-type`		`HeroTypeVariant.front_page \\| HeroTypeVariant.landing \\| HeroTypeVariant.minor_landing`	`HeroTypeVariant.landing`
`image`	`image`		`string`	`undefined`
`isExternal`	`is-external`		`boolean`	`false`
`scLabel`	`sc-label`		`string`	`undefined`
`sizeVariant`	`size-variant`		`HeroSizeVariant.large \\| HeroSizeVariant.small`
`sourceSet`	`source-set`		`ImageSrcSet[] \\| string`	`undefined`
`url`	`url`		`string`	`undefined`
`urlTitle`	`url-title`		`string`	`undefined`

# Dependencies

# Depends on

Helsinki University Design System

← Heading Icons →