Banner container

Informs visitors about important changes or persistent conditions. Use this component if you need to communicate to visitors in a prominent way. Banners are placed at the top of the page or section they apply to, and below the page or section header.

github location npm version

Usage

  • General notice vf-banner vf-banner--notice
  • In development services vf-banner vf-banner--phase
  • Info vf-banner vf-banner--alert vf-banner--info This replaces vf-banner--phase
  • Success vf-banner vf-banner--alert vf-banner--success
  • Alert vf-banner vf-banner--alert vf-banner--alert
  • Warning vf-banner vf-banner--alert vf-banner--warning

note: The vf-banner--alert variants include the option to dismiss the banner. This is currently a 'bring your own JavaScript' button. To include a close button in the markup you need to make sure you have the variable banner__dismissable set to true:

banner__dismissable: true

JS Documentation for --modal variant

Like all JS-enabled components in the Visual Framework, if you wish to use the bundled JS, you need to include JS data attributes, here is an overview of what the options are for the vf-banner--modal variant.

  • Enable VF JS:
    • data-vf-js-banner
  • Banner type:
    • dismissible: standard messaging type
    • blocking: full screen
    • persistent: no close button
    • data-vf-js-banner-state="name_of_type"
  • ESC to close:
    • Only works with blocking banner state
    • data-vf-js-banner-esc-close="y"
  • Button text:
    • Optional, leaving off will not incekt a close button
    • data-vf-js-banner-button-text="Accept and close"
  • Button theme:
    • Optional, leaving off will default to the secondary theme.
    • primary, secondary, tertiary themes are available
    • data-vf-js-banner-button-theme="primary"
  • Cookies:
    • Both are optional, leaving either off will deactivate cookie storage
    • data-vf-js-banner-cookie-name="myServiceName"
    • data-vf-js-banner-cookie-version="0.1" Incrementing this string will invalidate old cookies.
  • Extra buttons:
    • data-vf-js-banner-extra-button="<a href='#'>Optional button</a><a target='_blank' href='#'>New tab button</a>"> This HTML string will be converted into VF markup for extra buttons. Optional.
  • Message:
    • data-vf-js-banner-modal-text: the .innerHTML of this element will be used as the markup for the message itself

Variants

Info variant

Here is some very, very important information

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "container",
  "data-service-id": "MyService",
  "data-protection-version": 0.1,
  "banner__text": "I agree, dismiss this banner",
  "banner__link": null,
  "banner__inline_href": "JavaScript:Void(0);",
  "alert_icon_text": "dismiss",
  "banner__info": true,
  "banner__dismissable": true,
  "banner__message": "Here is some very, <em>very</em> <a class=\"vf-banner__link\" href=\"JavaScript:Void(0);\">important information</a>"
}
 %}
{% include "../path_to/vf-banner/vf-banner.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-banner', {
  "component-type": "container",
  "data-service-id": "MyService",
  "data-protection-version": 0.1,
  "banner__text": "I agree, dismiss this banner",
  "banner__link": null,
  "banner__inline_href": "JavaScript:Void(0);",
  "alert_icon_text": "dismiss",
  "banner__info": true,
  "banner__dismissable": true,
  "banner__message": "Here is some very, <em>very</em> <a class=\"vf-banner__link\" href=\"JavaScript:Void(0);\">important information</a>"
} %}
HTML 
<div class="vf-banner vf-banner--alert vf-banner--info">

  <div class="vf-banner__content">

    <p class="vf-banner__text">Here is some very, <em>very</em> <a class="vf-banner__link" href="JavaScript:Void(0);">important information</a></p>

    <button role="button" aria-label="close notification banner" class="vf-button vf-button--icon vf-button--dismiss | vf-banner__button">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <title>dismiss banner</title>
        <path d="M14.3,12.179a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.442L12.177,9.7a.25.25,0,0,1-.354,0L2.561.442A1.5,1.5,0,0,0,.439,2.563L9.7,11.825a.25.25,0,0,1,0,.354L.439,21.442a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,0,0,2.122-2.121Z" />
      </svg>
    </button>

  </div>

</div>

Warning variant

