Legal Banner

Usage

source: ui.frontend/src/main/webpack/brands/common/components/content/legal-banner/scss/legal-banner.scss title: LegalBanner

Description

The component is designed to render a legal banner that meets national legal requirements. It generates and displays the banner based on the data provided through its props.

Component

Properties

Property	Web Component	React Component	Required
Title	data-title="string"	title="string"	Yes
Orientation	data-table-orientation="string"	orientation="string"	No
Finance	data-finance="{"image": "object", "finance":[string:string]}"	finance={"image": "object", "finance":[string:string]}	Yes
Component	data-component="legalBanner"	component="legalBanner"	Yes

Import

There are 2 posibilities when it comes to importing the component.

A React component called <LegalBanner/> which you can import as follows import LegalBanner from '@tmedxp/foundation/src/main/webpack/brands/common/components/content/legal-banner/legal-banner';
The Web component version <dxp-foundation-components/>

Jump to code examples

Images

The default image paths are:

/content/dam/{brand}/nmsc/{country}/legal-banner-image-mobile.jpg
/content/dam/{brand}/nmsc/{country}/legal-banner-image-desktop.jpg

If you wish to use custom images, you can provide both versions via the image prop.

The component automatically displays the mobile image on screens smaller than 1200px, and the desktop image on larger screens.

Table

Orientation

By default, the table is displayed vertically on screens below 1200px and horizontally above. However, you can override this behavior by using the orientation prop to enforce a fixed layout, regardless of screen size.

Data order

The table rows are rendered in the exact order in which the data is passed to the component. There is no internal sorting or reordering logic.

Code Examples

React component

<LegalBanner
  title="Disclaimer en rekenvoorbeeld"
  orientation="horizontal"
  finance={`{
    "image": {
      "mobile": {
        "imagePath": "https://scene7.toyota.eu/is/image/toyotaeurope/legal-banner-image-mobile?qlt=80&wid=525&fit=fit,1&ts=1729687746860&resMode=sharp2&op_usm=1.75,0.3,2,0&fmt=png-alpha",
        "altText": "legal-banner-image-mobile"
      },
      "desktop": {
        "imagePath": "https://scene7.toyota.eu/is/image/toyotaeurope/legal-banner-image-desktop?qlt=80&wid=1920&fit=fit,1&ts=1729687746858&resMode=sharp2&op_usm=1.75,0.3,2,0&fmt=png-alpha",
        "altText": "legal-banner-image-desktop"
      }
    },
    "finance": [
      {
        "Aanbetaling": "€ 9.099,-",
        "Aankoopprijs": "€ 25.995,-",
        "Debetrentevoet": "4,90 %",
        "Jaarlijkse kostenpercentage": "4,90 %",
        "Looptijd": "60 maand",
        "Maandbedrag": "€ 222,33",
        "Slottermijn": "€ 6.421,-",
        "Te financieren bedrag": "€ 16.896,-",
        "Totaal te betalen bedrag": "€ 19.760,80"
      },
      {
        "Aanbetaling": "€ 65.398,-",
        "Aankoopprijs": "€ 186.850,-",
        "Debetrentevoet": "8,00 %",
        "Jaarlijkse kostenpercentage": "8,00 %",
        "Looptijd": "60 maand",
        "Maandbedrag": "€ 1.813,71",
        "Slottermijn": "€ 46.152,-",
        "Te financieren bedrag": "€ 121.452,-",
        "Totaal te betalen bedrag": "€ 154.974,60"
      }
    ],
    "text": "* Het getoonde maandbedrag (termijnbedrag) is indicatief • Aan de berekening kunnen geen rechten worden ontleend • Vraag jouw dealer voor een berekening op maat • Dit niet-doorlopende krediet (Toyota Betaalplan) wordt aangeboden door Toyota Financial Services • Voor nieuw en occasions • Het rentetarief variabel en afhankelijk van het kredietbedrag • Financieren met een minimum kredietbedrag van € 2.500; maximum € 175.000 • Onder voorbehoud van kredietacceptatie • Toetsing en registratie bij BKR • Toyota Financial Services staat onder toezicht van de Autoriteit Financiële Markten (AFM-nr.: 12011089) • Voorwaarden van toepassing, zie lexus.nl/betaalplan • Wijzigingen en typefouten voorbehouden • particulier@toyotafs.nl"
  }`}
/>

Web Component

<dxp-foundation-components
  data-component="legalBanner"
  data-title="Disclaimer en rekenvoorbeeld"
  data-table-orientation="vertical"
  data-finance='{
    "image": {
      "mobile": {
        "imagePath": "https://scene7.toyota.eu/is/image/toyotaeurope/legal-banner-image-mobile?qlt=80&wid=525&fit=fit,1&ts=1729687746860&resMode=sharp2&op_usm=1.75,0.3,2,0&fmt=png-alpha",
        "altText": "legal-banner-image-mobile"
      },
      "desktop": {
        "imagePath": "https://scene7.toyota.eu/is/image/toyotaeurope/legal-banner-image-desktop?qlt=80&wid=1920&fit=fit,1&ts=1729687746858&resMode=sharp2&op_usm=1.75,0.3,2,0&fmt=png-alpha",
        "altText": "legal-banner-image-desktop"
      }
    },
    "finance": [
      {
        "Aanbetaling": "€ 9.099,-",
        "Aankoopprijs": "€ 25.995,-",
        "Debetrentevoet": "4,90 %",
        "Jaarlijkse kostenpercentage": "4,90 %",
        "Looptijd": "60 maand",
        "Maandbedrag": "€ 222,33",
        "Slottermijn": "€ 6.421,-",
        "Te financieren bedrag": "€ 16.896,-",
        "Totaal te betalen bedrag": "€ 19.760,80"
      },
      {
        "Aanbetaling": "€ 65.398,-",
        "Aankoopprijs": "€ 186.850,-",
        "Debetrentevoet": "8,00 %",
        "Jaarlijkse kostenpercentage": "8,00 %",
        "Looptijd": "60 maand",
        "Maandbedrag": "€ 1.813,71",
        "Slottermijn": "€ 46.152,-",
        "Te financieren bedrag": "€ 121.452,-",
        "Totaal te betalen bedrag": "€ 154.974,60"
      }
    ],
    "text": "* Het getoonde maandbedrag (termijnbedrag) is indicatief • Aan de berekening kunnen geen rechten worden ontleend • Vraag jouw dealer voor een berekening op maat • Dit niet-doorlopende krediet (Toyota Betaalplan) wordt aangeboden door Toyota Financial Services • Voor nieuw en occasions • Het rentetarief variabel en afhankelijk van het kredietbedrag • Financieren met een minimum kredietbedrag van € 2.500; maximum € 175.000 • Onder voorbehoud van kredietacceptatie • Toetsing en registratie bij BKR • Toyota Financial Services staat onder toezicht van de Autoriteit Financiële Markten (AFM-nr.: 12011089) • Voorwaarden van toepassing, zie lexus.nl/betaalplan • Wijzigingen en typefouten voorbehouden • particulier@toyotafs.nl"
  }'
>
</dxp-foundation-components>

Results

Source