size property offers a set of predefined sizes that cover most use cases. To align the flag with surrounding
typography, set size to inherit. The flag's dimensions are then derived 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 typographic-scale-based components.
<!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>--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.<!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>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.<!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>