A Page Banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.
Paragon Jira tickets: https://openedx.atlassian.net/browse/PAR-277?atlOrigin=eyJpIjoiODEzNzFiYmNhZmY3NGU0NDgwZTVjZWU2MDBhZDVjZDYiLCJwIjoiaiJ9 https://openedx.atlassian.net/browse/PAR-320?atlOrigin=eyJpIjoiN2Y1ZWU0OGM0ZTZiNDFkYjhiODVkYTNhZDRhMDk5ZTciLCJwIjoiaiJ9
Design resources: https://www.figma.com/file/v9qUkOw9RUG2zkl7GVDJHq/Sitewide-banner?node-id=19%3A408
Page Banners that appear throughout pages of the site are known as Global Banners.
Today, Global Banners are the most prevalent form of Page Banners, i.e. COVID response, Cyber Monday promotion, etc.
Color variant | Primary (bright blue), Light, Dark, Warning |
---|---|
Dismissible | True, false (warning variant is not dismissible) |
https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7484%3A15714https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7484%3A15850https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7484%3A15884https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7484%3A15599
https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7484%3A15655 | |
---|---|
| |
Page Banner and System Warning Banner can appear simultaneously. However, there can only be one Page Banner at a time. |
| |
Use the Page Banner component for temporary promotions-only. |
https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7484%3A15517 | |
---|---|
| |
Don’t stack Page Banners. There can only be one Page Banner at any given time. |
https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-2021?node-id=7484%3A15579 | |
---|---|
| |
Don’t use the Page Banner component as a Cookie Banner - the Cookie Banner will be a separate component. |
https://openedx.atlassian.net/l/c/KuRr3wzb
Add rows to this table outlining individual behaviors of the component. | Dismissible: Default persistence: Scrolling behavior: Position:
|
---|
Implementation considerations: | 1) System Warning banners are presumed to be highest priority – urgent/must-notice in every case. There are two ways to (try to) ensure this for screen reader users: |
---|---|
message discoverability and navigation | 2) Page banners are generally given role=”alert”, but in scenarios where there are more than one present at a time, we have a repeat of point 1) above. The W3C recommends putting page-level messages in a list structure at the top of the page. Here’s my recommended container structure: |
Implementing the component as designed, while leaving the implementation of the display rules “how many, etc” to a future component. We need a frame to do the orchestration of these components.