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/lt-billing.png"
  button-label="Vaihda e-laskutukseen"
  button-url="#"
  class="duet-example-without-padding">
</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(ev) {
    var event = ev.detail.originalEvent
    var data = ev.detail.data
    event.preventDefault()
    console.log(data)
  })
</script>

Open in new window

<duet-hero
  heading="Eläinvakuutus. Vaivattomasti. Vain muutamassa minuutissa."
  image="https://www.duetds.com/assets/img/illustrations/lt-pet-insurance.png"
  button-label="Aloita tästä"
  variation="light"
  button-url="#"
  icon="navigation-arrow-down"
  icon-right
  class="duet-example-without-padding">
</duet-hero>

Properties #

Property	Attribute	Description	Type	Default
`buttonData`	--	An object that includes any data you want to pass to the button. This data will be emitted when the button is clicked.	`object`	`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`	`"#"`
`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. Can be on of: "medium", "large".	`string`	`"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. If empty, image will be hidden.	`string`	`""`
`level`	`level`	The level of the heading. Can be one of: "h1", "h2", "h3", "h4", "h5", "h6".	`string`	`"h1"`
`margin`	`margin`	Controls the margin of the component. Can be one of: "auto", "none".	`string`	`"auto"`
`navDistance`	`nav-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".	`string`	`"none"`
`theme`	`theme`	Theme of the hero area. Can be one of: "default", "turva".	`string`	`""`
`variation`	`variation`	Style variation of the hero area. Can be one of: "default", "light".	`string`	`"default"`

Events #

Event	Description	Type
`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<any>`

Dependencies #

Depends on #

Graph #

graph TD;
  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, events and theming guidelines, please see Using Components. That page explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.