Font Face
Teva Sans Latin

Drafts & Templates
PBS Templates

Primitives & components context

Primitives & components: Teva SCS

Alert - IE11

v0.0.0

The IE11 alert. Alerts Users of IE11 that there are better and safer options.

Use alert as usual and add modifier --ie11-warning.

View in IE11 to see the alert.

<!-- Alert (mods: --ie11-warning) -->
<div class="vi-alert alert fade show vi-alert--ie11-warning" 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>
        <strong>Unsupported Browser!</strong>
        This website will offer limited functionality in this browser.<br>
        We only support the recent versions of major browsers like
        <a href="https://www.google.com/chrome/" target="_blank">Chrome</a>,
        <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a>,
        <a href="https://www.apple.com/safari/" target="_blank">Safari</a>,
        and
        <a href="https://www.microsoft.com/en-us/edge" target="_blank">Edge</a>.
      </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>

No example to show source of.

Stylesheets #

The following stylesheets are required to display this component.

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


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