Porsche Design System

Button Tile

Table of Contents

UI behaviour
Hyphens
Footer slot
Color scheme

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;"
  class="mt-fluid-sm"
>
  <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>

Color scheme#

The component defines color-scheme: dark internally, independently of the scheme defined globally or on an ancestor outside the Button Tile. This keeps its text and controls legible over media. Components in the header and footer slots inherit the dark scheme, including Tag.

If a slotted component needs a different fixed scheme, set color-scheme: only light or color-scheme: only dark directly on that component. Don't change the Button Tile's scheme when only the slotted component needs different colors, because that also changes the tile's description and controls. For example, set color-scheme: only light on a Tag that should use a fixed light scheme.

Some tag

Open in Stackblitz

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

<p-button-tile label="Some label" description="Some Description" gradient="true">
  <p-tag slot="header" color="background-frosted" compact="true" style="color-scheme: only light">
    Some tag
  </p-tag>
  <img src="assets/lights.jpg" alt="Some image description" />
</p-button-tile>
<script>

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