E3 Alliance Pattern Library

Listing Page Header: Case Study Header 

<div class="listing-page-header listing-page-header--case-study">

    <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 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>
                    <h1 class="header-base__title-header">Case Studies</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": "case-study",
    "title": "Case Studies",
    "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.