What’s new Get help Sign in Color blind mode Low vision mode

Hero Area
Ready

When placed at the top of the page hero areas are often the first thing user sees, making them a great place to catch user’s attention with catchy content.

Hero areas can include an illustration in addition to a title, a description, and an action button. Please note that this component takes care of its top and bottom spacing so there should be no need to write custom CSS.

Examples
Open in new window 
<duet-hero
  heading="Laskut"
  description="Tällä sivulla näet vakuutuksiisi liittyvät laskut. Voit myös
    vaihtaa e-laskutukseen klikkaamalla&nbsp;alta."
  image="https://cdn.duetds.com/api/assets/illustrations/placeholder-light.svg"
  button-label="Vaihda e-laskutukseen"
  button-url="#"
  >
</duet-hero>

<script>
  // Select the above hero area component
  var hero = document.querySelector("duet-hero")

  // Set meta data that is passed when the CTA button is clicked
  hero.buttonData = {
    type: "action",
    message: "Hello World!",
  }

  // Listen for click events in the CTA button inside hero area
  hero.addEventListener("duetClick", function (e) {
    var event = e.detail.originalEvent
    event.preventDefault()
    console.log("Click detected in hero area:", e.detail)
  })
</script>
Open in new window 
<duet-hero
  heading="Eläinvakuutus. Vaivattomasti. Vain muutamassa minuutissa."
  image="https://cdn.duetds.com/api/assets/illustrations/placeholder-dark.svg"
  button-label="Aloita tästä"
  variation="light"
  button-url="#"
  icon="navigation-arrow-down"
  icon-right
  >
</duet-hero>
Open in new window 
<duet-hero
  heading="Eläinvakuutus"
  description="Tarjouksemme on voimassa 21.3.2019 saakka. Vakuutuksen myöntämiseen
    vaikuttaa eläimen terveydentila ja sille voidaan asettaa rajoituksia
    terveystietojen perusteella. Huomaathan, että tarjous vaatii vielä hyväksynnän."
  image="https://cdn.duetds.com/api/assets/illustrations/placeholder-dark.svg"
  variation="gray"
  category-icon="category-pet"
  category-icon-color="color-category-pet"
  >
</duet-hero>
Open in new window 
<duet-hero
  heading="Ajoneuvovakuutus"
  variation="gray"
  category-icon="category-car"
  category-icon-color="category-vehicle"
  >
</duet-hero>

<script>
  // Select the above hero area
  var hero = document.querySelector("duet-hero")

  // Set the back button
  hero.back = {
    label: "Takaisin",
    href: "#",
    id: "back-button",
    analyticsId: "custom-analytics-id",
  }

  // Sets the list items in the hero
  hero.listItems = [
    { label: "Vakuutusnumero", value: "123454-678-899" },
    { label: "Vakuutuksenantaja", value: "LähiTapiola Pääkaupunkiseutu" },
  ]

  // Set the action links
  hero.actions = [
    { label: "Ilmoita vahingosta", href: "#", icon: "navigation-make-claim" },
    { label: "Päivitä vakuutusta", href: "#", icon: "action-edit-2" },
    { label: "Tee rekisteröintimuutos", href: "#", icon: "messaging-terms", external: true },
  ]

  // Listen for click events in the back button inside hero area
  hero.addEventListener("duetClick", function (e) {
    if (e.detail.data.id === "back-button") {
      e.detail.originalEvent.preventDefault()
      console.log("Click detected in hero area back button:", e.detail)
    }
  })
</script>
Open in new window 
<duet-hero
  pre-heading="LähiTapiola Sijoitusvakuutus"
  heading="Laura Mäkinen"
  variation="gray"
  category-icon="category-finance"
  category-icon-color="category-finance"
  >
</duet-hero>

<script>
  // Select the above hero area
  var hero = document.querySelector("duet-hero")

  // Set the back button
  hero.back = { label: "Takaisin", href: "#" }

  // Sets the list items in the hero
  hero.listItems = [
    { label: "Vakuutusnumero", value: "123454-678-899" },
    { label: "Vakuutuksenantaja", value: "LähiTapiola Pääkaupunkiseutu" },
  ]

  // Set the action links
  hero.actions = [
    { label: "Muuta sijoitussuunnitelmaa", href: "#", icon: "navigation-finance-change" },
    { label: "Tee säästönsiirto", href: "#", icon: "navigation-finance-transfer" },
    { label: "Tee säästönnosto", href: "#", icon: "navigation-finance-withdrawal" },
  ]
</script>
Open in new window 
<duet-hero
  heading="Laura Mäkinen"
  variation="gray"
  category-icon="category-finance"
  category-icon-color="category-finance"
  >
</duet-hero>

