Banner Component

Usage Guidelines

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.

Reflecting status

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

Install

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

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

Usage

The source files included are written in [Sass][sass] (scss) You can simply point your sass include-path at your node_modules directory and import it like this.

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

Make sure you import Sass requirements along with the modules.

File system location: components/vf-banner

Variants

Variant: Default live container

Nunjucks demo

{% render '@vf-banner--default', {
  "component-type": "container",
  "data-service-id": "MyService",
  "data-protection-version": 0.1,
  "vf-data-protection-banner__text": "I agree, dismiss this banner",
  "vf-data-protection-banner__link": null,
  "vf-banner--inline_href": "JavaScript:Void(0);",
  "alert_icon_text": "dismiss"
} %}

Sample output

Sample output as HTML

<div class="vf-banner">

  <div class="vf-banner__content">

    <p class="vf-banner__text"></p>


  </div>

</div>

Assets

Nunjucks template

Variant: Info live container

Nunjucks demo

{% render '@vf-banner--info', {
  "component-type": "container",
  "data-service-id": "MyService",
  "data-protection-version": 0.1,
  "vf-data-protection-banner__text": "I agree, dismiss this banner",
  "vf-data-protection-banner__link": null,
  "vf-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>"
} %}

Sample output

Sample output as 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>

Assets

Nunjucks template

Variant: Warning live container

Nunjucks demo

{% render '@vf-banner--warning', {
  "component-type": "container",
  "data-service-id": "MyService",
  "data-protection-version": 0.1,
  "vf-data-protection-banner__text": "I agree, dismiss this banner",
  "vf-data-protection-banner__link": null,
  "vf-banner--inline_href": "JavaScript:Void(0);",
  "alert_icon_text": "dismiss",
  "banner__warning": true,
  "banner__dismissable": true,
  "banner__message": "Easy now, easy does it."
} %}

Sample output

Sample output as 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.</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>

Assets

Nunjucks template

Variant: Danger live container

Nunjucks demo

{% render '@vf-banner--danger', {
  "component-type": "container",
  "data-service-id": "MyService",
  "data-protection-version": 0.1,
  "vf-data-protection-banner__text": "I agree, dismiss this banner",
  "vf-data-protection-banner__link": null,
  "vf-banner--inline_href": "JavaScript:Void(0);",
  "alert_icon_text": "dismiss",
  "banner__danger": true,
  "banner__dismissable": true,
  "banner__message": "Oh dear, what have you done?"
} %}

Sample output

Sample output as 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?</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>

Assets

Nunjucks template

Variant: Success live container

Nunjucks demo

{% render '@vf-banner--success', {
  "component-type": "container",
  "data-service-id": "MyService",
  "data-protection-version": 0.1,
  "vf-data-protection-banner__text": "I agree, dismiss this banner",
  "vf-data-protection-banner__link": null,
  "vf-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>!"
} %}

Sample output

Sample output as 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>

Assets

Nunjucks template

Variant: Inline live container

Nunjucks demo

{% render '@vf-banner--inline', {
  "component-type": "container",
  "data-service-id": "MyService",
  "data-protection-version": 0.1,
  "vf-data-protection-banner__text": "I agree, dismiss this banner",
  "vf-data-protection-banner__link": null,
  "vf-banner--inline_href": "JavaScript:Void(0);",
  "alert_icon_text": "dismiss"
} %}

Sample output

Sample output as HTML

<div class="vf-banner vf-banner--phase">
  <div class="vf-banner__content">
    <p class="vf-banner__text">This is a new web page. <a href="NaN" class="vf-link">Complete our quick survey</a> to help us make it better.</p>
  </div>
</div>

Assets

Nunjucks template

Variant: Fixed live container

Nunjucks demo

{% render '@vf-banner--fixed', {
  "component-type": "container",
  "data-service-id": "MyService",
  "data-protection-version": 0.1,
  "vf-data-protection-banner__text": "I agree, dismiss this banner",
  "vf-data-protection-banner__link": null,
  "vf-banner--inline_href": "JavaScript:Void(0);",
  "alert_icon_text": "dismiss"
} %}

Sample output

Sample output as 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="NaN" 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> -->

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

Assets

Nunjucks template

Variant: Top live container

Nunjucks demo

{% render '@vf-banner--top', {
  "component-type": "container",
  "data-service-id": "MyService",
  "data-protection-version": 0.1,
  "vf-data-protection-banner__text": "I agree, dismiss this banner",
  "vf-data-protection-banner__link": null,
  "vf-banner--inline_href": "JavaScript:Void(0);",
  "alert_icon_text": "dismiss"
} %}

Sample output

Sample output as 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="NaN" class="vf-banner__link">Complete our quick survey</a> to help us make it better.</p>
  </div>
</div>

Assets

Nunjucks template

All components in this design system

Visual Framework Componet Rollup vf-componenet-rollup
Vf Core Components vf-core-components
vf-local-overrides vf-local-overrides
Visual Framework Sample Component vf-sample

This page is part of the components section.

Banner Component

Usage Guidelines

Reflecting status

JS Documentation for --modal variant

Install

Usage

Variants

Variant: Default live container

Nunjucks demo

Sample output

Sample output as HTML

Assets

Variant: Info live container

Nunjucks demo

Sample output

Sample output as HTML

Assets

Variant: Warning live container

Nunjucks demo

Sample output

Sample output as HTML

Assets

Variant: Danger live container

Nunjucks demo

Sample output

Sample output as HTML

Assets

Variant: Success live container

Nunjucks demo

Sample output

Sample output as HTML

Assets

Variant: Inline live container

Nunjucks demo

Sample output

Sample output as HTML

Assets

Variant: Fixed live container

Nunjucks demo

Sample output

Sample output as HTML

Assets

Variant: Top live container

Nunjucks demo

Sample output

Sample output as HTML

Assets

All components in this design system

JS Documentation for `--modal` variant