<div class="detail-page-header detail-page-header--practice">
<div class="detail-page-header__wrapper">
<div class="detail-page-header__content">
<div class="header-base header-base--light">
<div class="header-base__breadcrumbs">
<nav aria-label="Breadcrumb navigation" class="breadcrumbs breadcrumbs--">
<ul class="breadcrumbs__list">
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__item-link">
Home</a><span class="breadcrumbs__separator"><svg aria-hidden="true" class="icon-right-triangle" xmlns="http://www.w3.org/2000/svg" width="6" height="8" viewBox="0 0 6 8">
<path class="_mark icon-right-triangle__shape" fill="#AEB4BA" fill-rule="evenodd" d="M0 0l6 4-6 4z" />
</svg>
</span>
</li>
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__item-link">
Our Work</a><span class="breadcrumbs__separator"><svg aria-hidden="true" class="icon-right-triangle" xmlns="http://www.w3.org/2000/svg" width="6" height="8" viewBox="0 0 6 8">
<path class="_mark icon-right-triangle__shape" fill="#AEB4BA" fill-rule="evenodd" d="M0 0l6 4-6 4z" />
</svg>
</span>
</li>
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__item-link">
Interior Page One</a><span class="breadcrumbs__separator"><svg aria-hidden="true" class="icon-right-triangle" xmlns="http://www.w3.org/2000/svg" width="6" height="8" viewBox="0 0 6 8">
<path class="_mark icon-right-triangle__shape" fill="#AEB4BA" fill-rule="evenodd" d="M0 0l6 4-6 4z" />
</svg>
</span>
</li>
<li class="breadcrumbs__item">
<span class="breadcrumbs__item-current">
Child Page 2
</span>
</li>
</ul>
</nav>
</div>
<div class="header-base__title">
<h1 class="header-base__title-header">Improve higher education persistence with an Early Alert System</h1>
</div>
<div class="header-base__tag-list">
<div class="tag-list">
<div class="tag-list__related-links">
<div class="topic-list">
<a href="#" class="badge
badge--focus-area ">
<span class="badge__icon">
<svg viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.30078 2.39844L3.97852 6.5293C3.94922 6.96875 3.74414 7.34961 3.36328 7.58398C2.68945 8.05273 2.16211 8.78516 1.92773 9.63477L1.89844 9.78125H5.29688V7.20312C5.29688 6.82227 5.58984 6.5 6 6.5C6.38086 6.5 6.70312 6.82227 6.70312 7.20312V9.78125H10.0723L10.043 9.63477C9.80859 8.78516 9.31055 8.05273 8.60742 7.58398C8.25586 7.34961 8.02148 6.96875 7.99219 6.5293L7.66992 2.39844C7.66992 2.36914 7.66992 2.33984 7.66992 2.28125H4.30078C4.30078 2.33984 4.30078 2.36914 4.30078 2.39844ZM5.29688 11.1875H1.3125C1.01953 11.1875 0.726562 11.0703 0.550781 10.8359C0.375 10.6016 0.316406 10.3086 0.404297 10.0449L0.580078 9.3125C0.873047 8.08203 1.60547 7.08594 2.57227 6.41211L2.80664 3.6875L2.89453 2.28125H2.01562C1.86914 2.28125 1.75195 2.25195 1.63477 2.19336C1.42969 2.07617 1.3125 1.8418 1.3125 1.57812C1.3125 1.19727 1.60547 0.875 2.01562 0.875H2.89453H9.07617H9.98438C10.3652 0.875 10.6875 1.19727 10.6875 1.57812C10.6875 1.8418 10.541 2.07617 10.3359 2.19336C10.2188 2.25195 10.1016 2.28125 9.98438 2.28125H9.07617L9.16406 3.6875L9.39844 6.41211C10.3652 7.08594 11.0977 8.08203 11.3906 9.3125L11.5664 10.0449C11.6543 10.3086 11.5957 10.6016 11.4199 10.8359C11.2441 11.0703 10.9512 11.1875 10.6582 11.1875H6.70312V15.1719C6.70312 15.582 6.38086 15.875 6 15.875C5.58984 15.875 5.29688 15.582 5.29688 15.1719V11.1875Z" fill="white" />
</svg>
</span>
Early Learning
</a>
<a href="#" class="badge
badge--focus-area ">
<span class="badge__icon">
<svg viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.30078 2.39844L3.97852 6.5293C3.94922 6.96875 3.74414 7.34961 3.36328 7.58398C2.68945 8.05273 2.16211 8.78516 1.92773 9.63477L1.89844 9.78125H5.29688V7.20312C5.29688 6.82227 5.58984 6.5 6 6.5C6.38086 6.5 6.70312 6.82227 6.70312 7.20312V9.78125H10.0723L10.043 9.63477C9.80859 8.78516 9.31055 8.05273 8.60742 7.58398C8.25586 7.34961 8.02148 6.96875 7.99219 6.5293L7.66992 2.39844C7.66992 2.36914 7.66992 2.33984 7.66992 2.28125H4.30078C4.30078 2.33984 4.30078 2.36914 4.30078 2.39844ZM5.29688 11.1875H1.3125C1.01953 11.1875 0.726562 11.0703 0.550781 10.8359C0.375 10.6016 0.316406 10.3086 0.404297 10.0449L0.580078 9.3125C0.873047 8.08203 1.60547 7.08594 2.57227 6.41211L2.80664 3.6875L2.89453 2.28125H2.01562C1.86914 2.28125 1.75195 2.25195 1.63477 2.19336C1.42969 2.07617 1.3125 1.8418 1.3125 1.57812C1.3125 1.19727 1.60547 0.875 2.01562 0.875H2.89453H9.07617H9.98438C10.3652 0.875 10.6875 1.19727 10.6875 1.57812C10.6875 1.8418 10.541 2.07617 10.3359 2.19336C10.2188 2.25195 10.1016 2.28125 9.98438 2.28125H9.07617L9.16406 3.6875L9.39844 6.41211C10.3652 7.08594 11.0977 8.08203 11.3906 9.3125L11.5664 10.0449C11.6543 10.3086 11.5957 10.6016 11.4199 10.8359C11.2441 11.0703 10.9512 11.1875 10.6582 11.1875H6.70312V15.1719C6.70312 15.582 6.38086 15.875 6 15.875C5.58984 15.875 5.29688 15.582 5.29688 15.1719V11.1875Z" fill="white" />
</svg>
</span>
Career Readiness
</a>
</div>
</div>
<div class="tag-list__topics-list">
<div class="topic-list">
<span class="label">
Higher Education
</span>
<span class="label">
Data & Analytics
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="detail-page-header__cta">
<div class="detail-page-header__cta-content">
<a class="detail-page-header__cta-link" href="">
<div class="detail-page-header__cta-icon">
<svg class="light-bulb" viewBox="0 0 9 13" xmlns="http://www.w3.org/2000/svg">
<path class="light-bulb__path" d="M6.96094 6.33594C7.28906 5.86719 7.5 5.28125 7.5 4.625C7.5 2.98438 6.14062 1.625 4.5 1.625C2.83594 1.625 1.5 2.98438 1.5 4.625C1.5 5.28125 1.6875 5.86719 2.01562 6.33594C2.10938 6.47656 2.20312 6.61719 2.32031 6.75781C2.625 7.17969 2.97656 7.67188 3.25781 8.16406C3.49219 8.60938 3.63281 9.07812 3.67969 9.5H2.55469C2.48438 9.21875 2.41406 8.96094 2.27344 8.70312C2.03906 8.28125 1.75781 7.88281 1.45312 7.48438C1.33594 7.32031 1.21875 7.15625 1.10156 6.99219C0.632812 6.3125 0.375 5.51562 0.375 4.625C0.375 2.35156 2.20312 0.5 4.5 0.5C6.77344 0.5 8.625 2.35156 8.625 4.625C8.625 5.51562 8.34375 6.3125 7.875 6.99219C7.75781 7.15625 7.64062 7.32031 7.52344 7.48438C7.21875 7.88281 6.9375 8.28125 6.70312 8.70312C6.5625 8.96094 6.49219 9.21875 6.42188 9.5H5.29688C5.36719 9.07812 5.48438 8.60938 5.71875 8.16406C6 7.67188 6.35156 7.17969 6.65625 6.75781C6.77344 6.61719 6.86719 6.47656 6.96094 6.33594ZM4.5 3.5C3.86719 3.5 3.375 4.01562 3.375 4.625C3.375 4.83594 3.1875 5 3 5C2.78906 5 2.625 4.83594 2.625 4.625C2.625 3.59375 3.44531 2.75 4.5 2.75C4.6875 2.75 4.875 2.9375 4.875 3.125C4.875 3.33594 4.6875 3.5 4.5 3.5ZM4.5 12.5C3.44531 12.5 2.625 11.6797 2.625 10.625V10.25H6.375V10.625C6.375 11.6797 5.53125 12.5 4.5 12.5Z" fill="white" />
</svg>
</div>
<div class="detail-page-header__cta-text">Browse All Promising Practices</div>
</a>
</div>
</div>
</div>
</div>
<div class="detail-page-header detail-page-header--{{ post.postType }}">
<div class="detail-page-header__wrapper">
<div class="detail-page-header__content">
{% include "templates/header-base/header-base.twig" with {
breadcrumbs: customBreadcrumbs,
post: post,
background: background
} %}
</div>
<div class="detail-page-header__cta">
<div class="detail-page-header__cta-content">
<a class="detail-page-header__cta-link" href="{{ post.parentUrl }}">
<div class="detail-page-header__cta-icon">{% include "partials/post-type-icon/post-type-icon.twig" with {postType: post.postType}%}</div>
<div class="detail-page-header__cta-text">Browse All {{ post.postTypePlural }}</div>
</a>
</div>
</div>
</div>
</div>
{
"site": {
"name": "E3 Alliance"
},
"customBreadcrumbs": [
{
"title": "Home",
"url": "#"
},
{
"title": "Our Work",
"url": "#"
},
{
"title": "Interior Page One",
"url": "#"
},
{
"title": "Child Page 2",
"url": "#"
}
],
"post": {
"title": "Improve higher education persistence with an Early Alert System",
"permalink": "#",
"postType": "practice",
"postTypePlural": "Promising Practices",
"topics": [
"Higher Education",
"Data & Analytics"
],
"focusAreas": [
{
"topic": "Early Learning",
"url": "#"
},
{
"topic": "Career Readiness",
"url": "#"
}
]
}
}
.detail-page-header
--backgroundColorFocus sapphire
--backgroundColorActive darkSapphire
&--focus-area
--backgroundColor greenAppleDark3
&--practice
--backgroundColor aquaDark
&--case-study
&--news
&--press-release
--backgroundColor grape
&__content
fluid(padding-bottom, 40px, 62px)
fluid(padding-top, 28px, 80px)
&__cta
background var(--backgroundColor)
transition all ease-out 0.3s
&:hover
&:focus
background var(--backgroundColorFocus)
&:active
background var(--backgroundColorActive)
&__cta-link
display flex
align-items center
text-decoration none
&__cta-content
@extends $contentContainer
padding-top 7px
padding-bottom 7px
&__cta-icon
display flex
svg
height 16px
fill white
&__cta-text
color white
font-size 16px
font-weight 600
line-height 1.65em
padding-left 8px
text-transform capitalize
No notes defined.