heading and description can be provided via named slots. Additionally, some values which can be
overwritten by CSS Custom Properties (aka CSS Variables):<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
<title></title>
</head>
<body class="bg-canvas">
<p-button type="button">
Open Banner
</p-button>
<p-banner class="[--p-banner-top:8px] [--p-banner-bottom:8px] [--p-banner-inset-x:8px] [--p-banner-max-w:70ch]">
<p-heading slot="heading" size="sm" weight="semibold">
Some heading
</p-heading>
<p-text slot="description">
Some description. You can also add inline
<p-link-pure href="https://porsche.com" icon="none" underline="true">
links
</p-link-pure>
to route to another page.
</p-text>
</p-banner>
<script>
const pButton = document.querySelector("p-button");
const pBanner = document.querySelector("p-banner");
pButton.addEventListener('click', () => (pBanner.open = true));
pBanner.addEventListener('dismiss', () => (pBanner.open = false));
</script>
</body>
</html>