University of Florida College of the Arts Pattern Library

Unit header 

<div class="unit-header">
    <div class="unit-header__wrapper">
        <div class="unit-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="unit-header__content">
            <div class="unit-header__breadcrumb">
                <nav aria-label="Breadcrumb navigation" class="breadcrumbs breadcrumbs--light">
                    <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>
            <h1 class="unit-header__title">

            </h1>
            <div class="unit-header__summary">

            </div>
        </div>
    </div>
</div>
 
<div class="unit-header">
    <div class="unit-header__wrapper">
        <div class="unit-header__sidebar">
            {% include 'partials/navigation/small-secondary-navigation/small-secondary-navigation.twig' %}
        </div>
        <div class="unit-header__content">
            {% if breadcrumbs %}
                <div class="unit-header__breadcrumb">
                    {% include "partials/navigation/breadcrumbs/breadcrumbs.twig" with {
                        background: 'light'
                    }%}
                </div>
            {% endif %}
            <h1 class="unit-header__title">
                {{ post.title }}
            </h1>
            <div class="unit-header__summary">
                {{ post.summary }}
            </div>
            {% if post.featuredImage.src %}
                <picture class="unit-header__picture">
                    <img class="unit-header__image" src="{{ post.featuredImage.src | resize(1232, 693) | towebp }}"
                         data-cy="unit-header__image" width="16" height="9" alt='{{ post.featuredImage.altText }}'/>
                </picture>
                {% if post.featuredImage.caption %}
                    <figcaption class="unit-header__caption wp-element-caption">
                        {{ post.featuredImage.caption }}
                    </figcaption>
                {% endif %}
            {% endif %}
        </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 = 1024px

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

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

    &__wrapper
        position relative

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

    &__breadcrumb
        display none

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

    &__title
        @extends $headline1
        @extends $textGradient
        fluid(margin-bottom, 16px, 24px)
        text-align center

    &__summary
        @extends $bodyLarge
        color grey500
        fluid(margin-bottom, 32px, 48px)
        margin-left auto
        margin-right auto
        max-width 880px
        text-align center

    &__picture
    &__image
        border-radius 8px
        overflow hidden

    &__image
        height auto
        object-fit cover
        width 100%
  • URL: /components/raw/unit-header/unit-header.styl
  • Filesystem Path: patterns/templates/unit-header/unit-header.styl
  • Size: 938 Bytes

No notes defined.