Porsche Design System

Button Tile

The p-button-tile is an interactive component that displays a provided image to tease content and performs form or interaction events within one container. Whenever you want to provide navigational elements, stick to the Link 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 description and label are required. The description property is used as a teaser with a more detailed description of the button and its action.

The label property is used to describe the button.

Some tag

Some footer text

Open in Stackblitz

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

<p-button-tile label="Some label" description="Some Description">
  <p-tag slot="header" theme="dark" color="background-frosted" compact="true">
    Some tag
  </p-tag>
  <img src="assets/lights.jpg" alt="Some image description" />
  <p-text slot="footer" theme="dark">
    Some footer text
  </p-text>
</p-button-tile>
<script>

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