Custom theme (replace with client name)

Listing Header 

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

    <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__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"></h1>
                </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>
 
/* No context defined. */
  • Content: 
    breakpoint = 1000px

.listing-page-header
    &--focus-area
        --backgroundColor greenAppleDK3
    &--practice
        --backgroundColor aquaDk
    &--case-study
    &--news
    &--press-release
        --backgroundColor grape

    background-color var(--backgroundColor)

    &__background-pattern
        background-image url('/app/themes/custom/assets/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: 721 Bytes

No notes defined.