Footer Ready

<style>
  duet-footer::part(top) {
    gap: 250px;
    align-items: flex-start;
  }
</style>


<duet-footer id="duet-footer_footer_with_additional_info" logo-href="/" language="fi" class="duet-example-without-padding">
  <div slot="info">Additional info</div>
</duet-footer>

<script>
  (function(){
    // Select the above footer component
    var footer = document.querySelector("#duet-footer_footer_with_additional_info")

    // Set the main links in footer
    footer.items = [
      { label: "Osta vakuutus", icon: "action-buy-insurance", hideArrow: true },
      { label: "Yhteystiedot", icon: "form-tel", hideArrow: true },
    ]

    // Set the help menu items in footer
    footer.menu = [
      { label: "Turvallisuus ja käyttöehdot", href: "#" },
      { label: "Evästeet", href: "#" },
      { label: "Henkilötietojen käsittely", href: "#" },
    ]

    // Listen for clicks on footer items
    footer.addEventListener("duetItemClick", function (e) {
      console.log("Item clicked:", e.detail)
      var event = e.detail.originalEvent
      var data = e.detail.data
      event.preventDefault()
    })

    // Listen for clicks on footer menu
    footer.addEventListener("duetMenuClick", function (e) {
      console.log("Menu clicked:", e.detail)
      var event = e.detail.originalEvent
      var data = e.detail.data
      event.preventDefault()
    })

    // Listen for clicks on the logo
    footer.addEventListener("duetLogoClick", function (e) {
      console.log("Logo clicked:", e.detail)
      var event = e.detail.originalEvent
      var data = e.detail.data
      event.preventDefault()
    })

    // duet events
    footer.addEventListener("duetEvent", function (e) {
      console.log("Duet event:", e.detail)
    })
  }())

</script>