University of Florida College of the Arts Pattern Library

Listing header 

<div class="listing-page-header">
    <div class="listing-page-header__background-noise"></div>
    <div class="listing-page-header__gradient"></div>
    <div class="listing-page-header__wrapper">
        <div class="listing-page-header__sidebar">

            <nav aria-label="Programs & Schools menu" class="small-secondary-navigation-container">
                <div class="small-secondary-navigation-container__heading">
                    <button aria-expanded="false" class="js-small-secondary-nav-toggle small-secondary-navigation-container__heading-link" aria-label="Toggle the context menu for Programs & Schools">
                        Programs & Schools
                    </button>
                </div>
                <div data-expanded="false" class="js-small-secondary-nav small-secondary-navigation-container__menu">
                    <ul class="small-secondary-navigation ">
                    </ul>
                </div>
            </nav>
        </div>
        <div class="listing-page-header__content">
            <div class="listing-page-header__breadcrumb">
                <nav aria-label="Breadcrumb navigation" class="breadcrumbs breadcrumbs--dark">
                    <ul class="breadcrumbs__list">
                        <li class="breadcrumbs__item">
                            <a href="#" class="breadcrumbs__item-link">
                                Home</a><span class="breadcrumbs__separator">•</span>
                        </li>
                        <li class="breadcrumbs__item">
                            <a href="#" class="breadcrumbs__item-link">
                                Primary Page One</a><span class="breadcrumbs__separator">•</span>
                        </li>
                        <li class="breadcrumbs__item">
                            <span class="breadcrumbs__item-current">
                                Interior Page One
                            </span>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="listing-page-header__title" aria-hidden="true">
                Listing header
            </div>
            <div class="listing-page-header__featured">
            </div>
        </div>
    </div>
</div>
 
<div class="listing-page-header">
    <div class="listing-page-header__background-noise"></div>
    <div class="listing-page-header__gradient"></div>
    <div class="listing-page-header__wrapper">
        <div class="listing-page-header__sidebar">
            {% include 'partials/navigation/small-secondary-navigation/small-secondary-navigation.twig' %}
        </div>
        <div class="listing-page-header__content">
            {% if breadcrumbs %}
                <div class="listing-page-header__breadcrumb">
                    {% include "partials/navigation/breadcrumbs/breadcrumbs.twig" with {
                        background: 'dark'
                    }%}
                </div>
            {% endif %}
            <div class="listing-page-header__title" aria-hidden="true">
                {{ listingHeader }}
            </div>
            <div class="listing-page-header__featured">
                {% block feature %}
                {% endblock %}
            </div>
        </div>
    </div>
</div>
 
{
  "mainMenu": {
    "currentPageInMenu": true,
    "items": [
      {
        "title": "Programs & Schools",
        "url": "https://google.com",
        "isActive": true,
        "isChildActive": false,
        "isDescendantActive": true,
        "children": []
      },
      {
        "title": "Admissions & Aid",
        "url": "http://google.com",
        "isActive": false,
        "isChildActive": false,
        "isDescendantActive": false,
        "children": []
      },
      {
        "title": "Research & Creative Work",
        "url": "http://google.com",
        "isActive": false,
        "isChildActive": true,
        "isDescendantActive": false,
        "children": [
          {
            "title": "Interior Page 1",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Interior Page 2",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Interior Page 3",
            "url": "http://google.com",
            "isActive": true,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Interior Page 4",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": true,
            "children": []
          },
          {
            "title": "Interior Page 5",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Interior Page 6",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          },
          {
            "title": "Interior Page 7",
            "url": "http://google.com",
            "isActive": false,
            "isChildActive": false,
            "isDescendantActive": false,
            "children": []
          }
        ]
      },
      {
        "title": "About",
        "url": "http://google.com",
        "isActive": false,
        "isChildActive": false,
        "isDescendantActive": false,
        "children": []
      }
    ]
  },
  "eyebrowMenu": {
    "items": [
      {
        "title": "Contact Us",
        "url": "#"
      },
      {
        "title": "Apply",
        "url": "#",
        "isActive": true
      },
      {
        "title": "Make a Gift",
        "url": "#"
      }
    ]
  },
  "breadcrumbs": [
    {
      "title": "Home",
      "url": "#"
    },
    {
      "title": "Primary Page One",
      "url": "#"
    },
    {
      "title": "Interior Page One",
      "url": "#"
    }
  ],
  "listingHeader": "Listing header"
}
  • Content: 
    breakpoint = 1000px

.listing-page-header
    --noiseImage url('../images/noiseOverlay2.png')

    fluid(margin-bottom, 48px, 104px)
    fluid(padding-bottom, 64px, 80px)
    fluid(padding-top, 24px, 48px)
    position relative

    &__gradient
        background blueGradient
        bottom 0
        left 0
        position absolute
        right 0
        top 0

    &__background-noise
        background var(--noiseImage)
        bottom 0
        left 0
        right 0
        opacity 0.1
        position absolute
        top 0
        z-index 1

    &__wrapper
        position relative

        +below(breakpoint)
           @extends $contentContainer

    &__sidebar
        +below(breakpoint)
            margin-bottom 48px

    &__breadcrumb
        display none

        +above(breakpointHeaderLarge)
            display flex
            margin-bottom 72px

    &__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: 964 Bytes

No notes defined.