Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva SCS
Primitives & components: Teva SCS

Alert

v0.0.0

The Alert brings something to the notice of the user.

<!-- Alert  -->
<div class="vi-alert" role="alert">
  <div class="vi-alert__main">
    <div class="vi-alert__body vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
      <p>The notification message.</p>
    </div>
  </div>
</div>

Full width #

When the alert is used full width, for example on the top of the page, use modifier --column on .vi-alert__main.

[visual alignment test] 
<!-- Alert  -->
<div class="vi-alert" role="alert">
  <div class="vi-alert__main vi-alert__main--column">
    <div class="vi-alert__body vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
      <p>The notification message.</p>
    </div>
  </div>
</div>

Close #

Add the .vi-alert__close element with a solid button inside the .vi-alert__main, after the .vi-alert__body element for a close button.

The close button needs following attributes to make use of the Bootstrap javascript alert behaviour:

  • aria-label="Close"
  • data-dismiss="alert"

The .alert, .fade and .show classes set on the base element .vi-alert are Bootstrap classes required for data-dismiss="alert" and the animation effect to work.

<!-- Alert  -->
<div class="vi-alert alert fade show" role="alert">
  <div class="vi-alert__main">
    <div class="vi-alert__body vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
      <p>The notification message.</p>
    </div>
    <div class="vi-alert__close">
      <!-- Button type: solid  -->
      <button aria-label="Close" data-dismiss="alert" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--accent-1 vi-btn"><!-- Icon cross-sign (mods: --button-left) -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-left" aria-label="cross-sign" width="12" height="12"><path d="M10.5 2.5l-.7-.7-4.2 4.1-4.1-4.1-.7.7 4.1 4.1-4.1 4.2.7.7 4.1-4.2 4.2 4.2.7-.7-4.2-4.2z"></path></svg>
        Don't show this message again</button>
    </div>
  </div>
</div>

Compact #

To have a more compact close button, use the close button and add modifiers --compact to .alert__main and .alert__close.

<!-- Alert  -->
<div class="vi-alert alert fade show" role="alert">
  <div class="vi-alert__main vi-alert__main--compact">
    <div class="vi-alert__body vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
      <p>The notification message.</p>
    </div>
    <div class="vi-alert__close vi-alert__close--compact">
      <!-- Button type: close  -->
      <button aria-label="Close" data-dismiss="alert" type="button" class="vi-btn-close vi-btn-close--accent-1 vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></button>
    </div>
  </div>
</div>

Examples #

Three examples. A cookie consent banner, and a region switch.

The last example show's two stacked alerts.

cookie consent

call to action (the button is not a close button)

country switch (two countries, same language)

stacked alerts

<!-- Alert  -->
<div class="vi-alert alert fade show" role="alert">
  <div class="vi-alert__main vi-alert__main--column">
    <div class="vi-alert__body vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
      <p>This site uses cookies to give you a better browsing experience. By continuing to use this website, you accept our use of these cookies. For more information, see our <a href="#link">Privacy and Cookie Notice</a>.</p>
    </div>
    <div class="vi-alert__close">
      <!-- Button type: solid  -->
      <button aria-label="Close" data-dismiss="alert" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--accent-1 vi-btn">OK</button>
    </div>
  </div>
</div>
<hr>
<!-- Alert  -->
<div class="vi-alert alert fade show" role="alert">
  <div class="vi-alert__main vi-alert__main--column vi-alert__main--compact">
    <div class="vi-alert__body vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
      <p>
        Looking for a specific product?
        <!-- Button type: outline  -->
        <a href="#" class="mx-md-10 vi-btn-outline vi-btn-outline--accent-1 vi-btn">Search our product catalogue</a>
      </p>
    </div>
  </div>
</div>
<hr>
<!-- Alert  -->
<div class="vi-alert alert fade show" role="alert">
  <div class="vi-alert__main vi-alert__main--column vi-alert__main--compact">
    <div class="vi-alert__body vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
      <p>Are you looking for the Czech site? <a href="#link">Click here</a>.</p>
    </div>
    <div class="vi-alert__close">
      <!-- Button type: solid  -->
      <button aria-label="Close" data-dismiss="alert" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--accent-1 vi-btn"><!-- Icon cross-sign (mods: --button-left) -->
        <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-left" aria-label="cross-sign" width="12" height="12"><path d="M10.5 2.5l-.7-.7-4.2 4.1-4.1-4.1-.7.7 4.1 4.1-4.1 4.2.7.7 4.1-4.2 4.2 4.2.7-.7-4.2-4.2z"></path></svg>
        Don't show this message again</button>
    </div>
  </div>
</div>
<hr>
<!-- Alert  -->
<div class="vi-alert alert fade show" role="alert">
  <div class="vi-alert__main vi-alert__main--column vi-alert__main--compact">
    <div class="vi-alert__body vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
      <p class="h6">COVID-19: UPDATE</p>
      <p>From the start of the COVID-19 (coronavirus) crisis we have monitored and followed the various measures that were taken by the authorities and of course we follow our government’s guidelines…</p>
    </div>
    <div class="vi-alert__close vi-alert__close--compact">
      <!-- Button type: close  -->
      <button aria-label="Close" data-dismiss="alert" type="button" class="vi-btn-close vi-btn-close--accent-1 vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></button>
    </div>
  </div>