Easy now, easy does it. link example

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "container",
  "data-service-id": "MyService",
  "data-protection-version": 0.1,
  "banner__text": "I agree, dismiss this banner",
  "banner__link": null,
  "banner__inline_href": "JavaScript:Void(0);",
  "alert_icon_text": "dismiss",
  "banner__warning": true,
  "banner__dismissable": true,
  "banner__message": "Easy now, easy does it. <a class=\"vf-banner__link\" href=\"JavaScript:Void(0);\">link example</a>"
}
 %}
{% include "../path_to/vf-banner/vf-banner.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-banner', {
  "component-type": "container",
  "data-service-id": "MyService",
  "data-protection-version": 0.1,
  "banner__text": "I agree, dismiss this banner",
  "banner__link": null,
  "banner__inline_href": "JavaScript:Void(0);",
  "alert_icon_text": "dismiss",
  "banner__warning": true,
  "banner__dismissable": true,
  "banner__message": "Easy now, easy does it. <a class=\"vf-banner__link\" href=\"JavaScript:Void(0);\">link example</a>"
} %}
HTML 
<div class="vf-banner vf-banner--alert vf-banner--warning">

  <div class="vf-banner__content">

    <p class="vf-banner__text">Easy now, easy does it. <a class="vf-banner__link" href="JavaScript:Void(0);">link example</a></p>

    <button role="button" aria-label="close notification banner" class="vf-button vf-button--icon vf-button--dismiss | vf-banner__button">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <title>dismiss banner</title>
        <path d="M14.3,12.179a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.442L12.177,9.7a.25.25,0,0,1-.354,0L2.561.442A1.5,1.5,0,0,0,.439,2.563L9.7,11.825a.25.25,0,0,1,0,.354L.439,21.442a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,0,0,2.122-2.121Z" />
      </svg>
    </button>

  </div>

</div>

Danger variant

Oh dear, what have you done? link example

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "container",
  "data-service-id": "MyService",
  "data-protection-version": 0.1,
  "banner__text": "I agree, dismiss this banner",
  "banner__link": null,
  "banner__inline_href": "JavaScript:Void(0);",
  "alert_icon_text": "dismiss",
  "banner__danger": true,
  "banner__dismissable": true,
  "banner__message": "Oh dear, what have you done? <a class=\"vf-banner__link\" href=\"JavaScript:Void(0);\">link example</a>"
}
 %}
{% include "../path_to/vf-banner/vf-banner.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-banner', {
  "component-type": "container",
  "data-service-id": "MyService",
  "data-protection-version": 0.1,
  "banner__text": "I agree, dismiss this banner",
  "banner__link": null,
  "banner__inline_href": "JavaScript:Void(0);",
  "alert_icon_text": "dismiss",
  "banner__danger": true,
  "banner__dismissable": true,
  "banner__message": "Oh dear, what have you done? <a class=\"vf-banner__link\" href=\"JavaScript:Void(0);\">link example</a>"
} %}
HTML 
<div class="vf-banner vf-banner--alert vf-banner--danger">

  <div class="vf-banner__content">

    <p class="vf-banner__text">Oh dear, what have you done? <a class="vf-banner__link" href="JavaScript:Void(0);">link example</a></p>

    <button role="button" aria-label="close notification banner" class="vf-button vf-button--icon vf-button--dismiss | vf-banner__button">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <title>dismiss banner</title>
        <path d="M14.3,12.179a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.442L12.177,9.7a.25.25,0,0,1-.354,0L2.561.442A1.5,1.5,0,0,0,.439,2.563L9.7,11.825a.25.25,0,0,1,0,.354L.439,21.442a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,0,0,2.122-2.121Z" />
      </svg>
    </button>

  </div>

</div>

Success variant

Congratulations! You have made something awesome!

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "container",
  "data-service-id": "MyService",
  "data-protection-version": 0.1,
  "banner__text": "I agree, dismiss this banner",
  "banner__link": null,
  "banner__inline_href": "JavaScript:Void(0);",
  "alert_icon_text": "dismiss",
  "banner__success": true,
  "banner__dismissable": true,
  "banner__message": "Congratulations! You have made something <a class=\"vf-banner__link\" href=\"JavaScript:Void(0);\">awesome</a>!"
}
 %}
{% include "../path_to/vf-banner/vf-banner.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-banner', {
  "component-type": "container",
  "data-service-id": "MyService",
  "data-protection-version": 0.1,
  "banner__text": "I agree, dismiss this banner",
  "banner__link": null,
  "banner__inline_href": "JavaScript:Void(0);",
  "alert_icon_text": "dismiss",
  "banner__success": true,
  "banner__dismissable": true,
  "banner__message": "Congratulations! You have made something <a class=\"vf-banner__link\" href=\"JavaScript:Void(0);\">awesome</a>!"
} %}
HTML 
<div class="vf-banner vf-banner--alert vf-banner--success">

  <div class="vf-banner__content">

    <p class="vf-banner__text">Congratulations! You have made something <a class="vf-banner__link" href="JavaScript:Void(0);">awesome</a>!</p>

    <button role="button" aria-label="close notification banner" class="vf-button vf-button--icon vf-button--dismiss | vf-banner__button">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <title>dismiss banner</title>
        <path d="M14.3,12.179a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.442L12.177,9.7a.25.25,0,0,1-.354,0L2.561.442A1.5,1.5,0,0,0,.439,2.563L9.7,11.825a.25.25,0,0,1,0,.354L.439,21.442a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,0,0,2.122-2.121Z" />
      </svg>
    </button>

  </div>

