<div class="bux-alert bux-alert--archived">
<div class="bux-alert__icon" aria-hidden="true"></div>
<div class="visually-hidden" id=label-type-archived-2121724993>Archived.</div>
<div class="bux-alert__message">
<div class="bux-alert__message-content">
<h2 class="bux-alert__message-title" id="-message-2121724993">
Archived Content
</h2>
<div class="bux-alert__message-text">This page/content is part of the [unit or university] Web Archive. It is no longer maintained and may not meet accessibility standards. To request content in an accessible format, contact [<a href="mailto:#">unit or group email address.edu</a>].</div>
</div>
</div>
</div>
{#
Alert
Available variables:
- alert_type: Sets the alert variant. Allowed values: info, success, warning, error, archive
- alert_title: String for the alert title.
- alert_text: String for the alert text. Allowed tags: <a>
- alert_role: Used to determine accessibility attributes. Defaults to null.
- alert_heading_level: Sets the alert heading level. Defaults to h2.
- live: Boolean. Determine if the alert is static or live. Defaults to false.
- dismissable: Boolean. Determine if alert is dismissable. Defaults to false.
#}
{% set alert_heading_level = alert_heading_level|default(2) %}
{% set live = live|default(false) %}
{% set dismissible = dismissible|default(false) %}
{% set live_configs = {
'status': 'role="status" aria-live="polite"',
'alert': 'role="alert" aria-live="assertive"',
} %}
{% set live_attributes = '' %}
{% if live %}
{% set live_attributes = live_configs[alert_role] | default(live_configs['status']) %}
{% endif %}
{% set unique_id = random() %}
{% set alert_id = "label-type-" ~ alert_type ~ "-" ~ unique_id %}
{% set alert_label = alert_role ~ "-message-" ~ unique_id %}
{% if live %}
<div role="region" aria-labelledby="{{ alert_id }} {{ alert_label }}">
{% endif %}
<div class="bux-alert bux-alert--{{ alert_type }}" {{ live_attributes }}>
<div class="bux-alert__icon" aria-hidden="true"></div>
<div class="visually-hidden" id={{ alert_id }}>{{ alert_type|capitalize }}.</div>
<div class="bux-alert__message">
<div class="bux-alert__message-content">
<h{{ alert_heading_level }} class="bux-alert__message-title" id="{{ alert_label }}">
{{ alert_title }}
</h{{ alert_heading_level }}>
{% if alert_text %}
<div class="bux-alert__message-text">{{ alert_text | striptags('<a>') | raw }}</div>
{% endif %}
</div>
{% if dismissible %}
<div class="bux-alert__message-dismiss">
<button class="bux-alert__dismiss"><span class="visually-hidden">Dismiss this alert</span></button>
</div>
{% endif %}
</div>
</div>
{% if live %}
</div>
{% endif %}
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
alert_type: archived
alert_title: Archived Content
alert_text: >-
This page/content is part of the [unit or university] Web Archive. It is no
longer maintained and may not meet accessibility standards. To request content
in an accessible format, contact [<a href="mailto:#">unit or group email
address.edu</a>].
@mixin alert($bg-color, $icon-color, $text-color: $black, $icon-code: "\f106") {
position: relative;
background-color: $bg-color;
color: $text-color;
display: flex;
padding: $sp-8 $sp-16;
.bux-alert__icon {
line-height: 1;
margin-right: $sp-12;
&:after {
content: $icon-code;
font-family: $icon;
font-size: $ts-md;
color: $icon-color;
}
}
.bux-alert__message {
display: flex;
flex: 1;
gap: $sp-16;
}
.bux-alert__message-content {
flex: 1;
}
.bux-alert__message-title {
color: $text-color;
font-size: $ts-18;
font-family: $sans;
font-weight: 700;
margin-bottom: $sp-4;
line-height: 1.5rem;
}
.bux-alert__message-text {
font-family: $sans;
font-size: $ts-base;
line-height: rem-calc(24);
font-weight: 400;
}
.bux-alert__dismiss {
@include button-reset();
&:after {
content: "\f105";
font-family: $icon;
font-size: $ts-base;
color: $text-color;
}
&:focus {
outline: 2px solid $focus;
}
}
}
.bux-alert {
&.bux-alert--info {
@include alert($info-light, $info-dark, $icon-code: "\f104");
a {
@include link-base("light");
}
}
&.bux-alert--success {
@include alert($success-light, $success-dark, $icon-code: "\f102");
a {
@include link-base("light");
}
}
&.bux-alert--warning {
@include alert($warning-light, $warning-dark, $icon-code: "\f108");
a {
@include link-base("light");
}
}
&.bux-alert--error {
@include alert($error, $white, $white, $icon-code: "\f108");
a {
@include link-base("scarlet");
}
}
&.bux-alert--archived{
@include alert($warning-light, $warning-dark, $icon-code: "\f640");
a {
@include link-base("light");
}
}
}
const dismissButtons = document.querySelectorAll("button.bux-alert__dismiss");
if (dismissButtons) {
dismissButtons.forEach((item) => {
item.addEventListener("click", dismissAlert);
});
}
function dismissAlert(event) {
let alert = event.target.closest(`.bux-alert`);
alert.remove();
}
Alert types: information, success, warning, and danger. The examples show different implementations for static alerts and dynamic alerts. Static alerts are for static pages. They do not have role or aria-live attributes. Dynamic messages are for pages that display alerts dynamically in between page loads. They must use one of the attribute pairs of “role=” and “aria-live=” as shown. See the Alert documentation page for usage.