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.
The following stylesheets are required to display this component.
The following additional stylesheets are used to display the example(s).
Usage documentation can be found here.
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