Experimental Component
p-link-tile-product component is experimental and might be changed or removed in a future release.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.Image Aspect Ratio
img or picture element has to be available as a child of the p-link-tile-product component.heading and price properties are required and a link must be provided, using either the href property or a
<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
<title></title>
</head>
<body class="bg-canvas">
<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>