Porsche Design System

Typography

Table of Contents

Heading
Text

The Porsche Design System Tailwind theme includes the custom @utility CSS classes .prose-display-*, .prose-heading-* and .prose-text-* to style headings and paragraphs consistently.

Additionally, it customizes Tailwind variables such as --font-*, --leading-* and --text-*, which affect multiple Tailwind classes including .font-*, .leading-*, .text-* and others.

Heading#

.prose-heading-5xl

.prose-heading-4xl

.prose-heading-3xl

.prose-heading-2xl

.prose-heading-xl

.prose-heading-lg

.prose-heading-md

.prose-heading-sm

.prose-heading-xs

.prose-heading-2xs

Open in Stackblitz

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

<div class="grid gap-fluid-md">
  <h3 class="prose-heading-5xl">
    .prose-heading-5xl
  </h3>
  <h3 class="prose-heading-4xl">
    .prose-heading-4xl
  </h3>
  <h3 class="prose-heading-3xl">
    .prose-heading-3xl
  </h3>
  <h3 class="prose-heading-2xl">
    .prose-heading-2xl
  </h3>
  <h3 class="prose-heading-xl">
    .prose-heading-xl
  </h3>
  <h3 class="prose-heading-lg">
    .prose-heading-lg
  </h3>
  <h3 class="prose-heading-md">
    .prose-heading-md
  </h3>
  <h3 class="prose-heading-sm">
    .prose-heading-sm
  </h3>
  <h3 class="prose-heading-xs">
    .prose-heading-xs
  </h3>
  <h3 class="prose-heading-2xs">
    .prose-heading-2xs
  </h3>
</div>
<script>

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

Text#

.prose-text-5xl

.prose-text-4xl

.prose-text-3xl

.prose-text-2xl

.prose-text-xl

.prose-text-lg

.prose-text-md

.prose-text-sm

.prose-text-xs

.prose-text-2xs

Open in Stackblitz

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

<div class="grid gap-fluid-md">
  <p class="prose-text-5xl hyphens-auto">
    .prose-text-5xl
  </p>
  <p class="prose-text-4xl hyphens-auto">
    .prose-text-4xl
  </p>
  <p class="prose-text-3xl hyphens-auto">
    .prose-text-3xl
  </p>
  <p class="prose-text-2xl hyphens-auto">
    .prose-text-2xl
  </p>
  <p class="prose-text-xl hyphens-auto">
    .prose-text-xl
  </p>
  <p class="prose-text-lg hyphens-auto">
    .prose-text-lg
  </p>
  <p class="prose-text-md hyphens-auto">
    .prose-text-md
  </p>
  <p class="prose-text-sm hyphens-auto">
    .prose-text-sm
  </p>
  <p class="prose-text-xs hyphens-auto">
    .prose-text-xs
  </p>
  <p class="prose-text-2xs hyphens-auto">
    .prose-text-2xs
  </p>
</div>
<script>

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