<div class="listing-page-header listing-page-header--focus-area">

    <div class="listing-page-header__background-pattern"> </div>
    <div class="listing-page-header__container">
        <div class="listing-page-header__content">
            <div class="header-base header-base--dark">
                <div class="header-base__breadcrumbs">
                    <nav aria-label="Breadcrumb navigation" class="breadcrumbs breadcrumbs--dark">
                        <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">
                    <div class="header-base__title-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>
                    </div>
                    <h1 class="header-base__title-header">Focus Areas</h1>
                </div>
                <div class="header-base__intro-text">
                    E3 Alliance and our partners establish measurable focus areas to improve outcomes for Central Texas students. These focus areas are based on data, feedback from the community, and expert guidance.
                </div>
            </div>
        </div>
    </div>
</div>
<div class="listing-page-header listing-page-header--{{ post.postType }}">
    {% include 'partials/small-secondary-navigation/small-secondary-navigation.twig' %}
    <div class="listing-page-header__background-pattern">    </div>
    <div class="listing-page-header__container">
            <div class="listing-page-header__content">
                {% include "templates/header-base/header-base.twig" with {
                    breadcrumbs: breadcrumbs,
                    post: post,
                    isListingPage: true,
                    background: 'dark'
                } %}
            </div>
        </div>
</div>
{
  "site": {
    "name": "E3 Alliance"
  },
  "breadcrumbs": [
    {
      "title": "Home",
      "url": "#"
    },
    {
      "title": "Our Work",
      "url": "#"
    },
    {
      "title": "Interior Page One",
      "url": "#"
    },
    {
      "title": "Child Page 2",
      "url": "#"
    }
  ],
  "post": {
    "postType": "focus-area",
    "title": "Focus Areas",
    "introText": "E3 Alliance and our partners establish measurable focus areas to improve outcomes for Central Texas students. These focus areas are based on data, feedback from the community, and expert guidance."
  }
}
  • Content:
    breakpoint = 1000px
    
    .listing-page-header
        &--focus-area
            --backgroundColor greenAppleDark3
        &--practice
            --backgroundColor aquaDark
        &--case-study
        &--news
        &--press-release
            --backgroundColor grape
    
        background-color var(--backgroundColor)
        position relative
    
        &__background-pattern
            background-image url('../images/header-pattern.svg')
            background-repeat no-repeat
            background-position 50% 0
            background-size cover
            display block
            width 100%
            height 100%
            opacity 0.05
            position absolute
    
        &__container
            fluid(padding-bottom, 64px, 80px)
            fluid(padding-top, 64px, 80px)
            position relative
    
  • URL: /components/raw/listing-header/listing-header.styl
  • Filesystem Path: patterns/partials/listing-header/listing-header.styl
  • Size: 724 Bytes

No notes defined.