p-banner component provides action-based feedback messages (e.g. after performing a task) or to convey
informational and/or critical notification like some site related topics.
<!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"></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>