heading and description can be provided via named slots.
Additionally, some values which can be overwritten by CSS Custom Properties (aka CSS Variables):
Some heading with a link
Some description. You can also add inline links to route to another page.<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-base">
<p-button type="button">
Open Banner
</p-button>
<p-banner heading="Some Heading" heading-tag="h3" description="Some Description" class="[--p-banner-position-top:200px]">
<h3 slot="heading">
Some heading with a
<a href="https://porsche.com">
link
</a>
</h3>
<span slot="description">
Some description. You can also add inline
<a href="https://porsche.com">
links
</a>
to route to another page.
</span>
</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>