<div class="home-page-header">
<div class="home-page-header__background-pattern"></div>
<div class="home-page-header__wrapper">
<div class="home-page-header__content">
<div class="home-page-header__content-wrapper">
<div class="home-page-header__title">
<h1 class="home-page-header__title-text">Transforming education systems</h1>
</div>
<div class="home-page-header__intro-text">
Through data and collaboration, we transform education systems in Central Texas and across the state. Our mission is to help all students succeed. We have selected six focus areas to target and are developing practices and advocacy initiatives to support those areas. Learn more about what we do and join us in collaboration.
</div>
<div class="home-page-header__link">
<a href="/our-work" class="cta-button cta-button--dark cta-button--small">
<span class="cta-button__title">
Our Work
</span>
<div class="cta-button__icon">
<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.1875 6.9707L9.1875 11.9707C8.8125 12.377 8.15625 12.377 7.78125 11.9707C7.375 11.5957 7.375 10.9395 7.78125 10.5645L11.0625 7.25195H1.5C0.9375 7.25195 0.5 6.81445 0.5 6.25195C0.5 5.7207 0.9375 5.25195 1.5 5.25195H11.0625L7.78125 1.9707C7.375 1.5957 7.375 0.939453 7.78125 0.564453C8.15625 0.158203 8.8125 0.158203 9.1875 0.564453L14.1875 5.56445C14.5938 5.93945 14.5938 6.5957 14.1875 6.9707Z" fill="#ACEB8A" />
</svg>
</div>
</a>
</div>
</div>
</div>
<div class="home-page-header__image-container">
<div class="home-page-header__featured-image">
<figure class="image ">
<picture class="image__picture">
<img class="image__image" loading="lazy" type="image/jpeg" src="holder.js/800x560" alt="Image alt text">
</picture>
</figure>
</div>
</div>
</div>
</div>
<div class="home-page-header">
<div class="home-page-header__background-pattern"></div>
<div class="home-page-header__wrapper">
<div class="home-page-header__content">
<div class="home-page-header__content-wrapper">
<div class="home-page-header__title">
<h1 class="home-page-header__title-text">{{ post.title }}</h1>
</div>
{% if post.introText %}
<div class="home-page-header__intro-text">
{{ post.introText }}
</div>
{% endif %}
<div class="home-page-header__link">
{% include 'bits/cta-button/cta-button.twig' with {
background: 'dark',
linkText: 'Our Work',
link: '/our-work',
icon: 'right-arrow',
size: 'small'
} %}
</div>
</div>
</div>
{% if post.featuredImage %}
<div class="home-page-header__image-container">
<div class="home-page-header__featured-image">
{% include 'partials/image/image.twig' with {
image: post.featuredImage,
background: 'light',
} %}
</div>
</div>
{% endif %}
</div>
</div>
{
"site": {
"name": "E3 Alliance"
},
"post": {
"title": "Transforming education systems",
"introText": "Through data and collaboration, we transform education systems in Central Texas and across the state. Our mission is to help all students succeed. We have selected six focus areas to target and are developing practices and advocacy initiatives to support those areas. Learn more about what we do and join us in collaboration.",
"featuredImage": {
"src": "holder.js/800x560",
"alt": "Image alt text"
},
"impactHeader": "Our Impact",
"impactText": "We've made big strides this year. E3 convened a diverse group of education-minded community members to drive change. We supported them as they dug further into the analysis, identified barriers, and co-created and tested practices to scale across the region and the state."
}
}
breakpoint = 1000px
ultraWideBreakpoint = 1800px
.home-page-header
--imageBackgroundColor sapphire
margin auto
position relative
width 100%
&__wrapper
position relative
display grid
grid-gap 80px
padding-top 80px
+above(breakpoint)
display flex
flex-direction row
grid-gap 0
left 50%
padding-top 0
transform translateX(-47%)
width auto
+above(ultraWideBreakpoint)
flex-direction row
width 1800px
&__background-pattern
background-image url('/app/themes/custom/assets/images/header-pattern-grey.svg')
background-repeat no-repeat
background-position 50% 0
background-size cover
display block
width 100%
height 100%
opacity 1
position absolute
z-index -1
&__content
display flex
flex 1 1 100%
padding-top 24px
padding-bottom 24px
+above(breakpoint)
flex-grow 0
flex-basis 60%
//+above(ultraWideBreakpoint)
// flex-basis 1190px
&__content-wrapper
@extends $contentContainer
margin-left 0
display grid
grid-gap 24px
&__breadcrumbs
display none
+above(1000px)
display flex
&__title
display flex
align-items center
&__title-text
@extends $headline1
color var(--titleTextColor)
font-weight 700
&__intro-text
@extends $bodyLarge
color var(--introTextColor)
fluid(font-size, 20px, 24px)
&__image-container
display block
width 100%
+above(breakpoint)
display flex
flex 0 1 40%
&__featured-image
height auto
+above(breakpoint)
height 560px
No notes defined.