Porsche Design System

Link Tile Product 🧪

Framework routing (anchor nesting)#

To support framework routing you can provide the link as a slotted element by using the anchor slot instead of using the href property. Ensure the named slot is directly on the anchor element, without nesting. To ensure accessibility, the slotted link must be labeled with both the product name, its price and optionally with the original price.

Weekender, sale price 718,00 €, original price ~~911,00 €~~ Some alt text

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<p-link-tile-product heading="Some product" price="718,00 €" price-original="911,00 €" description="Some description" href="https://porsche.com">
  <a slot="anchor" href="https://porsche.com">
    Weekender, sale price 718,00 €, original price 
    <s>
      911,00 €
    </s>
  </a>
  <img src="assets/placeholder_800x900.svg" width="800" height="900" alt="Some alt text" />
</p-link-tile-product>
<script>
  const pLinkTileProduct = document.querySelector("p-link-tile-product");
  pLinkTileProduct.addEventListener('like', (e) => e.target.liked = !e.detail.liked);
</script>
</body>
</html>