Porsche Design System

Headline 🚫

Table of Contents

Semantics
Color

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-headline tag="h3">
  The quick brown fox jumps over the lazy dog
</p-headline>

<p-headline>
  <h3>
    The quick brown fox jumps over the lazy dog
  </h3>
</p-headline>
<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-headline tag="h3" color="inherit" class="text-[deeppink]">
  The quick brown fox jumps over the lazy dog
</p-headline>
<script>

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