<div class="detail-page-header detail-page-header--case-study">
<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 viewBox="0 0 37 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.25 43.4688C30.9844 43.4688 31.7188 42.8262 31.7188 42V15.5625H24.375C22.7227 15.5625 21.4375 14.2773 21.4375 12.625V5.28125H6.75C5.92383 5.28125 5.28125 6.01562 5.28125 6.75V42C5.28125 42.8262 5.92383 43.4688 6.75 43.4688H30.25ZM0.875 6.75C0.875 3.53711 3.44531 0.875 6.75 0.875H21.8965C23.457 0.875 24.9258 1.51758 26.0273 2.61914L34.3809 10.9727C35.4824 12.0742 36.125 13.543 36.125 15.1035V42C36.125 45.3047 33.4629 47.875 30.25 47.875H6.75C3.44531 47.875 0.875 45.3047 0.875 42V6.75Z" fill="white" />
</svg>
</div>
<div class="detail-page-header__cta-text">Browse All Case Studies</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": "case-study",
"postTypePlural": "Case Studies",
"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.