</div>

Fixed variant

This website uses cookies, and the limiting processing of your personal data to function. By using the site you are agreeing to this as outlined in our Privacy Notice and Terms Of Use.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "container",
  "data-service-id": "MyService",
  "data-protection-version": 0.1,
  "banner__text": "I agree, dismiss this banner",
  "banner__link": null,
  "banner__inline_href": "JavaScript:Void(0);",
  "alert_icon_text": "dismiss"
}
 %}
{% include "../path_to/vf-banner/vf-banner.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-banner', {
  "component-type": "container",
  "data-service-id": "MyService",
  "data-protection-version": 0.1,
  "banner__text": "I agree, dismiss this banner",
  "banner__link": null,
  "banner__inline_href": "JavaScript:Void(0);",
  "alert_icon_text": "dismiss"
} %}
HTML 
<!-- dismissible banner -->
<div class="vf-banner vf-banner--fixed vf-banner--bottom vf-banner--notice" data-vf-js-banner data-vf-js-banner-state="dismissible" data-vf-js-banner-button-text="I agree, dismiss this banner" data-vf-js-banner-cookie-name="NaN" data-vf-js-banner-cookie-version="NaN" data-vf-js-banner-extra-button="<a href='#'>Optional button</a><a target='_blank' href='#'>New tab button</a>" data-vf-js-banner-auto-accept="false">
  <div class="vf-banner__content | vf-grid" data-vf-js-banner-text>
    <p class="vf-banner__text vf-banner__text--lg">
      This website uses cookies, and the limiting processing of your personal data to function. By using the site you are agreeing to this as outlined in our <a class="vf-banner__link" href="JavaScript:Void(0);">Privacy Notice</a> and <a class="vf-banner__link" href="JavaScript:Void(0);">Terms Of Use</a>.
    </p>
  </div>
</div>

<!-- persistent banner -->
<!-- <div class="vf-banner vf-banner--fixed vf-banner--bottom vf-banner--notice"
data-vf-js-banner
data-vf-js-banner-state="persistent"
data-vf-js-banner-extra-button="<a href='#'>Optional button</a><a target='_blank' href='#'>New tab button</a>">
  <div class="vf-banner__content | vf-grid" data-vf-js-banner-notice-text>
    <p class="vf-text vf-text-body--2">
      A persistent banner <a class="vf-link" href="JavaScript:Void(0);">Privacy Notice</a> and <a class="vf-link" href="JavaScript:Void(0);">Terms Of Use</a>.
    </p>
  </div>
</div> -->

<!-- Blocking, dismissible banner -->
<!-- <div class="vf-banner vf-banner--blocking vf-banner--notice"
data-vf-js-banner
data-vf-js-banner-state="blocking" data-vf-js-banner-esc-close="y"
data-vf-js-banner-cookie-name="NaN"
data-vf-js-banner-cookie-version="NaN">
  <div class="vf-banner__content | vf-grid" data-vf-js-banner-notice-text>

    <div class="vf-box">
        <h2 class="vf-text vf-text-heading-2">A blocking banner</h2>
        <p class="vf-text vf-text-body--3">This might have a richer layout. Note, this implementation is not yet feature complete.</p>
    </div>

  </div>
</div> -->

<!-- programmatic banner -->
<!-- <div class="vf-banner vf-banner--fixed vf-banner--bottom vf-banner--notice"
      data-vf-js-banner-id="32423"
></div> -->

Top variant

BETA

