Custom theme (replace with client name)

Listing Header 

<div class="listing-page-header">
    <div class="listing-page-header__wrapper listing-page-header__wrapper--no-sidebar">
        <div class="listing-page-header__content">
            <h1 class="listing-page-header__title">

            </h1>
            <div class="listing-page-header__featured">
            </div>
        </div>
    </div>
</div>
 
<div class="listing-page-header">
    <div class="listing-page-header__wrapper {{ (sidebar|default) ? 'listing-page-header__wrapper--sidebar' : 'listing-page-header__wrapper--no-sidebar' }}">
        {% if sidebar %}
            <div class="listing-page-header__sidebar">
            </div>
        {% endif %}
        <div class="listing-page-header__content">
            {% if breadcrumbs %}
                <div class="listing-page-header__breadcrumb">
                    {% include "partials/navigation/breadcrumbs/breadcrumbs.twig" %}
                </div>
            {% endif %}
            <h1 class="listing-page-header__title">
                {{ post.title }}
            </h1>
            <div class="listing-page-header__featured">
                {% block feature %}
                {% endblock %}
            </div>
        </div>
    </div>
</div>
 
/* No context defined. */
  • Content: 
    breakpoint = 1000px

.listing-page-header
    background-color charcoalLight
    fluid(padding-bottom, 64px, 80px)
    fluid(padding-top, 64px, 80px)

    &__wrapper
        position relative

        &--sidebar
            @extends $contentContainer

            +above(breakpoint)
                display grid
                grid-template-columns 320px minmax(0, 1fr)

        &--no-sidebar
            @extends $contentContainerInterior

    &__breadcrumb
        display none

        +above(1000px)
            display flex
            margin-bottom 32px

    &__title
        @extends $headline1
        color white

    &__featured
        flex 1
  • URL: /components/raw/listing-header/listing-header.styl
  • Filesystem Path: patterns/templates/listing-header/listing-header.styl
  • Size: 655 Bytes

No notes defined.