</div>
<!-- Alert  -->
<div class="vi-alert alert fade show" role="alert">
  <div class="vi-alert__main vi-alert__main--column">
    <div class="vi-alert__body vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
      <p>This site uses cookies to give you a better browsing experience. By continuing to use this website, you accept our use of these cookies. For more information, see our <a href="#link">Privacy and Cookie Notice</a>.</p>
    </div>
    <div class="vi-alert__close">
      <!-- Button type: solid  -->
      <button aria-label="Close" data-dismiss="alert" type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--accent-1 vi-btn">OK</button>
    </div>
  </div>
</div>

Impersonation #

A user can impersonate another user. When so an impersonation alert can be shown.

<!-- Alert (mods: --impersonation) -->
<div class="vi-alert vi-alert--impersonation" role="alert">
  <div class="vi-alert__main">
    <div class="vi-alert__body vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
      <p>Impersonating <strong>Brian Hale</strong> from <strong>Bampton healthcare Ltd</strong>.</p>
    </div>
    <div class="vi-alert__close">
      <!-- Button type: outline  -->
      <button aria-label="Stop impersonating" type="button" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn-outline--accent-1 vi-btn-outline--sm vi-btn">Stop
        <span class="d-none d-sm-inline">impersonating</span></button>
    </div>
  </div>
</div>

Voucher #

Voucher detail can be displayed in the voucher bar.

<!-- Alert (mods: --voucher) -->
<div class="vi-alert vi-alert--voucher" role="alert">
  <div class="vi-alert__main">
    <div class="vi-alert__body vi-typesystem vi-typesystem--collapse-last vi-typesystem--component">
      <!-- Voucher Bar  -->
      <div class="vi-voucher-bar">
        <div class="vi-voucher-bar__cell">
          <div class="vi-flexbox align-items-center vi-flexbox--gap-20">
            <div class="vi-flexbox flex-column vi-flexbox--gap-0">
              <p class="mb-0 text-dominant font-weight-bold vi-type vi-type--text-small">
                Voucher balance
              </p>
              <p class="mb-0 text-neutral-50 vi-type vi-type--text-small">
                Last updated: 16:02 UTC
              </p>
            </div>
            <button aria-label="Your label here" class="vi-cell-button vi-btn-outline-icon vi-btn-outline-icon--sm vi-btn" type="button">
              <!-- Icon reload  -->
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="reload"><path d="M3 14 3.00010368 11.3179511C4.07503973 12.9345592 5.91309635 14 8 14 10.7421411 14 13.0546396 12.1604816 13.7708033 9.64813731L12.8089719 9.37355609C12.2121332 11.4671209 10.2850782 13 8 13 5.94967945 13 4.18759771 11.765903 3.41604198 10L7 10 7 9 2 9 2 14 3 14ZM13 2 12.9998963 4.68204894C11.9249603 3.06544082 10.0869037 2 8 2 5.25785892 2 2.94536037 3.83951835 2.22919672 6.35186269L3.19102815 6.62644391C3.78786679 4.53287908 5.71492185 3 8 3 10.0503206 3 11.8124023 4.23409704 12.583958 6L9 6 9 7 14 7 14 2 13 2Z"></path></svg>
            </button>
          </div>
        </div>
        <div class="vi-voucher-bar__cell">
          <p class="mb-0 text-accent-2 vi-type vi-type--text-small">
            Medicinal products
          </p>
          <p class="mb-0 text-accent-2 vi-type vi-type--text-small">
            € 14.500,00
          </p>
        </div>
        <div class="vi-voucher-bar__cell">
          <p class="mb-0 text-accent-2 vi-type vi-type--text-small">
            Non-medicinal products
          </p>
          <p class="mb-0 text-accent-2 vi-type vi-type--text-small">
            € 14.500,00
          </p>
        </div>
        <div class="vi-voucher-bar__cell">
          <p class="mb-0 text-accent-2 vi-type vi-type--text-small">
            Food supplements
          </p>
          <p class="mb-0 text-accent-2 vi-type vi-type--text-small">
            € 14.500,00
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

The following additional stylesheets are used to display the example(s).

JavaScript #

The following javascript is required to display this component.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Fix

  • 31 Jul 2023 - Fix vertical alignment of text vs button in impersonation bar.
  • 22 May 2023 - Maintain order of stacked alerts on smaller screens.

Changed

  • change dom position of alert when layout on page to prevent safety instructions falling out of viewport. Alert js now requirement.
  • Accessibility: role="alert" added
  • Changed visual appearance of stacked alerts.

Added

  • 22 May 2023 - Added voucher bar and impersonation bar.
  • 30 Nov 2022 - Trigger channel event on close.
  • Add --e11-warning modifier.
  • RTL support
  • Compact button.
  • Initial draft