Porsche Design System

Button Tile

Table of Contents

UI behaviour
Hyphens
Footer slot

UI behaviour#

The component is able to break out of its aspect ratio in case content overflows to be accessibility compliant (see first row in example).

Additionally, the component is able to align to the highest CSS Grid child independent of the aspect ratio when used in CSS Grid context (see second row in example).

4/3

4/3

1/1

9/16

1/1

Open in Stackblitz

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

<div class="grid grid-cols-2 gap-static-md">
  <p-button-tile aspect-ratio="4/3" label="Some Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum." size="large">
    <p-tag slot="header" color="background-frosted" compact="true">
      4/3
    </p-tag>
    <img src="assets/lights.jpg" alt="Some image description" />
  </p-button-tile>
  <p-button-tile aspect-ratio="4/3" label="Some Label" description="Some description">
    <p-tag slot="header" color="background-frosted" compact="true">
      4/3
    </p-tag>
    <img src="assets/lights.jpg" alt="Some image description" />
  </p-button-tile>
  <p-button-tile aspect-ratio="1/1" label="Some Label" description="Some description">
    <p-tag slot="header" color="background-frosted" compact="true">
      1/1
    </p-tag>
    <img src="assets/lights.jpg" alt="Some image description" />
  </p-button-tile>
  <p-button-tile aspect-ratio="9/16" label="Some Label" description="Some description">
    <p-tag slot="header" color="background-frosted" compact="true">
      9/16
    </p-tag>
    <img src="assets/lights.jpg" alt="Some image description" />
  </p-button-tile>
  <p-button-tile aspect-ratio="1/1" label="Some Label" description="Some description">
    <p-tag slot="header" color="background-frosted" compact="true">
      1/1
    </p-tag>
    <img src="assets/lights.jpg" alt="Some image description" />
  </p-button-tile>
</div>
<script>

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

Hyphens#

It is possible to overwrite the hyphens style on the host element and use 'soft' hyphens. However, please note that hyphenation behavior can vary depending on the browser and the language of the text. In some cases, it may be necessary to set the appropriate lang attribute on your HTML element to ensure that hyphenation works correctly for the desired language.

style="hyphens: auto;"

style="hyphens: manual;"

style="hyphens: none;"

Open in Stackblitz

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

<p-select label="Select hyphens" name="hyphens">
  <p-select-option value="auto">style="hyphens: auto;"</p-select-option>
  <p-select-option value="manual">style="hyphens: manual;"</p-select-option>
  <p-select-option value="none">style="hyphens: none;"</p-select-option>
</p-select>

<p-button-tile
  label="Some label"
  description="An extra&shy;ordinarily Porsche"
  compact="true"
  size="inherit"
  style="max-width: 400px; font-size: 45px;"
>
  <img src="assets/lights.jpg" alt="Some image description" />
</p-button-tile>
<script>
  const select = document.querySelector('p-select');
  select.addEventListener('update', (event) => {
    const buttonTile = document.querySelector('p-button-tile');
    buttonTile.style.hyphens = event.detail.value;
  });
</script>
</body>
</html>

Footer slot#

You can also use a footer slot to display additional text below the description, providing more flexibility for custom content. The footer slot is intended for non-interactive content only, meaning it should not contain links, buttons, or other interactive elements. It is designed to handle plain text, making it ideal for supplementary or secondary information.

We recommend using short and concise text to avoid visual clutter.

Some tag

Some footer text

Some tag

Some footer text

Open in Stackblitz

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

<div class="grid grid-cols-2 gap-static-md">
  <p-button-tile 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-text slot="footer">
      Some footer text
    </p-text>
  </p-button-tile>
  <p-button-tile label="Some label" description="Some Description" compact="true">
    <p-tag slot="header" color="background-frosted" compact="true">
      Some tag
    </p-tag>
    <img src="assets/lights.jpg" alt="Some image description" />
    <p-text slot="footer">
      Some footer text
    </p-text>
  </p-button-tile>
</div>
<script>

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