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
  id="duet-hero_default_hero"
  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="#"
  >
  <div slot="heading">Laskut</div>
</duet-hero>

<script>
  (function(){
    // Select the above hero area component
    var hero = document.querySelector("#duet-hero_default_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
  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
  >
  <div slot="heading">Eläinvakuutus. Vaivattomasti. Vain muutamassa minuutissa.</div>
</duet-hero>

Open in new window

<duet-hero
  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"
  >
  <div slot="heading">Eläinvakuutus</div>
</duet-hero>

Open in new window

<duet-hero
  id="duet-hero_gray_hero_area_with_meta_data_and_actions"
  variation="gray"
  category-icon="category-car"
  category-icon-color="category-vehicle"
  >
  <div slot="heading">Ajoneuvovakuutus</div>
</duet-hero>

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

    // 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
  id="duet-hero_gray_hero_area_utilizing_pre-heading"
  pre-heading="LähiTapiola Sijoitusvakuutus"
  variation="gray"
  category-icon="category-finance"
  category-icon-color="category-finance"
  >
  <div slot="heading">Laura Mäkinen</div>
</duet-hero>

<script>
  (function(){
    // Select the above hero area
    var hero = document.querySelector("#duet-hero_gray_hero_area_utilizing_pre-heading")

    // 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
  id="duet-hero_gray_hero_area_with_meta_data_but_without_back_button"
  variation="gray"
  category-icon="category-finance"
  category-icon-color="category-finance"
  >
  <div slot="heading">Laura Mäkinen</div>
</duet-hero>

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

    // 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
  id="duet-hero_gray_hero_area_with_meta_data_but_without_actions"
  variation="gray"
  category-icon="category-finance"
  category-icon-color="category-finance"
  >
  <div slot="heading">Laura Mäkinen</div>
</duet-hero>

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

    // 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
  id="duet-hero_hero_area_with_a_badge"
  pre-heading="Sijoitusvakuutus"
  variation="gray"
  category-icon="category-finance"
  category-icon-color="category-finance"
  >
  <div slot="heading">Laura Mäkinen</div>
  <duet-badge slot="badge">Uusi</duet-badge>
</duet-hero>

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

    // 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
  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="#"
  >
  <div slot="heading">LähiTapiola Meklarit</div>
</duet-hero>

Open in new window

<duet-hero
  text-center
  description="Tällä sivulla näet vakuutuksiisi liittyvät laskut. Voit myös
    vaihtaa e-laskutukseen klikkaamalla&nbsp;alta."
  >
  <div slot="heading">Laskut</div>
</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
  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" }
  ]'
>
  <div slot="heading">Ajoneuvovakuutus</div>
</duet-hero>

Open in new window

<style>
.duet-theme-turva duet-hero duet-button[variation="plain"] {
  display: none;
}
duet-hero duet-button[variation="primary"] {
  display: none;
}
.duet-theme-turva duet-hero duet-button[variation="primary"] {
  display: inline-flex;
}
</style>

<duet-hero
  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.">
  <div slot="heading">Laskut</div>
  <duet-button variation="plain" negative fixed icon-size="medium-small" external url="http://www.duetds.com"> Plain button </duet-button>
  <duet-button theme="turva" variation="primary" negative fixed icon-size="medium-small" external url="http://www.duetds.com"> Plain button </duet-button>
</duet-hero>

Open in new window

<duet-hero
  description="Lorem ipsum dolor sit amet consectetur. Dignissim et arcu sed dolor a rhoncus."
  image="https://www.duetds.com/assets/img/example-bg1.jpg"
    variation="campaign"
>
  <div slot="heading">Terveys ensin</div>
  <div slot="subheading">Varmista oma ja perheesi toimeentulo vahingon varalta</div>
  <duet-button variation="primary" margin="none">Tutustu terveysvakuutuksiin</duet-button>
</duet-hero>
<duet-layout margin="none" center>
  <div slot="main">
    <duet-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nam odio ac fusce blandit mauris. Egestas arcu ac auctor cursus arcu tellus mattis turpis. Proin egestas imperdiet donec et risus adipiscing. Vestibulum nisl maecenas sapien, placerat in. Malesuada facilisis ut faucibus felis. Aliquet rhoncus egestas fringilla egestas.</duet-paragraph>
    <duet-heading level="h4">Heading H4</duet-heading>
    <duet-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nam odio ac fusce blandit mauris. Egestas arcu ac auctor cursus arcu tellus mattis turpis. Proin egestas imperdiet donec et risus adipiscing. Vestibulum nisl maecenas sapien, placerat in. Malesuada facilisis ut faucibus felis. Aliquet rhoncus egestas fringilla egestas.</duet-paragraph>
  </div>
</duet-layout>

Open in new window

<duet-hero
  description="Lorem ipsum dolor sit amet consectetur. Dignissim et arcu sed dolor a rhoncus."
  image="https://www.duetds.com/assets/img/example-bg1.jpg"
    variation="section"
>
  <div slot="heading">Vakuutukset</div>
  <div slot="subheading">Nyt 20% alennus opiskelijan kotivakuutuksesta</div>
  <duet-button variation="primary" margin="none">Kotivakuutus opiskelijalle</duet-button>
</duet-hero>
<duet-layout margin="none" center>
  <div slot="main">
    <duet-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nam odio ac fusce blandit mauris. Egestas arcu ac auctor cursus arcu tellus mattis turpis. Proin egestas imperdiet donec et risus adipiscing. Vestibulum nisl maecenas sapien, placerat in. Malesuada facilisis ut faucibus felis. Aliquet rhoncus egestas fringilla egestas.</duet-paragraph>
    <duet-heading level="h4">Heading H4</duet-heading>
    <duet-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nam odio ac fusce blandit mauris. Egestas arcu ac auctor cursus arcu tellus mattis turpis. Proin egestas imperdiet donec et risus adipiscing. Vestibulum nisl maecenas sapien, placerat in. Malesuada facilisis ut faucibus felis. Aliquet rhoncus egestas fringilla egestas.</duet-paragraph>
  </div>
</duet-layout>

Open in new window

<duet-hero
  description="Kotivakuutus on erityisen tärkeä nuorelle ja opiskelijalle. Vaikka omaisuutta ei ole kertynyt paljoa, on se tärkeää turvata vahinkojen varalta."
  image="https://www.duetds.com/assets/img/example-brand1.png"
    variation="product"
  category-icon="category-apartment"
  layout="fluid"
  left-align
>
  <div slot="heading">Kotivakuutus opiskelijalle</div>
  <duet-input type="text" label="Asuinpinta-ala" debounce="500" margin="none"></duet-input>
  <duet-spacer direction="horizontal"></duet-spacer>
  <duet-button variation="primary" margin="none">Laske hinta</duet-button>
  <duet-spacer></duet-spacer>
</duet-hero>
<duet-layout margin="none">
  <div slot="main">
    <duet-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nam odio ac fusce blandit mauris. Egestas arcu ac auctor cursus arcu tellus mattis turpis. Proin egestas imperdiet donec et risus adipiscing. Vestibulum nisl maecenas sapien, placerat in. Malesuada facilisis ut faucibus felis. Aliquet rhoncus egestas fringilla egestas.</duet-paragraph>
    <duet-heading level="h4">Heading H4</duet-heading>
    <duet-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nam odio ac fusce blandit mauris. Egestas arcu ac auctor cursus arcu tellus mattis turpis. Proin egestas imperdiet donec et risus adipiscing. Vestibulum nisl maecenas sapien, placerat in. Malesuada facilisis ut faucibus felis. Aliquet rhoncus egestas fringilla egestas.</duet-paragraph>
  </div>
</duet-layout>

Open in new window

<duet-hero
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mauris integer non sed viverra. Ultricies in ut neque id proin justo interdum sed. Tortor id suspendisse quis a aliquet tempus parturient cursus pretium. At nisl volutpat diam habitant elementum."
  image="https://www.duetds.com/assets/img/example-brand1.png"
    variation="content"
  left-align
  layout="narrow"
>
  <span slot="pre-heading" style="display: inline-flex; align-items: center; justify-content: center;">
    Työelämä
    <span
      style="display: inline-block; width: 3px; height: 3px; border-radius: 100%; background: #0077B3; margin: 0 0.25rem;"
    ></span>
    21.3.2023
  </span>
  <div slot="heading">Lorem ipsum dolor sit</div>
  <duet-button variation="plain"  icon="action-arrow-right" icon-right margin="none">Link to service</duet-button>
  <duet-spacer direction="horizontal"></duet-spacer>
  <duet-button variation="plain"  icon="action-arrow-right" icon-right margin="none">Link to service</duet-button>
  <duet-spacer direction="horizontal"></duet-spacer>
  <duet-button variation="plain"  icon="action-arrow-right" icon-right margin="none">Link to service</duet-button>
</duet-hero>
<duet-layout margin="none" center>
  <div slot="main">
    <duet-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nam odio ac fusce blandit mauris. Egestas arcu ac auctor cursus arcu tellus mattis turpis. Proin egestas imperdiet donec et risus adipiscing. Vestibulum nisl maecenas sapien, placerat in. Malesuada facilisis ut faucibus felis. Aliquet rhoncus egestas fringilla egestas.</duet-paragraph>
    <duet-heading level="h4">Heading H4</duet-heading>
    <duet-paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut nam odio ac fusce blandit mauris. Egestas arcu ac auctor cursus arcu tellus mattis turpis. Proin egestas imperdiet donec et risus adipiscing. Vestibulum nisl maecenas sapien, placerat in. Malesuada facilisis ut faucibus felis. Aliquet rhoncus egestas fringilla egestas.</duet-paragraph>
  </div>
</duet-layout>

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`	[DEPRECATED] please use heading slot instead. 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. For normal hero areas 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`	`""`
`imagePosition`	`image-position`	Image position.	`"auto" \| "center"`	`"auto"`
`imageSize`	`image-size`	Image sizing.	`"auto" \| "cover"`	`"auto"`
`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()`
`layout`	`layout`	Layout.	`"fluid" \| "narrow"`	`"narrow"`
`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`	`""`
`subHeadingLevel`	`sub-heading-level`	The level of the heading. Only usable with campaign, section variations.	`"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"`	`"h2"`
`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.	`"campaign" \| "content" \| "default" \| "gray" \| "image" \| "light" \| "minimal" \| "product" \| "section"`	`"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.
`"bottom"`	This is a slot for content under the main hero content.
`"default"`	This is an unamed slot for a text or extra button that is placed after any buttons (or list item)
`"heading"`	This is a slot for heading content inside the hero component. Only span should be used in this slot.
`"pre-heading"`	This is a slot for pre-heading content inside the hero component. Only usable with gray variation. Only span should be used in this slot.
`"subheading"`	This is a slot for heading content inside the hero component. Only usable with campaign, section variations. Only span should be used in this slot.

Shadow Parts #

Part	Description
`"duet-hero"`	piercing selector for styling the hero container
`"duet-hero-text"`	piercing selector for styling the hero text container

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.
`product`	Use with caution as this variation is still in development. Hero variation for presenting products. The image should be at least 1920px in length and 1080px in height. You can also use other images but test how that works before going to production with it.
`campaign`	Use with caution as this variation is still in development. Hero variation for campaigns or homepages where a big landscape image is wanted. The image should be at least 1600px in length and 645px in height. You can also use other images but test how that works before going to production with it.
`section`	Use with caution as this variation is still in development. Hero variation for section pages where a big landscape image is wanted. The image should be at least 1600px in length and 645px in height. You can also use other images but test how that works before going to production with it.
`content`	Use with caution as this variation is still in development. Hero variation for content pages. The image should be at least 1920px in length and 1080px in height. You can also use other images but test how that works before going to production with it.

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.

Hero component uses role="region" to convey its semantic meaning to assistive technologies.
heading property can be used to give the Hero a h1 level heading. Depending on the need you can adjust this level with level property to be something else.

Additional considerations #

The height of the hero is determined by the amount of text within it.
The width of the displayed image should be 800px when using “light” variation. Optimal aspect ratio is 3:2.
When using “image” variation of Hero the required image size is 1200x1200px (1:1 ratio).
When using images in Hero, try to always keep the image file size below 150Kb (0.15Mb). To achieve this, use the above provided image sizes and export from Sketch as a JPG file. After exporting, optimize the JPG file using ImageOptim using the following settings:

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

Troubleshooting

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

Hero Area Ready

Examples #

Properties #

Events #

Slots #

Shadow Parts #

Usage #

When to use #

When not to use #

Variations #

Accessibility #

Additional considerations #

Integration

Tutorials

Building Layouts

Using CLI Tools

Creating Custom Patterns

Server Side Rendering

Sharing Prototypes

Usage With Markdown

Troubleshooting