Skip to main content

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. If you need to make it play nicely with Duet’s Navigation, use the navDistance property.

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://www.duetds.com/assets/img/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://www.duetds.com/assets/img/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://www.duetds.com/assets/img/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="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://www.duetds.com/assets/img/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>

Properties #

Property Attribute Description Type Default
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. { id?: string; href: string; label: string; } 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 ""
headerDistance header-distance Adjust hero area’s distance to duet navigation component using this property. Basically adds top margin that matches the sizing of Duet Navigation. Can be one of: "none", "with-links", "without-links". "none" or "with-links" or "without-links" "none"
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. Can be on of: "medium", "large". "large" or "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 ""
level level The level of the heading. Can be one of: "h1", "h2", "h3", "h4", "h5", "h6". "h1" or "h2" or "h3" or "h4" or "h5" or "h6" "h1"
margin margin Controls the margin of the component. Can be one of: "auto", "none". "auto" or "none" "auto"
navDistance nav-distance Deprecated and will be removed in the future releases. Use headerDistance instead! string ""
textCenter text-center Centers the text in hero area. boolean false
theme theme Theme of the hero area. Can be one of: "default", "turva". "" or "default" or "turva" ""
variation variation Style variation of the hero area. Can be one of: "default", "light", "gray", "image". "default" or "gray" or "image" or "light" "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 yout listener. Additionally, the passed data is available via event.detail.data. CustomEvent<{ originalEvent: Event; component: "duet-hero"; data: any; }>

Dependencies #

Depends on #

Graph #

graph TD;
duet-hero --> duet-icon
duet-hero --> duet-heading
duet-hero --> duet-paragraph
duet-hero --> duet-button
duet-button --> duet-spinner
style duet-hero fill:#f9f,stroke:#333,stroke-width:4px

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.



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


Troubleshooting

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