Skip to content
PUSD Digital Communications

Alert

Standard User

Available to anyone with page-editing access

Display important messages and notifications using PUSD Food & Nutrition brand colors. Copy any snippet below and paste it directly into the Edlio CMS WYSIWYG editor.

Primary Alert

Section titled “Primary Alert”
Preview
Important Notice

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

<!-- PRIMARY ALERT (PUSD FOOD & NUTRITION — #003366) -->
<div role="alert" aria-live="polite" style="background-color: rgb(224, 231, 237); border-left: 4px solid #003366; 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: #003366;">ℹ&#xFE0E;</span>
    <div style="flex: 1; min-width: 0;">
        <strong style="display: block; color: #003366; margin-bottom: 4px; font-size: 16px;">Important Notice</strong>
        <p style="margin: 0; color: #003366; line-height: 1.5; font-size: 14px;">Use this alert to communicate important information to your school community.</p>
    </div>
</div>

Secondary Alert

Section titled “Secondary Alert”
Preview
Heads Up

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

<!-- SECONDARY ALERT (PUSD FOOD & NUTRITION — #003366) -->
<div role="alert" aria-live="polite" style="background-color: rgb(224, 231, 237); border-left: 4px solid #003366; 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: #003366;">&#x26A0;&#xFE0E;</span>
    <div style="flex: 1; min-width: 0;">
        <strong style="display: block; color: #003366; margin-bottom: 4px; font-size: 16px;">Heads Up</strong>
        <p style="margin: 0; color: #003366; line-height: 1.5; font-size: 14px;">Use this variant for secondary notices or reminders using your school's secondary color.</p>
    </div>
</div>