Displays banners notifying website visitors of an event or notice. Comes in three variants:

• Alert
• Announcement
• Mourning

Example

---

Macro - Alert

{{ banner({
    HTML: "<h2>H2 - This is an alert</h2>
     <h3>H3 - This is the alert text and <a href="#">this is the link</a></h3>
     <p><strong>Body</strong> - This is banner body copy <a href="#">this is the link</a></p>
    "
})}}

---

HTML - Alert

<div class="hee-banner " role="complementary">
  <div class="nhsuk-width-container">
    <div class="hee-banner__message">
      <h2>H2 - This is an alert</h2>
      <h3>H3 - This is the alert text and <a href="#">this is the link</a></h3>
      <p><strong>Body</strong> - This is banner body copy <a href="#">this is the link</a></p>
    </div>
  </div>
</div>

---

Macro - Mourning

{{ banner({
    customClass: "hee-banner--mourning",
    HTML: "<h2>H2 - Her Majesty Queen Elizabeth II</h2>
     <h3>H3 - 21 April 1926 to 8 September 2022</h3>
     <p><a href="#">We join with the people across HEE and the NHS in mourning the death of Queen Elizabeth II</a></p>
    "
})}}

---

HTML - Mourning

<div class="hee-banner hee-banner--mourning" role="complementary">
  <div class="nhsuk-width-container">
    <div class="hee-banner__message">
      <h2>H2 - Her Majesty Queen Elizabeth II</h2>
      <h3>H3 - 21 April 1926 to 8 September 2022</h3>
      <p><a href="#">We join with the people across HEE and the NHS in mourning the death of Queen Elizabeth II</a></p>
    </div>
  </div>
</div>

---

Macro - Announcement

{{ banner({
    customClass: "hee-banner--announcement",
    HTML: "<h2>H2 - This is an alert</h2>
     <h3>H3 - This is the alert text and <a href="#">this is the link</a></h3>
     <p><strong>Body</strong> - This is banner body copy <a href="#">this is the link</a></p>
    "
})}}

---

HTML - Announcement

<div class="hee-banner hee-banner--announcement" role="complementary">
  <div class="nhsuk-width-container">
    <div class="hee-banner__message">
      <h2>H2 - This is an alert</h2>
      <h3>H3 - This is the alert text and <a href="#">this is the link</a></h3>
      <p><strong>Body</strong> - This is banner body copy <a href="#">this is the link</a></p>
    </div>
  </div>
</div>