Notification banners

Top-level messaging about the page's state or the action that produced the page.

Jinja

{%
  with
  type = "success",
  message = "With plain text."
%}
  {% include "toolkit/notification-banner.html" %}
{% endwith %}

HTML

<div class="banner-success-without-action">
  
  
    <p class="banner-message">
      With plain text.
    </p>
  
  
  
</div>

Jinja

{%
  with
  type = "success",
  message = "<a href=\"#\">With a link</a> and some plain text."
%}
  {% include "toolkit/notification-banner.html" %}
{% endwith %}

HTML

<div class="banner-success-without-action">
  
  
    <p class="banner-message">
      <a href="#">With a link</a> and some plain text.
    </p>
  
  
  
</div>

Jinja

{%
  with
  type = "success",
  heading = "You've successfully updated this",
  content = "<p>You can now:</p><ul><li>look upon your work with pride</li><li>carry on with something else</li></ul>"
%}
  {% include "toolkit/notification-banner.html" %}
{% endwith %}

HTML

<div class="banner-success-without-action">
  
    <h2>
      You've successfully updated this
    </h2>
  
  
  
  
</div>

Jinja

{%
  with
  type = "warning",
  message = "<a href=\"#\">With a link</a> and some plain text but without an action."
%}
  {% include "toolkit/notification-banner.html" %}
{% endwith %}

HTML

<div class="banner-warning-without-action">
  
  
    <p class="banner-message">
      <a href="#">With a link</a> and some plain text but without an action.
    </p>
  
  
  
</div>

Jinja

{%
  with
  type = "warning",
  heading = "Caution advised",
  content = "<p>This page contains:</p><ul><li>important information you need to know before proceeding</li><li>read the page to find out more</li></ul>"
%}
  {% include "toolkit/notification-banner.html" %}
{% endwith %}

HTML

<div class="banner-warning-without-action">
  
    <h2>
      Caution advised
    </h2>
  
  
  
  
</div>

Jinja

{%
  with
  type = "destructive",
  message = "With some plain text and an action.",
  action = "<button class=\"button-destructive banner-action\">Action button</button>"
%}
  {% include "toolkit/notification-banner.html" %}
{% endwith %}

HTML

<div class="banner-destructive-with-action">
  
  
    <p class="banner-message">
      With some plain text and an action.
    </p>
  
  
  <button class="button-destructive banner-action">Action button</button>
</div>

Jinja

{%
  with
  type = "destructive",
  message = "<a href=\"#\">With a link</a>, some plain text and an action.",
  action = "<button class=\"button-destructive banner-action\">Action button</button>"
%}
  {% include "toolkit/notification-banner.html" %}
{% endwith %}

HTML

<div class="banner-destructive-with-action">
  
  
    <p class="banner-message">
      <a href="#">With a link</a>, some plain text and an action.
    </p>
  
  
  <button class="button-destructive banner-action">Action button</button>
</div>

Jinja

{%
  with
  type = "destructive",
  heading = "Are you sure?",
  content = "<p>You should only do this if:</p><ul><li>you know what you're doing</li><li>it actually makes sense</li></ul><p>If all that's done, then go ahead.</p>",
  action = "<button class=\"button-destructive banner-action\">Action button</button>"
%}
  {% include "toolkit/notification-banner.html" %}
{% endwith %}

HTML

<div class="banner-destructive-with-action">
  
    <h2>
      Are you sure?
    </h2>
  
  
  
  <button class="button-destructive banner-action">Action button</button>
</div>

Jinja

{%
  with
  type = "destructive",
  message = "<a href=\"#\">With a link</a> and some plain text but without an action."
%}
  {% include "toolkit/notification-banner.html" %}
{% endwith %}

HTML

<div class="banner-destructive-without-action">
  
  
    <p class="banner-message">
      <a href="#">With a link</a> and some plain text but without an action.
    </p>
  
  
  
</div>

Jinja

{%
  with
  type = "information",
  message = "This text provides some information about what you can see on the page."
%}
  {% include "toolkit/notification-banner.html" %}
{% endwith %}

HTML

<div class="banner-information-without-action">
  
  
    <p class="banner-message">
      This text provides some information about what you can see on the page.
    </p>
  
  
  
</div>

Jinja

{%
  with
  type = "information",
  heading = "Some information about this page",
  content = "<p>This page contains:</p><ul><li>information you need to know</li><li>read the page to find out more</li></ul>"
%}
  {% include "toolkit/notification-banner.html" %}
{% endwith %}

HTML

<div class="banner-information-without-action">
  
    <h2>
      Some information about this page
    </h2>
  
  
  
  
</div>

Jinja

{%
  with
  type = "temporary-message",
  heading = "Cloud Supplier Limited stopped providing this service on Thursday 31 December 2015.\n",
  message = "Any existing contracts for this service remain valid. <a href=\"#\">Here\u2019s a blog post about it</a>, which you should definitely read if you are at all perturbed by this shouty blue box."
%}
  {% include "toolkit/notification-banner.html" %}
{% endwith %}

HTML

<div class="banner-temporary-message-without-action">
  
    <h2>
      Cloud Supplier Limited stopped providing this service on Thursday 31 December 2015.

    </h2>
  
  
    <p class="banner-message">
      Any existing contracts for this service remain valid. <a href="#">Here’s a blog post about it</a>, which you should definitely read if you are at all perturbed by this shouty blue box.
    </p>
  
  
  
</div>

Jinja

{%
  with
  type = "temporary-message",
  heading = "Cloud Supplier Limited stopped providing this service on Thursday 31 December 2015.\n",
  content = "<p>Any existing contracts for this service remain valid. </p><ul><li><a href=\"#\">Here\u2019s a blog post about it</a></li><li>read the page to find out more if you are at all perturbed by this shouty blue box.</li></ul>"
%}
  {% include "toolkit/notification-banner.html" %}
{% endwith %}

HTML

<div class="banner-temporary-message-without-action">
  
    <h2>
      Cloud Supplier Limited stopped providing this service on Thursday 31 December 2015.

    </h2>
  
  
  
  
</div>