FAA Pattern Library - Music

Listing Sidebar 

<div class="listing-sidebar">
    <div class="listing-sidebar__header listing-sidebar__header--music">
        <h1 class="listing-sidebar__title ">

        </h1>
    </div>
</div>
 
<div class="listing-sidebar">
    <div class="listing-sidebar__header listing-sidebar__header--{{ siteUnit }}">
        {% if breadcrumbs %}
            <div class="listing-sidebar__breadcrumbs">
                {% include "partials/breadcrumbs/breadcrumbs.twig" %}
            </div>
        {% endif %}
        <h1 class="listing-sidebar__title {{ noWrap ? 'listing-sidebar__title--no-wrap' : '' }}">
            {{ post.title }}
        </h1>
    </div>
    {% include "partials/secondary-navigation/secondary-navigation.twig" %}
</div>
 
{
  "siteUnit": "music",
  "departmentName": "Music",
  "background": "light"
}
  • Content: 
    .listing-sidebar
    breakpoint = 1000px

    &__header
        background-color cloud
        padding 60px 48px 0

        +above(breakpoint)
            padding 0
        &--college
            background-color white
        &--music
            background-color almaMaterDark
        &--music .listing-sidebar__title
            color white

    &__breadcrumbs
        +below(breakpoint)
            display none

    &__title
        @extends $secondaryTitle
        padding 32px 0

        +above(breakpoint)
            padding 16px 0 48px

        &--no-wrap
            +above(breakpoint)
                white-space nowrap
  • URL: /components/raw/listing-sidebar/listing-sidebar.styl
  • Filesystem Path: components/partials/listing-sidebar/listing-sidebar.styl
  • Size: 632 Bytes
  • Handle: @listing-sidebar
  • Preview:
  • Filesystem Path: components/partials/listing-sidebar/listing-sidebar.twig

There are no notes for this item.