Porsche Design System

Link Tile Product 🧪

The p-link-tile-product component is experimental and might be changed or removed in a future release.

The p-link-tile-product is a navigational component designed to showcase a featured product within a store. it offers the option to "like" the product, allowing you to easily add it to the users wishlist. Additionally, you can place a chip at the top to signal special features about the product, such as its novelty or exclusivity.

The image within the component has a fixed aspect ratio of 8:9. For optimal presentation, it is recommended that the supplied image adheres to the same aspect ratio of 8:9 and includes a transparent background.

An img or picture element has to be available as a child of the p-link-tile-product component.

The heading and price properties are required and a link must be provided, using either the href property or a slotted link.

New

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">
  <p-tag slot="header" color="background-base">
    New
  </p-tag>
  <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>

Experimental Component

Image Aspect Ratio

Some product