This is the new EMBL.org Complete our quick survey to help us make it better.

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "container",
  "data-service-id": "MyService",
  "data-protection-version": 0.1,
  "banner__text": "I agree, dismiss this banner",
  "banner__link": null,
  "banner__inline_href": "JavaScript:Void(0);",
  "alert_icon_text": "dismiss"
}
 %}
{% include "../path_to/vf-banner/vf-banner.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-banner', {
  "component-type": "container",
  "data-service-id": "MyService",
  "data-protection-version": 0.1,
  "banner__text": "I agree, dismiss this banner",
  "banner__link": null,
  "banner__inline_href": "JavaScript:Void(0);",
  "alert_icon_text": "dismiss"
} %}
HTML 
<div class="vf-banner vf-banner--fixed vf-banner--top vf-banner--phase" data-vf-js-banner data-vf-js-banner-state="dismissible" data-vf-js-banner-button-text="Close notice" data-vf-js-banner-button-theme="primary">
  <div class="vf-banner__content" data-vf-js-banner-text>
    <span class="vf-badge vf-badge--primary">BETA</span>
    <p class="vf-banner__text">This is the new EMBL.org <a href="JavaScript:Void(0);" class="vf-banner__link">Complete our quick survey</a> to help us make it better.</p>
  </div>
</div>

Examples

Installation info

This repository is distributed with npm. After installing npm, you can install primer-buttons with this command.

$ yarn add --dev @visual-framework/vf-banner

Sass/CSS

The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

@import "@visual-framework/vf-banner/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Changelog

Changelog

1.9.2

  • Update focus indicators colors to increase contrast ratio and be easier to spot

1.9.1

  • --inline variant Nunjucks template file cleanup.

1.9.0

  • Correct "tertary" typo in "vf-button--tertiary".
  • Correct an issue in naming of Yaml keys that resulted in null values.
  • vf-data-protection-banner__text -> banner__text
  • vf-data-protection-banner__link -> banner__link
  • vf-banner--inline_href -> banner__inline_href

1.8.0

  • adds overrides for more permutations of where the vf-global header lives

1.7.2

  • adds deprecation notices around the --phase variant.

1.7.1

  • changes any set- style functions to cleaner version

1.7.0

  • Banner dismiss button now defaults to vf-button--primary (if a specific button variant has been requested by vfJsBannerButtonTheme, it will still be used)

1.6.3

  • Bug: For fixed banners, avoid interpretting numbers as strings and blowing out the page padding

1.6.2

  • JS linting

1.6.1

  • removes CSS for 'inlayed' design as no longer in use
  • https://github.com/visual-framework/vf-core/pull/1204

1.6.0

  • updates spacing design tokens
  • requires v2.0.0 of the vf-design-tokens package or newer
  • removes leftover console.log

1.5.0

  • centralises logic to "close" a banner
  • adds padding to the document to accomodate a fixed-position banner so it won't hide content
  • https://github.com/visual-framework/vf-core/issues/1119

1.4.0

  • removes inline padding on vf-banner class
  • replaces inline padding on vf-banner__content class
  • removes inline padding from vf-banner__content if parent has vf-u-fullbleed class

1.2.3

  • updates max-width of component

1.2.2

  • updates max-width of component

1.2.1

  • Adds !default to all Sass variables for easier overrideing
  • gives the banner a better look in IE11

1.2.0

  • Makes the alert style banner the default .njk
  • puts the style of alert banner as a prop from yaml/nunjucks
  • removes hardcoded variants of alert banners
  • fixes hover colour of vf-banner__button

1.1.0

  • Adds option to determine button theme using data attributes
  • Allows for existing banners to still use the secondary theme

1.0.6

  • Adds underline on links using .vf-banner__link
  • Resolves IE11 bug assigning classes

1.0.5

  • Add alert --alert and --warning banners
  • Placeholder close button for interactiviy (bring your own JavaScript)
  • vf-banner--phase is on its way to deprecation, use vf-banner--info instead

1.0.4

  • Makes use of vf-banner__text
  • Use of vf-text is deprecated

1.0.2

  • Links in text areas of banners regain an underline

1.0.0 (2019-12-17)

  • Initial stable release

1.0.1

  • Removed default spacing of vf-text components inside
  • Removes overriding variant CSS that removes padding, as it breaks the GDPR banner
  • The spacing inside the component is now dictated by the component
  • Adds a top and bottom margin for spacing of the --phase variant

Assets


File system location: components/vf-banner

Find an issue on this page? Propose a change or discuss it.