<div class="homepage-who-section">
    <div class="homepage-who-section__wrapper">
        <div class="homepage-who-section__top-decoration"></div>
        <h2 class="homepage-who-section__title">Who we are</h2>
        <div class="homepage-who-section__text">
            <p>NNPHI is the funding intermediary for <strong>public health institutes</strong> (PHIs) nationwide. These nonprofit, non-partisan organizations excel at replicating models and scaling projects locally and statewide. With a presence in all 50 states and many territories, our <strong>national network</strong> can move quickly and efficiently to strengthen the work of local and state public health workers.</p>
        </div>
        <div class="homepage-who-section__bottom-decoration"></div>
    </div>
</div>
<div class="homepage-who-section">
    <div class="homepage-who-section__wrapper">
        <div class="homepage-who-section__top-decoration"></div>
        <h2 class="homepage-who-section__title">{{ whoSection.title }}</h2>
        <div class="homepage-who-section__text">{{ whoSection.text | raw }}</div>
        <div class="homepage-who-section__bottom-decoration"></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": []
          }
        ]
      }
    ]
  },
  "whoSection": {
    "title": "Who we are",
    "text": "<p>NNPHI is the funding intermediary for <strong>public health institutes</strong> (PHIs) nationwide. These nonprofit, non-partisan organizations excel at replicating models and scaling projects locally and statewide. With a presence in all 50 states and many territories, our <strong>national network</strong> can move quickly and efficiently to strengthen the work of local and state public health workers.</p>",
    "enabled": true,
    "isComplete": true
  }
}
  • Content:
    $breakpoint: 57rem;
    
    .homepage-who-section {
        overflow-x: hidden;
        background: var(--white);
    
        &__wrapper {
            @include contentContainer;
            padding-block: 9rem;
            position: relative;
    
            @media(min-width: $breakpoint) {
                align-items: flex-start;
                display: flex;
                gap: 8rem;
            }
        }
    
        &__top-decoration {
            position: absolute;
            top: 4rem;
            left: 0;
            right: 0;
    
            &:before {
                background-color: var(--blue);
                content: '';
                height: 1rem;
                position: absolute;
                right: calc(50% + 5rem);
                top: -1rem;
                transform-origin: bottom left;
                transform: skewX(-45deg);
                width: 100vw;
    
                @media (min-width: $breakpoint) {
                    right: calc(100% - 5rem);
                }
            }
    
            &:after {
                background-color: var(--orange);
                content: '';
                height: 2rem;
                position: absolute;
                right: 50%;
                top: 0;
                transform-origin: bottom left;
                transform: skewX(-45deg);
                width: 100vw;
    
                @media (min-width: $breakpoint) {
                    right: calc(100% - 17rem);
                }
            }
        }
    
        &__title {
            @include billboardTitle;
            color: var(--purple);
            flex: 0 0 17rem;
            margin-bottom: 1rem;
    
            @media(min-width: $breakpoint) {
                margin-bottom: 0;
            }
        }
    
        &__text {
            @include bodyLarge;
            color: var(--black);
    
            & em {
                font-style: italic;
            }
            & strong {
                font-weight: 600;
            }
        }
    
        &__bottom-decoration {
            background-color: var(--yellow);
            bottom: 4rem;
            height: 1rem;
            left: 50%;
            position: absolute;
            transform-origin: bottom left;
            transform: skewX(-22.5deg);
            width: 100vw;
    
            @media (min-width: $breakpoint) {
                left: 17rem;
            }
        }
    }
    
  • URL: /components/raw/homepage-who-section/homepage-who-section.scss
  • Filesystem Path: patterns/partials/homepage/homepage-who-section/homepage-who-section.scss
  • Size: 2.1 KB
  • Handle: @homepage-who-section
  • Preview:
  • Filesystem Path: patterns/partials/homepage/homepage-who-section/homepage-who-section.twig

No notes defined.