Porsche Design System

Button Tile

Table of Contents

UI behaviour
Hyphens

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).

Currently, Safari is only able to align the height per CSS Grid row as long as the content does not overflow.

4/3

4/3

1/1

9/16

1/1

Open in Stackblitz

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

<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" theme="dark" 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" theme="dark" 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" theme="dark" 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" theme="dark" 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" theme="dark" 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="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<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>

Browser Support Limitation