Porsche Design System

Model Signature

Table of Contents

Safe Zone
Mask: Blend Mode
Mask: Image
Mask: Video
Custom styling

Safe Zone#

The safe-zone prop's default is true, which ensures a visual balance across all model signatures. This is most likely the best option when the model signatures are used in combination or within tiles next to each other. When false is set as value, the model signatures come without any safe zone which is probably preferred when the element is positioned independently.

Open in Stackblitz

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

<div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
  <p-model-signature safe-zone="false" model="718"></p-model-signature>
</div>

<div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
  <p-model-signature safe-zone="false" model="911"></p-model-signature>
</div>

<div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
  <p-model-signature safe-zone="false" model="boxster"></p-model-signature>
</div>

<div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
  <p-model-signature safe-zone="false" model="cayenne"></p-model-signature>
</div>

<div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
  <p-model-signature safe-zone="false" model="cayman"></p-model-signature>
</div>

<div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
  <p-model-signature safe-zone="false" model="macan"></p-model-signature>
</div>

<div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
  <p-model-signature safe-zone="false" model="panamera"></p-model-signature>
</div>

<div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
  <p-model-signature safe-zone="false" model="taycan"></p-model-signature>
</div>

<div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
  <p-model-signature safe-zone="false" model="turbo-s"></p-model-signature>
</div>

<div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
  <p-model-signature safe-zone="false" model="turbo"></p-model-signature>
</div>
<script>

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

Mask: Blend Mode#

In case, p-model-signature shall be blended with its background, the CSS property mix-blend-mode can be used ({{ blendMode }} will bring the best results). Depending on the use case it may be important to use it together with the CSS property isolation to create a new stacking context. It's also important to mention, that the p-model-signature has to be used together with contrast-{high|medium} color to have proper blend mode results.

Open in Stackblitz

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

<div class="isolate bg-[#00aa3680] inline-block p-static-lg">
  <p-model-signature color="contrast-medium" safe-zone="false" class="mix-blend-overlay"></p-model-signature>
</div>

<div class="isolate bg-[#f2f2f280] inline-block p-static-lg">
  <p-model-signature color="contrast-medium" safe-zone="false" class="mix-blend-overlay"></p-model-signature>
</div>

<div class="isolate bg-[#1f1f1f80] inline-block p-static-lg">
  <p-model-signature color="contrast-medium" safe-zone="false" class="mix-blend-overlay"></p-model-signature>
</div>

<div class="isolate bg-[#c5004280] inline-block p-static-lg">
  <p-model-signature color="contrast-medium" safe-zone="false" class="mix-blend-overlay"></p-model-signature>
</div>

<div class="isolate bg-[#e1d4a480] inline-block p-static-lg">
  <p-model-signature color="contrast-medium" safe-zone="false" class="mix-blend-overlay"></p-model-signature>
</div>

<div class="isolate bg-[#0099e080] inline-block p-static-lg">
  <p-model-signature color="contrast-medium" safe-zone="false" class="mix-blend-overlay"></p-model-signature>
</div>
<script>

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

Mask: Image#

The following example shows what is technically possible but has not yet been approved by the Porsche Brand Guide.

Open in Stackblitz

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

<p-model-signature safe-zone="false" class="[--p-model-signature-width:auto]">
  <img src="assets/dessert.jpg" alt="Dessert" />
</p-model-signature>
<script>

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

Mask: Video#

The following example shows what is technically possible but has not yet been approved by the Porsche Brand Guide.

Open in Stackblitz

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

<p-model-signature safe-zone="false" class="[--p-model-signature-width:auto]">
  <video poster="assets/ocean.jpg" src="assets/ocean.mp4" autoplay playsinline loop muted></video>
</p-model-signature>
<script>

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

Custom styling#

The p-model-signature component has some values which can be overwritten by CSS Custom Properties (aka CSS Variables):

--p-model-signature-color
--p-model-signature-width
--p-model-signature-height

Open in Stackblitz

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

<p-model-signature class="[--p-model-signature-color:deeppink] block"></p-model-signature>

<p-model-signature class="[--p-model-signature-width:auto] [--p-model-signature-height:50px] block"></p-model-signature>

<p-model-signature class="[--p-model-signature-width:50px] [--p-model-signature-height:auto] block"></p-model-signature>
<script>

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

Experimental

Experimental