Porsche Design System

Link Tile Model Signature

The p-link-tile-model-signature is a navigational component that displays a provided image to tease content and provides two p-link's to navigate to further information within one container. In addition to the p-link-tile it shows one of the model signatures at the top.

Note: The component does not take care of processing and aligning the image.

An <img/>, <picture/> or <video/> tag has to be provided as default slot.

It is required to have two p-link components as named slots, slot="primary" and slot="secondary". The heading property is required, too. It is used as a teaser with a more detailed description of where the link leads to.

Some tag

Primary label

Secondary label

Open in Stackblitz

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

<p-link-tile-model-signature heading="Some heading">
  <p-tag slot="header" color="background-frosted" compact="true">
    Some tag
  </p-tag>
  <img src="assets/lights.jpg" alt="Some image description" />
  <p-link slot="primary" href="https://porsche.com/#primary">
    Primary label
  </p-link>
  <p-link slot="secondary" href="https://porsche.com/#secondary">
    Secondary label
  </p-link>
</p-link-tile-model-signature>
<script>

</script>
</body>
</html>