Porsche Design System

Display

Table of Contents

Size
Semantics
Color

Size#

There are predefined fluid text sizes for the component which should cover most use cases. If a specific text size is needed, the size can be set to inherit to specify the text size from outside.

The quick brown fox jumps over the lazy dog

Open in Stackblitz

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

<p-display tag="h3" size="inherit" class="text-[5rem]">
  The quick brown fox jumps over the lazy dog
</p-display>
<script>

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

Responsive

The quick brown fox jumps over the lazy dog

Open in Stackblitz

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

<p-display tag="h3" size="{'base': 'medium', 'l': 'large'}">
  The quick brown fox jumps over the lazy dog
</p-display>
<script>

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

Semantics#

To provide more contextual HTML semantics you can either pass them with the tag property or directly inside a slot.

The quick brown fox jumps over the lazy dog

Open in Stackblitz

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

<p-display tag="h3">
  The quick brown fox jumps over the lazy dog
</p-display>

<p-display>
  <h3>
    The quick brown fox jumps over the lazy dog
  </h3>
</p-display>
<script>

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

Color#

Predefined colors associated with its theme are available but also inherit mode can be used to define a custom color.

The quick brown fox jumps over the lazy dog

Open in Stackblitz

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

<p-display tag="h3" color="inherit" class="text-[deeppink]">
  The quick brown fox jumps over the lazy dog
</p-display>
<script>

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