Skip to content
Communications EO Resources

Hero

The Hero Component creates impactful page introductions that appear immediately after the Edlio CMS page title to welcome users, set context, and guide them toward key actions. Available in text-only and image background variants, each with optional button support.

Key Features

Section titled “Key Features”

7 Text-Only Styles

Welcome, Department, Page Intro, Centered, Minimal, Info Callout, and Announcement variants — each with or without button support.

5 Image Background Styles

Dark overlay, light overlay, and directional gradient overlays for high-impact visual storytelling with background images.

Flexible Button Support

Single or dual buttons using Navy, Light Blue, Gold, Outline, and Alt Navy styles — composable with any hero type.

No Dependencies

Pure HTML with inline CSS — paste directly into Edlio WYSIWYG with no external stylesheets required.

Hero Types Overview

Section titled “Hero Types Overview”
TypeBackgroundBest Used For
Welcome HeroNavy gradient (#003366 → #3a57a8)District home page, school landing pages
Department HeroWhite + Light Blue left borderDepartment overview, service pages
Page IntroGold gradient (#f0ad4e → #ffc870)Information pages, general school pages
Centered TextSolid Navy (#003366)Community messages, welcome statements
MinimalLight gray (#f8f9fa) + borderQuick-access pages, resource hubs
Info CalloutLight Blue (#e8f7fc) + iconProcess pages, enrollment, how-to guides
AnnouncementAlt Navy gray (#e6eaf0) + gold badgeTime-sensitive notices, important updates
Image: Dark OverlayBackground image + navy rgba overlayHigh-impact welcome, visual storytelling
Image: Light OverlayBackground image + white rgba overlayBright, content-forward visual pages
Image: Directional GradientBackground image + directional gradientDepartment pages, left-aligned layouts

Copy-Paste Code

Section titled “Copy-Paste Code”

Text-Only Heroes

Section titled “Text-Only Heroes”
<!-- WELCOME HERO WITH BUTTON -->
<div style="background: linear-gradient(135deg, #003366 0%, #3a57a8 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;">Where we empower world-class learners!</p>
    <p style="margin: 0; color: #e8f7fc; font-size: 16px; line-height: 1.6;">We are a nationally renowned public school district that proudly educates 34,000 students throughout 40 award-winning schools.</p>
    <a href="https://www.example.com" target="_blank" rel="noopener noreferrer" style="display: inline-block; background-color: #f0ad4e; color: #003366; border: 2px solid #f0ad4e; padding: 12px 24px; text-decoration: none; border-radius: 4px; font-size: 16px; font-weight: 600; margin-top: 20px; transition: all 0.3s ease; cursor: pointer;">Learn More</a>
</div>

Image Background Heroes

Section titled “Image Background Heroes”
<!-- IMAGE BACKGROUND HERO (DARK OVERLAY) -->
<div style="background-image: linear-gradient(rgba(0, 51, 102, 0.75), rgba(0, 51, 102, 0.75)), url('YOUR-IMAGE-URL-HERE'); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 60px 30px; border-radius: 8px; margin-bottom: 24px; text-align: center; min-height: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center;" role="img" aria-label="Welcome to Poway Unified School District">
    <p style="margin: 0 0 16px 0; color: #ffffff; font-size: 20px; line-height: 1.6; font-weight: 600; max-width: 800px; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">Welcome to Poway Unified School District</p>
    <p style="margin: 0; color: #e8f7fc; font-size: 16px; line-height: 1.6; max-width: 700px; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">Empowering students to achieve academic excellence and become lifelong learners in a supportive, innovative environment.</p>
</div>

Button Styles Available

Section titled “Button Styles Available”
Stylebackground-colorcolorborderBest Paired With
Primary Navy#003366#ffffff2px solid #003366Department, Info Callout, Announcement
Light Blue#54c8eb#0033662px solid #54c8ebCentered Text, Left Gradient image
Gold#f0ad4e#0033662px solid #f0ad4eWelcome Hero, Dark Overlay image
Outlinetransparent#0033662px solid #003366Page Intro (secondary action), Light Overlay image
Alt Navy#3a57a8#ffffff2px solid #3a57a8Minimal Hero

Customization Guide

Section titled “Customization Guide”

  1. Change subtitle text — Update the first <p> tag content. Keep to 1–2 sentences maximum.

  2. Change description text — Update the second <p> tag content. Keep to 2–3 sentences maximum.

  3. Add a button — Copy a button <a> tag from the Button Styles table above and paste it after the last <p> tag inside the hero <div>.

  4. Change button text — Replace the text between the opening and closing <a> tags with your action-oriented label (e.g., “Enroll Now”, “Get Started”, “View Resources”).

  5. Change button URL — Update the href="https://www.example.com" attribute with your actual destination URL.

  6. Change button color — Swap the background-color, color, and border values using the Button Styles table above.

  7. Add a second button — Wrap both <a> buttons in a flex container: <div style="display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">...</div>. See Page Intro and Light Overlay examples.

  8. Change the icon (Info Callout) — Replace the ℹ Unicode character in the <span> with another symbol (e.g., ●, ★, ✓, ⚠).

  9. Adjust spacing — Modify padding values (e.g., 30px, 40px) on the outer <div> for more or less vertical space.

  10. Remove elements — Delete an entire <p> or <a> tag for a simpler, stripped-down version of any hero.

  11. Change background image — Replace YOUR-IMAGE-URL-HERE with your image URL. Use high-resolution images (1920×800px minimum).

  12. Adjust overlay darkness — Change the rgba() opacity value: 0.5 = 50% dark, 0.75 = 75% dark, 0.85 = 85% light, 0.9 = 90% dark.

  13. Change overlay gradient direction — Replace linear-gradient(rgba(...), rgba(...)) with linear-gradient(to top, ...) for bottom-to-top or linear-gradient(to right, ...) for left-to-right.

  14. Change text alignment for image heroes — Modify justify-content (center / flex-start / flex-end) and align-items (center / flex-start / flex-end) on the outer <div>.

  15. Adjust minimum height — Change min-height (e.g., 300px, 400px, 500px) for taller or shorter image heroes.

Accessibility

Section titled “Accessibility”

Best Practices

Section titled “Best Practices”