NNPHI Pattern Library

Listing Header: Default 

<div class="listing-header">
    <div class="listing-header__content-container">
        <div class="listing-header__content">
            <div class="listing-header__secondary-navigation">
                <nav class="secondary-navigation">
                    <div class="secondary-navigation__heading">
                        Programs & Projects
                    </div>
                    <ul class="secondary-navigation">
                        <li class="secondary-navigation__item">
                            <a class="
                                secondary-navigation__item-link
                                                            " href="#">Data Modernization
                            </a>
                        </li>
                        <li class="secondary-navigation__item">
                            <a class="
                                secondary-navigation__item-link
                                                            " href="#">Environmental Health and Emergency Preparedness
                            </a>
                        </li>
                        <li class="secondary-navigation__item">
                            <a class="
                                secondary-navigation__item-link
                                secondary-navigation__item-link--active                            " href="#">Evaluation and Impact
                            </a>
                            <ul class="secondary-navigation-children secondary-navigation-children--">
                                <li class="secondary-navigation-children__item">
                                    <a class="
                    secondary-navigation-children__item-link
                    secondary-navigation-children__item-link--active
                    
                " href="#">Third level example
                                    </a>
                                    <ul class="secondary-navigation-children secondary-navigation-children--">
                                        <li class="secondary-navigation-children__item">
                                            <a class="
                    secondary-navigation-children__item-link
                    secondary-navigation-children__item-link--active
                    
                " href="#">Fourth level example
                                            </a>
                                            <ul class="secondary-navigation-children secondary-navigation-children--">
                                                <li class="secondary-navigation-children__item">
                                                    <a class="
                    secondary-navigation-children__item-link
                    secondary-navigation-children__item-link--active
                    
                " href="#">Fifth level example
                                                    </a>
                                                    <ul class="secondary-navigation-children secondary-navigation-children--">
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li class="secondary-navigation-children__item">
                                            <a class="
                    secondary-navigation-children__item-link
                    
                    
                " href="#">Fourth level example 2
                                            </a>
                                        </li>
                                        <li class="secondary-navigation-children__item">
                                            <a class="
                    secondary-navigation-children__item-link
                    
                    
                " href="#">Fourth level example 3
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="secondary-navigation__item">
                            <a class="
                                secondary-navigation__item-link
                                                            " href="#">Multisector Strategies and Population Health
                            </a>
                        </li>
                        <li class="secondary-navigation__item">
                            <a class="
                                secondary-navigation__item-link
                                                            " href="#">Public Health Events and Convenings Management
                            </a>
                        </li>
                        <li class="secondary-navigation__item">
                            <a class="
                                secondary-navigation__item-link
                                                            " href="#">Public Health Infrastructure Grant
                            </a>
                        </li>
                        <li class="secondary-navigation__item">
                            <a class="
                                secondary-navigation__item-link
                                                            " href="#">Public health training
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="listing-header__text-content">
                <h1 class="listing-header__title">
                    Interior Page
                </h1>
            </div>
        </div>
    </div>
</div>
 
<div class="listing-header">
    <div class="listing-header__content-container">
        <div class="listing-header__content">
            {% if removeSidebar is not defined %}
                <div class="listing-header__secondary-navigation">
                    {% include 'partials/navigation/secondary-navigation/secondary-navigation.twig' %}
                </div>
            {% endif %}
            <div class="listing-header__text-content">
                <h1 class="listing-header__title">
                    {{ post.title }}
                </h1>
                {% if post.introText %}
                    <div class="listing-header__intro-text">
                        {{ post.introText }}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
 
