Porsche Design System
You are currently viewing an earlier release of the Porsche Design System.Switch to the latest Porsche Design System documentation.
SearchNavigate to GitHub repository of Porsche Design SystemOpen sidebar
ConfiguratorExamplesUsageAccessibilityAPI
Model Signature Table of Contents 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="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<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="gt3-rs"></p-model-signature>
</div>

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

<div class="bg-[#ff000033] inline-block me-static-md mt-static-md">
  <p-model-signature safe-zone="false" model="gts"></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 If p-model-signature should be blended with its background, the CSS property mix-blend-mode can be used ({{ blendMode }} will produce 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 is also important to note that p-model-signature must be used with the contrast-{high|medium} color for proper blend mode results.
Open in Stackblitz
<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<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.
Dessert
Open in Stackblitz
<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<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="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<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 color can be changed by setting the color prop to inherit and applying some CSS color. Additionally, the component has some values that can be overridden via CSS custom properties (aka CSS variables): 
--p-model-signature-width
--p-model-signature-height
Open in Stackblitz
<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-model-signature color="inherit" class="text-info"></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>
Global settingsColor SchemeAll color tokens use the light-dark() CSS function. Set the theme via the CSS color-scheme property: light for light mode, dark for dark mode, or light dark to follow the user's system preference.LightDarkLight DarkDirectionThe dir global attribute in HTML changes the direction of text and other content within an element. It's most often used on the <html> tag to set the entire page's direction, which is crucial for supporting languages that are written from right to left (RTL), such as Arabic and Hebrew. For example, using <html dir="rtl"> makes the entire page display from right to left, adjusting the layout and text flow accordingly.LTR (left-to-right)RTL (right-to-left)Text ZoomTo ensure accessibility and comply with WCAG 2.2 AA standards, it is mandatory for web content to support text resizing up to at least 200% without loss of content or functionality. Using relative units like rem is a best practice for achieving this, as they allow the text to scale uniformly based on the user's browser settings.100%130%150%200%