Banner

Overview (v1)

Banner

The banner component displays important messages, supports various styles, provides interactive links, and a custom event triggered on closure.

Default variation

<oc-banner-v1 size="100" variant="info">Lorem ipsum dolor sit amet</oc-banner-v1>

Configuration

The banner is available in the main styling variants error, hint, info, success, and warning. This component is configurable, allowing you to tailor its features and appearance to your specific needs. To explore all the available options and adjust the component, use the component configurator and see the changes affect the component in real-time.

Usage guidelines

Before integrating the banner component into your project, make sure you have correctly installed the OTTO components package. Look through the variations section for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Info

See the Banner UX documentation for detailed user experience guidelines.

Accessibility

The banner component comes with a set of built-in accessibility features to ensure a seamless experience for all users.

Icons

Icons in the banner component are purely decorative and do not contain any additional information. Thus, they are hidden from screen readers using the aria-hidden attribute.

Keyboard navigation

The banner component is designed to be accessible via keyboard navigation and allows for the following shortcuts:

Tabbing order

The tabbing order is set up to focus the links passed via the actions slot first, followed by the close button.

Configuration (v1)

Banner configuration

Configure the banner component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

<oc-banner-v1 size="100" variant="info">Lorem ipsum dolor sit amet</oc-banner-v1>

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

API v1

Banner v1 API

API: <oc-banner-v1> (BannerV1)

The Banner component displays important messages, supports various styles, provides interactive links, and a custom event triggered on closure.

Attributes / properties

Slots

Events

Variations (v1)

Variations

Listed below are the most common variations of the banner component as well as specific component variations for different use cases.

To explore all the available options and adjust the component, use the component configurator and see the changes affect the component in real-time.

Default

Story: components-banner-variations--default · tags: components

The default configuration uses the info variant and size=100.

Args: size=100

<oc-banner-v1 size="100" variant="info">Lorem ipsum dolor sit amet</oc-banner-v1>

Info 100 with action link

Story: components-banner-variations--banner-100 · tags: components

The info variant with size=100 and passed in action link (by slot).

Args: size=100, actionsSlot=<oc-link-v2 variant="underlined" href="#" slot="actions">Action 1</oc-link-v2>

<oc-banner-v1 size="100" variant="info">
<oc-link-v2 variant="underlined" href="#" slot="actions">Action 1</oc-link-v2>
Lorem ipsum dolor sit amet
</oc-banner-v1>

Info 200 with headline

Story: components-banner-variations--banner-200 · tags: components

The info variant with size=200 and passed in headline (by attribute).

Args: size=200, headline=Some Headline, actionsSlot=(see snippet)

<oc-banner-v1 size="200" variant="info" headline="Some Headline">
<oc-link-v2 variant="underlined" href="#" slot="actions">Action 1</oc-link-v2>
  <oc-link-v2 variant="underlined-bold" href="#" slot="actions">Action 2</oc-link-v2>
Lorem ipsum dolor sit amet
</oc-banner-v1>

Error 200 with headline as h Tag

Story: components-banner-variations--banner-200-as-h-tag · tags: components

Args: headline=I am an h tag, headline-level=3, size=200, variant=error, actionsSlot=(see snippet)

<oc-banner-v1 size="200" variant="error" headline="I am an h tag" headline-level="3">
<oc-link-v2 variant="underlined" href="#" slot="actions">Action 1</oc-link-v2>
  <oc-link-v2 variant="underlined-bold" href="#" slot="actions">Action 2</oc-link-v2>
Lorem ipsum dolor sit amet
</oc-banner-v1>

Info 300 with headline and multiple actions

Story: components-banner-variations--banner-300 · tags: components

The info variant with size=300 and passed in headline (by attribute) and multiple actions (by slots).

Args: size=300, headline=Some Headline, actionsSlot=(see snippet)

<oc-banner-v1 size="300" variant="info" headline="Some Headline">
<oc-link-v2 variant="underlined" href="#" slot="actions">Action 1</oc-link-v2>
  <oc-link-v2 variant="underlined-bold" href="#" slot="actions">Action 2</oc-link-v2>
Lorem ipsum dolor sit amet
</oc-banner-v1>

Demo: alert pattern

Story: components-banner-variations--demo-alert-pattern · tags: components

Demonstration of how to use role=alert with a banner.

Args: size=100, actionsSlot=<oc-link-v2 variant="underlined" href="#" slot="actions">Action 1</oc-link-v2>, defaultSlot=<strong>Warning:</strong> This is a demo of an accessible banner., variant=warning

