FAA Pattern Library - Music

Listing Header 

<div class="listing-page-header listing-page-header--music">
    <div class="listing-page-header__container listing-page-header__container--music">
        <div class="listing-page-header__content">
            <div class="listing-page-header__heading">
                <div class="listing-page-header__breadcrumb listing-page-header__breadcrumb--music">
                </div>
                <h1 class="listing-page-header__title">

                </h1>
                <div class="listing-page-header__navigation listing-page-header__navigation--music">
                </div>
            </div>
            <div class="listing-page-header__featured">
            </div>
        </div>
    </div>
</div>
 
<div class="listing-page-header listing-page-header--{{ siteUnit }}">
    <div class="listing-page-header__container listing-page-header__container--{{ siteUnit }}">
        <div class="listing-page-header__content">
            <div class="listing-page-header__heading">
                <div class="listing-page-header__breadcrumb listing-page-header__breadcrumb--{{ siteUnit }}">
                    {% include "partials/breadcrumbs/breadcrumbs.twig" %}
                </div>
                <h1 class="listing-page-header__title">
                    {{ post.title }}
                </h1>
                <div class="listing-page-header__navigation listing-page-header__navigation--{{ siteUnit }}">
                    {% include "partials/secondary-navigation/secondary-navigation.twig" %}
                </div>
            </div>
            <div class="listing-page-header__featured">
                {% block feature %}
                {% endblock %}
            </div>
        </div>
    </div>
</div>
 
{
  "siteUnit": "music",
  "departmentName": "Music",
  "background": "light"
}
  • Content: 
    .listing-page-header
    breakpoint = 1000px
    background-color cloud
    fluid(padding-bottom, 500px, maxContentWidth, 48px, 64px)
    position relative

    &--durp
        &:before
            background-color illiniOrange
            content ""
            display block
            height 8px
            left 0
            position absolute
            right 0
            top 0

    &--music
        background-color almaMaterDark

    &__container
        @extends $contentContainer
        padding-top 60px
        z-index 1
        &--durp
            padding-top 68px
    &__content
        +above(breakpoint)
            display flex
    &__heading
        +above(breakpoint)
            width 320px
            margin-right 128px
    &__breadcrumb
        +below(breakpoint)
            display none
        &--durp
            margin-top 56px
    &__title
        @extends $secondaryTitle
        margin-top 16px
        +below(breakpoint)
            margin-bottom 32px
            margin-top 32px
    &__navigation
        margin-top 48px
        position relative
        +below(breakpoint)
            position absolute
            left 0
            margin 0
            right 0
            top 0
        & > *
            position absolute
            top 0
            left 0
            right 0
            z-index 1
        &--durp
            +below(breakpoint)
                margin-top 8px
    &__featured
        flex 1

    &--music &__title
            color white
  • URL: /components/raw/listing-header/listing-header.styl
  • Filesystem Path: components/templates/listing-header/listing-header.styl
  • Size: 1.5 KB

There are no notes for this item.