Banner

Intro

Banners allow you to create a block of dismissable HTML that's dismissable, often stuck at the top of the screen as defined by the implementor. It will remove itself if it detects that it has been dismissed until the is changed or if it is on a "blocked URL". There should only be 1 banner per page to prevent competing CTAs, but you could use more than 1 on the same page if necessary. The background will always be Anglepoint Yellow (#ffb81c as of 2024-09-09).

Basics

The banner consists of a <ap-banner> element with a block level element (such as <p> or <div>) that has a slot attribute with the value of "text" (such as <p slot="text">). The text element is what will be displayed in the banner.

Copy
html
<ap-banner data-date-changed="2024-09-09">
    <p slot="text" style="margin: 0">This is a banner.</p>
</ap-banner>
Expand

Changing Content

If the content of your banner changes, you should update the data-date-changed attribute as well. Technically this attribute can have a value of any string, but for the sake of reducing confusing future users, keep it ISO 8601 compliant.

Changing the attribute allows the banner to be visible to those who have dismissed it before. You can change the content without changing the attribute, but this should be reserved for fixing typos, as usually you will want to show the banner to as many people as possible.

Copy
html
<ap-banner data-date-changed="2025-10-10">
    <p slot="text">This is a brand new banner from the future!</p>
</ap-banner>
Expand

Exclusive URLs

If you need to block a URL from showing the banner, you can add the data-blocked-urls attribute to the <ap-banner> element. This attribute should be a comma separated list of URLs that you want to block from showing the banner. If the banner detects that it is on a blocked URL, it will automatically apply the hidden boolean attribute to itself.

Note: if you are implementing this in a SPA, be sure to have this component/element rerender. The navigation/router methods of various JS frameworks differ widely and I'm not going to try to listen to the correct events or object mutations to understand if a navigation event occurred.

Copy
html
<ap-banner data-blocked-urls="/about,/contact">
    <p slot="text">
        This is a banner that will not show on the about or contact pages.
    </p>
</ap-banner>
Expand