Hero
Standard UserAvailable to anyone with page-editing access
Page hero components using Shoal Creek brand colors. Copy any snippet below and paste it directly into the Edlio CMS WYSIWYG editor.
Solid Hero
Section titled “Solid Hero”<!-- SOLID HERO (SHOAL CREEK — #1AB5E9) --><!-- Note: Edlio CMS provides the page <h1>. Do not add <h1>–<h3> inside hero components. --><div style="background-color: #1AB5E9; padding: 40px 30px; border-radius: 8px; margin-bottom: 24px; text-align: center;"> <p style="margin: 0 0 16px 0; color: #1a1a1a; font-size: 18px; line-height: 1.6; font-style: italic; font-weight: 600;">Welcome to Shoal Creek</p> <p style="margin: 0 0 20px 0; color: #1a1a1a; 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: #392814; color: #ffffff; border: 2px solid #392814; padding: 12px 24px; text-decoration: none; border-radius: 4px; font-size: 16px; font-weight: 600; cursor: pointer;">Learn More</a></div>Gradient Hero
Section titled “Gradient Hero”<!-- GRADIENT HERO (SHOAL CREEK — #1AB5E9 → #F79226) --><!-- Note: Edlio CMS provides the page <h1>. Do not add <h1>–<h3> inside hero components. --><div style="background: linear-gradient(135deg, #1AB5E9 0%, #F79226 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 Shoal Creek</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: #392814; color: #ffffff; border: 2px solid #392814; padding: 12px 24px; text-decoration: none; border-radius: 4px; font-size: 16px; font-weight: 600; cursor: pointer;">Learn More</a></div>