{
  "site": {
    "title": "National Network of Public Health Institutes"
  },
  "background": "white",
  "breadcrumbs": [
    {
      "title": "Home",
      "url": "#"
    },
    {
      "title": "Primary Page One",
      "url": "#"
    },
    {
      "title": "Interior Page One",
      "url": "#"
    }
  ],
  "footerLinks": {
    "items": [
      {
        "title": "Subscribe to our newsletter",
        "url": "#"
      },
      {
        "title": "Explore membership benefits",
        "url": "#"
      },
      {
        "title": "See career opportunities",
        "url": "#"
      }
    ]
  },
  "contactInfo": {
    "copyright": "© National Network of Public Health Institutes. All Rights Reserved",
    "facebookLink": "https://facebook.com",
    "linkedInLink": "https://linkedin.com",
    "youtubeLink": "https://youtube.com",
    "flickrLink": "https://flickr.com",
    "twitterLink": "https://twitter.com",
    "instagramLink": "https://instagram.com",
    "youTubeLink": "https://youtube.com"
  },
  "utilityNavigation": {
    "items": [
      {
        "title": "Member directory",
        "url": "#"
      },
      {
        "title": "Events",
        "url": "#",
        "isActive": true
      },
      {
        "title": "Blog",
        "url": "#"
      }
    ]
  },
  "primaryNavigation": {
    "items": [
      {
        "title": "Workforce resources",
        "url": "#",
        "children": [
          {
            "title": "Resource Directory",
            "url": "#",
            "children": []
          },
          {
            "title": "Trainings",
            "url": "#",
            "children": [
              {
                "title": "Training Level 3 example",
                "url": "#"
              }
            ]
          }
        ]
      },
      {
        "title": "Programs & Projects",
        "url": "#",
        "isDescendantActive": true,
        "children": [
          {
            "title": "Data Modernization",
            "url": "#",
            "children": []
          },
          {
            "title": "Environmental Health and Emergency Preparedness",
            "url": "#",
            "children": []
          },
          {
            "title": "Evaluation and Impact",
            "url": "#",
            "isDescendantActive": true,
            "children": [
              {
                "title": "Third level example",
                "url": "#",
                "isActive": true,
                "children": [
                  {
                    "title": "Fourth level example",
                    "url": "#",
                    "isActive": true,
                    "children": [
                      {
                        "title": "Fifth level example",
                        "url": "#",
                        "isActive": true
                      }
                    ]
                  },
                  {
                    "title": "Fourth level example 2",
                    "url": "#"
                  },
                  {
                    "title": "Fourth level example 3",
                    "url": "#"
                  }
                ]
              }
            ]
          },
          {
            "title": "Multisector Strategies and Population Health",
            "url": "#",
            "children": []
          },
          {
            "title": "Public Health Events and Convenings Management",
            "url": "#",
            "children": []
          },
          {
            "title": "Public Health Infrastructure Grant",
            "url": "#",
            "children": []
          },
          {
            "title": "Public health training",
            "url": "#",
            "children": []
          }
        ]
      },
      {
        "title": "Explore the Network",
        "url": "#",
        "children": [
          {
            "title": "Member Directory",
            "url": "#",
            "children": []
          },
          {
            "title": "Membership paths",
            "url": "#",
            "children": []
          }
        ]
      },
      {
        "title": "Partner with us",
        "url": "#"
      },
      {
        "title": "About",
        "url": "#",
        "children": [
          {
            "title": "Blog",
            "url": "#",
            "children": []
          },
          {
            "title": "Events",
            "url": "#",
            "children": []
          },
          {
            "title": "Newsletters",
            "url": "#",
            "children": []
          },
          {
            "title": "Signature programs",
            "url": "#",
            "children": []
          },
          {
            "title": "Contact us",
            "url": "#",
            "children": []
          },
          {
            "title": "Meet the team",
            "url": "#",
            "children": []
          }
        ]
      }
    ]
  },
  "post": {
    "title": "Interior Page"
  }
}
  • Content: 
    .listing-header {
    $secondaryNavigationBreakpoint: 62.5rem;

    @include fluid(padding-bottom, 2rem, 6rem);
    @include fluid(padding-top, 2rem, 6rem);
    background-color: var(--blueTint);
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA4NDguMjc3IDM1OC45NzciPjxnIHN0eWxlPSJmaWxsOiNjYmU4Zjk7ZmlsbC1vcGFjaXR5OjEiPjxwYXRoIGQ9Ik0tNTQ1LjEzMS45OTdoODI0LjU4MnY1Ny44MDRoLTgyNC41ODJ6TS01OTkuMTEyIDg3LjE4OEgyMjUuNDd2NTcuODA0aC04MjQuNTgyek0tNDM3LjQ0MyAxNzMuNDE3aDgyNC41ODJ2NTcuODA0aC04MjQuNTgyek0tMjY4LjY2NSAyNTkuNjQ3aDgyNC41ODJ2NTcuODA0aC04MjQuNTgyek0tOTMuOTYzIDM0NS44NzdoODI0LjU4MnY1Ny44MDRILTkzLjk2M3pNLTIyMy43NzcgNDMyLjA1Nmg4MjQuNTgydjU3LjgwNGgtODI0LjU4MnpNLTUuMjM0IDUxOC4yOTRoODI0LjU4MnY1Ny44MDRILTUuMjM0ek0xMjYuODEyIDYwNC41MTdoODI0LjU4MnY1Ny44MDRIMTI2LjgxMnpNMTExLjkzMyA2OTAuNzE1aDgyNC41ODJ2NTcuODA0SDExMS45MzN6TTMxMS41MTggNzc2Ljk1SDExMzYuMXY1Ny44MDRIMzExLjUxOHpNMjc1LjMxIDg2My4xNDVoODI0LjU4MnY1Ny44MDRIMjc1LjMxek00NTAuMDEyIDk0OS4zNzVoODI0LjU4MnY1Ny44MDRINDUwLjAxMnoiIHN0eWxlPSJmaWxsOiNjYmU4Zjk7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlLXdpZHRoOi45NjQwMjIiIHRyYW5zZm9ybT0ibWF0cml4KC42ODg0IC0uNzI1MzMgLjAyNjExIC45OTk2NiAtODIuMDg5IDIxOC4xKSIvPjwvZz48L3N2Zz4=");
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 53rem;
    overflow-x: clip;
    overflow-y: hidden;
    &__content-container {
        @include contentContainer;
    }

    &__content {
        position: relative;

        @media (min-width: $secondaryNavigationBreakpoint) {
            display: flex;
            gap: 8rem;
        }
    }

    &__secondary-navigation {
        display: none;

        @media (min-width: $secondaryNavigationBreakpoint) {
            display: block;
            flex: 0 0 320px;
        }
    }

    &__text-content {
        flex: 1 1 auto;
    }

    &__title {
        @include headline1;
    }

    &__intro-text {
        @include bodyLarge;
        color: var(--grayDarkest);
        margin-top: 1.5rem;
        margin-bottom: 3rem;
        max-width: 50rem;
    }
}
  • URL: /components/raw/listing-header/listing-header.scss
  • Filesystem Path: patterns/partials/listing-header/listing-header.scss
  • Size: 2.1 KB

No notes defined.