Alert

Standard User
Available to anyone with page-editing access

Display important messages and notifications using Oak Valley brand colors. Copy any snippet below and paste it directly into the Edlio CMS WYSIWYG editor.

Primary Alert

Preview

Important Notice

Use this alert to communicate important information to your school community.

<!-- PRIMARY ALERT (OAK VALLEY — #5B643A) -->
<div role="alert" aria-live="polite" style="background-color: rgb(235, 236, 231); border-left: 4px solid #5B643A; padding: 16px 20px; margin: auto; border-radius: 4px; display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;">
    <span aria-hidden="true" style="flex-shrink: 0; font-size: 24px; line-height: 1; margin-top: 2px; font-weight: bold; color: #5B643A;">ℹ&#xFE0E;</span>
    <div style="flex: 1; min-width: 0;">
        <strong style="display: block; color: #5B643A; margin-bottom: 4px; font-size: 16px;">Important Notice</strong>
        <p style="margin: 0; color: #5B643A; line-height: 1.5; font-size: 14px;">Use this alert to communicate important information to your school community.</p>
    </div>
</div>

Secondary Alert

Preview

Heads Up

Use this variant for secondary notices or reminders using your school's secondary color.

<!-- SECONDARY ALERT (OAK VALLEY — #000000) -->
<div role="alert" aria-live="polite" style="background-color: rgb(224, 224, 224); border-left: 4px solid #000000; padding: 16px 20px; margin: auto; border-radius: 4px; display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;">
    <span aria-hidden="true" style="flex-shrink: 0; font-size: 24px; line-height: 1; margin-top: 2px; font-weight: bold; color: #000000;">&#x26A0;&#xFE0E;</span>
    <div style="flex: 1; min-width: 0;">
        <strong style="display: block; color: #000000; margin-bottom: 4px; font-size: 16px;">Heads Up</strong>
        <p style="margin: 0; color: #000000; line-height: 1.5; font-size: 14px;">Use this variant for secondary notices or reminders using your school's secondary color.</p>
    </div>
</div>