When considering the use of a banner, it's best to evaluate the level of the message first. Content within banners must be important or require action taken by the customer.
<tk-banner> Information: This banner is used to provide general information. </tk-banner> <tk-banner type="warning"> Warning: This banner is used to communicate an impending, non-blocking issue. </tk-banner> <tk-banner type="error"> Error: This banner is used to communicate a blocking change that needs to be remedied before a user can proceed. </tk-banner> <tk-banner type="success"> Success: This banner is used to communicate a positive or confirming action. </tk-banner>
Banners communicate varying levels of content such as information, warnings, errors, and success.
<tk-banner> <h2 class="t-medium mb-1x">Olivander's Wand Shop</h2> <p class="mb-0x">1 Holly and Phoenix feather wand. <a href="#">Buy it now.</a></p> <p class="mb-0x">1 Yew and Phoenix feather wand. <a href="#">Buy it now.</a></p> </tk-banner>
<button class="btn btn--link" onClick="toggleBanner(event.target)" type="button"> Toggle Example </button> <tk-banner type="error" offline is-hidden> The restricted section of the library is forbidden to all students at Hogwarts. </tk-banner>
Offline: This banner extends the full width of the browser to draw attenton. This banner is used for network failure.
<div style="height: 400px"> <tk-banner sticky> Gillyweed: A nifty water plant that allows the person who eats it to breathe underwater. </tk-banner> </div>
Sticky: This banner is used to provide context that may extend the viewable window.
<tk-banner> Pre-order a copy of Gilderoy Lockhart's most celebrated book, <a href="#">Magical Me</a>. </tk-banner>
Link: Banners with links provide additional context to the notification. This ensures banners remain concise. Links should navigate to other pages.
<tk-banner> Need stocking stuffers? Check out Gilderoy Lockhart's thrilling adventure, <button type="button">Year with the Yeti</button>. </tk-banner>
Button Link: Banners with button links connect specifc actions to banners. Commonly this pattern is used to launch modals from banners.
<tk-banner closeable> This is the <strong>default</strong> banner with a <strong>close</strong> button. </tk-banner>
Closeable: When possible add the ability to close a banner to allow the customer to be in control of their workplace.