<script>
  // Select the above hero area
  var hero = document.querySelector("duet-hero")

  // Sets the list items in the hero
  hero.listItems = [
    { label: "Vakuutusnumero", value: "123454-678-899" },
    { label: "Vakuutuksenantaja", value: "LähiTapiola Pääkaupunkiseutu" },
  ]

  // Set the action links
  hero.actions = [
    { label: "Muuta sijoitussuunnitelmaa", href: "#", icon: "navigation-finance-change" },
    { label: "Tee säästönsiirto", href: "#", icon: "navigation-finance-transfer" },
    { label: "Tee säästönnosto", href: "#", icon: "navigation-finance-withdrawal" },
  ]
</script>
Open in new window 
<duet-hero
  heading="Laura Mäkinen"
  variation="gray"
  category-icon="category-finance"
  category-icon-color="category-finance"
  >
</duet-hero>

<script>
  // Select the above hero area
  var hero = document.querySelector("duet-hero")

  // Sets the list items in the hero
  hero.listItems = [
    { label: "Vakuutusnumero", value: "123454-678-899" },
    { label: "Vakuutuksenantaja", value: "LähiTapiola Pääkaupunkiseutu" },
    { label: "Vakuutuskausi", value: "00.00.2010 - 00.00.2019" },
  ]
</script>
Open in new window 
<duet-hero
  pre-heading="Sijoitusvakuutus"
  heading="Laura Mäkinen"
  variation="gray"
  category-icon="category-finance"
  category-icon-color="category-finance"
  >
  <duet-badge slot="badge">Uusi</duet-badge>
</duet-hero>

<script>
  // Select the above hero area
  var hero = document.querySelector("duet-hero")

  // Sets the list items in the hero
  hero.listItems = [
    { label: "Vakuutusnumero", value: "123454-678-899" },
    { label: "Vakuutuksenantaja", value: "LähiTapiola Pääkaupunkiseutu" },
  ]

  // Set the action links
  hero.actions = [
    { label: "Muuta sijoitussuunnitelmaa", href: "#", icon: "navigation-finance-change" },
    { label: "Tee säästönsiirto", href: "#", icon: "navigation-finance-transfer" },
    { label: "Tee säästönnosto", href: "#", icon: "navigation-finance-withdrawal" },
  ]
</script>
Open in new window 
<duet-hero
  heading="LähiTapiola Meklarit"
  description="Tarjoamme vakuutusmeklareille asiantuntevaa palvelua keskitetysti ja
    alueellisesti. Rekisteröi&shy;tyessäsi saat käyttöösi kattavat sähköiset
    asiantuntija&shy;palvelumme."
  image="https://cdn.duetds.com/api/assets/illustrations/placeholder-image.jpg"
  variation="image"
  button-label="Rekisteröidy käyttäjäksi"
  button-url="#"
  >
</duet-hero>
Open in new window 
<duet-hero
  heading="Laskut"
  text-center
  description="Tällä sivulla näet vakuutuksiisi liittyvät laskut. Voit myös
    vaihtaa e-laskutukseen klikkaamalla&nbsp;alta."
  >
</duet-hero>

<script>
  // Select the above hero area component
  var hero = document.querySelector("duet-hero")

  // Set meta data that is passed when the CTA button is clicked
  hero.buttonData = {
    type: "action",
    message: "Hello World!",
  }

  // Listen for click events in the CTA button inside hero area
  hero.addEventListener("duetClick", function (e) {
    var event = e.detail.originalEvent
    event.preventDefault()
    console.log("Click detected in hero area:", e.detail)
  })
</script>
Open in new window 
<duet-hero
  heading="Ajoneuvovakuutus"
  variation="gray"
  category-icon="category-car"
  category-icon-color="category-vehicle"
    back='{ "label": "Takaisin", "href": "#" }'
  list-items='[
    { "label": "Vakuutusnumero", "value": "123454-678-899" },
    { "label": "Vakuutuksenantaja", "value": "LähiTapiola Pääkaupunkiseutu" }
  ]'
  actions='[
    { "label": "Ilmoita vahingosta", "href": "#", "icon": "navigation-make-claim" },
    { "label": "Päivitä vakuutusta", "href": "#", "icon": "action-edit-2" },
    { "label": "Tee rekisteröintimuutos", "href": "#", "icon": "messaging-terms", "external": "true" }
  ]'
>
</duet-hero>
Open in new window 
<duet-hero
  heading="Laskut"
  image="https://cdn.duetds.com/api/assets/illustrations/placeholder-light.svg"
  button-label="Vaihda e-laskutukseen"
  button-url="/e-laskutus/"
  id="content"
  description="Tällä sivulla näet vakuutuksiisi liittyvät laskut. Voit myös
    vaihtaa e-laskutukseen klikkaamalla&nbsp;alta.">
  <duet-button variation="plain" negative fixed icon-size="medium-small" external url="http://www.duetds.com"> Plain button </duet-button>
</duet-hero>

Properties #

