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

<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>

<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>

<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>

<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>

<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 #

Events #

Dependencies #

Depends on #

• duet-icon
• duet-heading
• duet-paragraph
• duet-button

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:

Troubleshooting

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