NNPHI Pattern Library

Basic Header: Default 

<div class="basic-header basic-header--blue">
    <div class="basic-header__content-container">
        <div class="basic-header__content">
            <div class="basic-header__text-content">
                <h1 class="basic-header__title">
                    Interior Page
                </h1>
            </div>
        </div>
    </div>
</div>
 
<div class="basic-header {{ background ? 'basic-header--blue' }}">
    <div class="basic-header__content-container">
        <div class="basic-header__content">
            <div class="basic-header__text-content">
                <h1 class="basic-header__title">
                    {{ post.title }}
                </h1>
                {% if post.introText %}
                    <div class="basic-header__intro-text">
                        {{ post.introText }}
                    </div>
                {% endif %}
            </div>
            {% if post.addImage and post.featuredImage %}
                <div class="basic-header__featured-image">
                    <img src="{{ post.featuredImage.src | towebp | resize(800) }}"
                        alt="{{ post.featuredImage.alt ?: '' }}"
                        height="{{ post.featuredImage.height }}"
                        width="{{ post.featuredImage.width }}">
                </div>
            {% endif %}
        </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: 
    .basic-header {
    @include fluid(padding-bottom, 2rem, 6rem);
    @include fluid(padding-top, 2rem, 6rem);

    &--blue {
        background-color: var(--blueTint);
    }

    &__content-container {
        @include contentContainer;
    }

    &__content {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
        column-gap: 2rem;
        max-width: 100%;
    }

    &__title {
        @include headline1;
    }

    &__intro-text {
        @include bodyLarge;
        color: var(--grayDarkest);
        margin-top: 1.5rem;
        margin-bottom: 3rem;
        max-width: 50rem;
    }

    &__featured-image {
        width: 100%;
        height: auto;

        & .captioned-image__caption {
            font-size: .875rem;
        }
    }
}
  • URL: /components/raw/basic-header/basic-header.scss
  • Filesystem Path: patterns/partials/basic-header/basic-header.scss
  • Size: 800 Bytes

No notes defined.