Navigation

Banner

A bar for one short message. When a visitor closes it, it stays closed for the days you set.

Three looks

These demo banners use data-days="0", so they come back when you reload the page.

HTML

<div class="pw-banner" data-pw-banner data-key="demo-plain" data-days="0" hidden>
  <p>We updated our terms. <a href="#main">Read what changed</a></p>
  <button class="pw-close" data-pw-close aria-label="Dismiss"></button>
</div>
<div class="pw-banner pw-banner--accent" data-pw-banner data-key="demo-accent" data-days="0" hidden>
  <p>Free shipping this week. <a href="#main">Shop now</a></p>
  <button class="pw-close" data-pw-close aria-label="Dismiss"></button>
</div>
<div class="pw-banner pw-banner--dark" data-pw-banner data-key="demo-dark" data-days="0" hidden>
  <p>Version 2 is out. <a href="#main">See what is new</a></p>
  <button class="pw-close" data-pw-close aria-label="Dismiss"></button>
</div>

How to use it

Write the banner with the hidden attribute. The script shows it, unless this visitor closed it within the last data-days days. This way a closed banner never flashes on screen while the page loads.

Options

Set them as attributes on the element.

Attribute	Default	What it does
`data-key`		A name for this banner. Change it when the message changes, so everyone sees the new one.
`data-days`	`30`	How long it stays closed. `0` shows it again on every visit.

Classes

Class	What it does
`pw-banner--accent`	In the accent colour.
`pw-banner--dark`	Dark on light pages, light on dark pages.
`pw-banner--sticky`	Stays at the top while the page scrolls.
`pw-banner--bottom`	Fixed to the bottom of the window.

Events

Listen with addEventListener. Details are in event.detail.

Event	When
`pw:close`	When the visitor closes it.

From your script

var b = Partwise.get(bannerElement, 'banner');
b.close(); b.open();
b.reset();   // forget that it was closed

Good to know

The choice is kept in the browser of the visitor (localStorage), not on a server.

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/50-more.css, js/50-more.js.