Porsche Design System

Link Tile

The p-link-tile is a navigational component that displays a provided image to tease content and navigate to further information within one container. In case you want the user to execute an action, you should select the Button Tile component instead.

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.

Additionally, the properties href, description and label are required. The description property is used as a teaser with a more detailed description of the link and where it leads to.

The label property is used to describe the anchor.

Some tag

Open in Stackblitz

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

<p-link-tile href="https://porsche.com" label="Some label" description="Some Description">
  <p-tag slot="header" color="background-frosted" compact="true">
    Some tag
  </p-tag>
  <img src="assets/lights.jpg" alt="Some image description" />
</p-link-tile>
<script>

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