Porsche Design System

Flag

Table of Contents

Size

Size#

There are predefined sizes for the component available which should cover most use cases. If a specific size is needed, the size property can be set to inherit to derive the flag's dimensions from the font-size of a parent element (e.g. a p-text). The internal calculation is based on the ex-unit relative to the inherited font-size and the global line-height, ensuring the flag stays visually consistent with surrounding typographic-scale-based components.

Some text

Open in Stackblitz

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

<p-text class="text-[48px]" size="inherit">
  <p-flag class="me-static-sm" size="inherit" name="de" aria="{'aria-label': 'Flag of Germany'}"></p-flag>
  Some text
</p-text>
<script>

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

Alternatively, the size can be controlled via the custom CSS variable --p-flag-size, which accepts any valid CSS length value. This approach is particularly useful when the flag is placed independently of typographic-scale-based components and a precise, fixed size is required.

Open in Stackblitz

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

<p-flag class="[--p-flag-size:48px]" name="de" aria="{'aria-label': 'Flag of Germany'}"></p-flag>
<script>

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

The size property supports BreakpointCustomizable values, allowing you to define different sizes for each major breakpoint (xs, s, m, l, xl). This makes it easy to adapt the flag's appearance responsively without additional CSS.

Open in Stackblitz

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

<p-flag name="de" size="{'base': 'sm', 'l': '2xl'}" aria="{'aria-label': 'Flag of Germany'}"></p-flag>
<script>

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