Porsche Design System

Text

Table of Contents

Size
Semantics

Size#

There are predefined fluid text sizes for the text 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="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

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

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

Responsive

The quick brown fox jumps over the lazy dog

Open in Stackblitz

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

<p-text size="{'base': 'sm', 'l': '2xl'}">
  The quick brown fox jumps over the lazy dog
</p-text>
<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

The quick brown fox jumps over the lazy dog

Open in Stackblitz

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

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

<p-text>
  <blockquote>
    The quick brown fox jumps over the lazy dog
  </blockquote>
</p-text>
<script>

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