Hero

Standard User
Available to anyone with page-editing access

Page hero components using PUSD Food & Nutrition brand colors. Copy any snippet below and paste it directly into the Edlio CMS WYSIWYG editor.

Solid Hero

Preview

Welcome to PUSD Food & Nutrition

We are committed to academic excellence and student success in everything we do.

Learn More

<!-- SOLID HERO (PUSD FOOD & NUTRITION — #003366) -->
<!-- Note: Edlio CMS provides the page <h1>. Do not add <h1>–<h3> inside hero components. -->
<div style="background-color: #003366; padding: 40px 30px; border-radius: 8px; margin-bottom: 24px; text-align: center;">
    <p style="margin: 0 0 16px 0; color: #ffffff; font-size: 18px; line-height: 1.6; font-style: italic; font-weight: 600;">Welcome to PUSD Food & Nutrition</p>
    <p style="margin: 0 0 20px 0; color: #ffffff; font-size: 16px; line-height: 1.6; opacity: 0.9;">We are committed to academic excellence and student success in everything we do.</p>
    <a href="#" style="display: inline-block; background-color: #FFFFFF; color: #1a1a1a; border: 2px solid #FFFFFF; padding: 12px 24px; text-decoration: none; border-radius: 4px; font-size: 16px; font-weight: 600; cursor: pointer;">Learn More</a>
</div>

Gradient Hero

Preview

Welcome to PUSD Food & Nutrition

We are committed to academic excellence and student success in everything we do.

Learn More

<!-- GRADIENT HERO (PUSD FOOD & NUTRITION — #003366 → #FFFFFF) -->
<!-- Note: Edlio CMS provides the page <h1>. Do not add <h1>–<h3> inside hero components. -->
<div style="background: linear-gradient(135deg, #003366 0%, #FFFFFF 100%); padding: 40px 30px; border-radius: 8px; margin-bottom: 24px; text-align: center;">
    <p style="margin: 0 0 16px 0; color: #ffffff; font-size: 18px; line-height: 1.6; font-style: italic; font-weight: 600;">Welcome to PUSD Food & Nutrition</p>
    <p style="margin: 0 0 20px 0; color: rgba(255,255,255,0.9); font-size: 16px; line-height: 1.6;">We are committed to academic excellence and student success in everything we do.</p>
    <a href="#" style="display: inline-block; background-color: #FFFFFF; color: #1a1a1a; border: 2px solid #FFFFFF; padding: 12px 24px; text-decoration: none; border-radius: 4px; font-size: 16px; font-weight: 600; cursor: pointer;">Learn More</a>
</div>