<h1 class="oc-headline-200">Demo: alert pattern</h1>
<br />
<p class="oc-copy-100">
  This is a demo for a banner usage with "role=alert". <br />
  To test it, turn on a screen reader and click the "Trigger alert" button. The first
  announcement should be read out loud, followed by the second announcement (banner) that
  interrupts the first.
</p>
<div role="alert" id="alert-space"></div>
<oc-button-v1 variant="secondary" size="50" type="button" id="trigger-button" class="oc-p-100"
  >Trigger alert</oc-button-v1
>
<div aria-live="polite" id="first-announcement-text" class="oc-copy-100"></div>
<script>
  (() => {
    var firstAnnouncement =
      "This is the first announcement that will be interrupted by the second announcement (banner).";
    var firstAnnouncementDiv = document.querySelector("#first-announcement-text");

    const triggerButton = document.getElementById("trigger-button");
    triggerButton.addEventListener("click", handleTriggerAlert);

    function handleTriggerAlert() {
      firstAnnouncementDiv.innerText = firstAnnouncement;
      setTimeout(function () {
        const banner = document.createElement("oc-banner-v1");
        banner.setAttribute("variant", "warning");
        banner.setAttribute("size", "100");
        banner.innerHTML =
          "<strong>Warning:</strong>This is a second announcement and should interrupt the first.";

        const alertSpace = document.getElementById("alert-space");
        alertSpace.appendChild(banner);
      }, 1500);
    }
  })();
</script>

{
  name: "Demo: alert pattern",
  args: {
    size: "100",
    actionsSlot: `<oc-link-v2 variant="underlined" href="#" slot="actions">Action 1</oc-link-v2>`,
    defaultSlot: `<strong>Warning:</strong> This is a demo of an accessible banner.`,
    variant: "warning"
  },
  render() {
    return html`
      <h1 class="oc-headline-200">Demo: alert pattern</h1>
      <br />
      <p class="oc-copy-100">
        This is a demo for a banner usage with "role=alert". <br />
        To test it, turn on a screen reader and click the "Trigger alert" button. The first
        announcement should be read out loud, followed by the second announcement (banner) that
        interrupts the first.
      </p>
      <div role="alert" id="alert-space"></div>
      <oc-button-v1 variant="secondary" size="50" type="button" id="trigger-button" class="oc-p-100"
        >Trigger alert</oc-button-v1
      >
      <div aria-live="polite" id="first-announcement-text" class="oc-copy-100"></div>
      <script>
        (() => {
          var firstAnnouncement =
            "This is the first announcement that will be interrupted by the second announcement (banner).";
          var firstAnnouncementDiv = document.querySelector("#first-announcement-text");

          const triggerButton = document.getElementById("trigger-button");
          triggerButton.addEventListener("click", handleTriggerAlert);

          function handleTriggerAlert() {
            firstAnnouncementDiv.innerText = firstAnnouncement;
            setTimeout(function () {
              const banner = document.createElement("oc-banner-v1");
              banner.setAttribute("variant", "warning");
              banner.setAttribute("size", "100");
              banner.innerHTML =
                "<strong>Warning:</strong>This is a second announcement and should interrupt the first.";

              const alertSpace = document.getElementById("alert-space");
              alertSpace.appendChild(banner);
            }, 1500);
          }
        })();
      </script>
    `;
  }
}

Interaction tests (BannerV1.interactions.stories.ts)

Interaction test stories (automated tests, not usage patterns).

Close Banner

Story: components-banner-interaction-tests--close-banner · tags: play-fn

Args: size=300, headline=Some Headline, defaultSlot=Lorem ipsum dolor sit amet, actionsSlot=<a slot="actions" target="_blank" href="#">Action 1</a>

{
  args: {
    size: "300",
    headline: "Some Headline",
    defaultSlot: "Lorem ipsum dolor sit amet",
    actionsSlot: `<a slot="actions" target="_blank" href="#">Action 1</a>`
  },
  play: async ({
    canvasElement
  }) => {
    const bannerElement = canvasElement.getElementsByTagName("oc-banner-v1")[0]!;
    const closeButton = bannerElement.shadowRoot!.querySelector(".banner__close-button")!;
    await expect(bannerElement).toBeVisible();
    await userEvent.click(closeButton);
    await expect(bannerElement).not.toBeVisible();
  }
}