Property Attribute Description Type Default
accessibleLabelExternal accessible-label-external Adds accessible label for tooltip that is shown in external link (url & external have both been set) string getLocaleString(this.accessibleLabelExternalDefaults)
accessibleLabelExternalDefaults accessible-label-external-default Defaults for accessibleLabelExternal DuetLangObject | string DuetStringsExternalDefaults
actions actions An array of items for the main actions. Items have to include mandatory "label", "href" and "icon" fields to work. Additionally, you can pass an "id" that is added as an HTML identifier for the anchor tag. any undefined
back back An object that includes mandatory "label" and "href" fields for the back link. Additionally, you can pass an "id" that is added as an HTML identifier for the element. If nothing is passed, back link won’t be shown. NOTE: The back link can be ONLY used in combination with "gray" style variation. any undefined
buttonData -- An object that includes any data you want to pass to the button. This data will be emitted when the button is clicked. If property analyticsId is present, then a separate duetAnalytics event will be emitted. { [key: string]: any; analyticsId?: string; } undefined
buttonId button-id ID for the button. string ""
buttonLabel button-label Text label shown inside the button. If empty, button will be hidden. string ""
buttonUrl button-url URL that the button links to. string "#"
categoryIcon category-icon Icon to display to the left of the heading in gray hero area variation. If empty, icon will be hidden. string ""
categoryIconColor category-icon-color Icon color to use for the category icon that can be used in gray hero area variation. string "category-pet"
description description The description of the hero area, rendered in a P tag. If empty, description will be hidden. string ""
heading heading The heading of the hero area, rendered in an H1 tag. P.S. you can control the level of the HTML heading by using “level” prop. If empty, heading will be hidden. string ""
icon icon Icon to display to the left of the button content. If empty, icon will be hidden. string ""
iconRight icon-right Show icon on the right side of the button content. boolean false
iconSize icon-size Icon size for the button. "large" | "medium" "medium"
image image URL of the image shown inside the hero area. The width of the displayed image should be 800px. Optimal aspect ratio is 3:2. When using “image” variation of Hero Area the required image size is 1200x1200px (1:1 ratio). If this property is left empty, image will be hidden. string ""
language language [DEPRECATED] this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing

The currently active language. This setting changes the accessible labels to match the chosen language.		 "en" | "fi" | "sv" getLanguage()
leftAlign left-align Forces all items in the header to be leftAligned This can be used on mobiles to create leftAligned hero areas that either are only leftaligned on smaller devices or allways leftAligned (you must manually switch this parameter if you need special breakpoints) this nullifies textCenter prop boolean false
level level The level of the heading. "h1" | "h2" | "h3" | "h4" | "h5" | "h6" "h1"
listItems list-items An array of items for the definition list inside hero. Items have to include mandatory "label" and "value" fields to work. any undefined
preHeading pre-heading The headline shown before heading. string ""
textCenter text-center Centers the text in hero area. boolean false
theme theme Theme of the hero area. "" | "default" | "turva" ""
variation variation Style variation of the hero area. "default" | "gray" | "image" | "light" | "minimal" "default"

Events #

Event Description Type
duetAnalytics Event raised when an items with an associated analytics ID is clicked. Analytics ID can be accessed via event.detail.analyticsId CustomEvent<{ analyticsId: string; component: "duet-hero"; }>
duetClick Callback for when an user clicks the hero area's action button. You can prevent the default browser functionality by calling event.detail.originalEvent.preventDefault() inside your listener. Additionally, the passed data is available via event.detail.data. CustomEvent<{ originalEvent: Event; component: "duet-hero"; data: any; }>

Slots #

Slot Description
"badge" This is a slot for a status badge that sits next to pre-heading inside the hero component.
"default" This is an unamed slot for a text or extra button that is placed after any buttons (or list item)

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

When to use #

  • To catch user’s attention.
  • Usually the first thing user sees, making it a great place to explain what the page is about and to display a call-to-action.
  • To highlight insurance plan details and primary actions.

When not to use #

  • When you need to display long chunks of text.

Variations #

This section describes the different component variations, their purpose, and when to use each variation.

Name Purpose
default Default hero variation uses dark background with negative text on top. Most commonly used in our self service portal.
gray Gray hero variation uses gray background with dark text on top. Most commonly used on insurance detail pages.
image Image hero variation uses light gradient with dark text on top. This variations allows the usage of photography and is most commonly used for e.g. marketing purposes.
light Light hero variation is similar to “image” variation, but meant for illustrations that have transparent background.

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

Additional considerations #

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.

Integration guidelines

Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Building Layouts

 Tutorials

Using CLI Tools

 Tutorials

Creating Custom Patterns

 Tutorials

Server Side Rendering

 Tutorials

Sharing Prototypes

 Tutorials

Usage With Markdown

 Tutorials

VS Code

 Tutorials

Zeplin

Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.