Custom theme (replace with client name)

Landing Page Header 

<div class="landing-page-header">
    <div class="landing-page-header__background-pattern"> </div>
    <div class="landing-page-header__wrapper">
        <div class="landing-page-header__content">
            <div class="landing-page-header__content-wrapper">
                <div class="landing-page-header__title">
                    <h1 class="landing-page-header__title-text"></h1>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="landing-page-header">
    <div class="landing-page-header__background-pattern">    </div>
    <div class="landing-page-header__wrapper">
        <div class="landing-page-header__content">
            <div class="landing-page-header__content-wrapper">
                {% if breadcrumbs %}
                    <div class="landing-page-header__breadcrumbs">
                        {% include "partials/navigation/breadcrumbs/breadcrumbs.twig" with {
                            background: background,
                        } %}
                    </div>
                {% endif %}
                <div class="landing-page-header__title">
                    <h1 class="landing-page-header__title-text">{{ post.title }}</h1>
                </div>
                {% if post.introText %}
                    <div class="landing-page-header__intro-text">
                        {{ post.introText }}
                    </div>
                {% endif %}
            </div>
        </div>
        {% if post.addImage and post.featuredImage %}
            <div class="landing-page-header__image-container">
                <div class="landing-page-header__featured-image">
                    {% include 'partials/image/image.twig' with {
                        image: post.featuredImage,
                        background: 'dark',
                    } %}
                </div>
            </div>
        {% endif %}
    </div>
</div>
 
/* No context defined. */
  • Content: 
    breakpoint = 1000px
ultraWideBreakpoint = 1700px

.landing-page-header
    --imageBackgroundColor sapphire

    margin auto

    &__wrapper
        position relative
        display flex
        flex-direction column

        +above(breakpoint)
            flex-direction row
            justify-content flex-end
            max-height 560px

    &__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 contentPaddingLarge
        padding-bottom contentPaddingLarge

        +above(breakpoint)
            flex-grow 0
            flex-basis 50%

        +above(ultraWideBreakpoint)
            flex-basis 848px

    &__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)


    &__intro-text
        @extends $bodyLarge
        color var(--introTextColor)
        fluid(font-size, 20px, 24px)

    &__image-container
        background-color var(--imageBackgroundColor)
        display block
        width 100%

        +above(breakpoint)
            display flex
            flex 0 1 50%

    &__featured-image
        height 360px

        +above(breakpoint)
            height 560px
  • URL: /components/raw/landing-page-header/landing-page-header.styl
  • Filesystem Path: patterns/partials/landing-page-header/landing-page-header.styl
  • Size: 1.7 KB
  • Handle: @landing-page-header
  • Preview:
  • Filesystem Path: patterns/partials/landing-page-header/landing-page-header.twig

No notes defined.