<div class="home-programs-section">
    <div class="home-programs-section__content-container">
        <h2 class="home-programs-section__header">National public health priorities</h2>
        <div class="home-programs-section__description">With a presence in <strong>all 50 states</strong> and numerous territories, NNPHI is identifying gaps in public health infrastructure. Our programs teams and network members are ready to work with philanthropic partners in <em>key areas</em> impacting population health.</div>
        <div class="home-programs-section__cards">
            <div class="home-programs-section__card">
                <span class="home-programs-section__card-text">Behavior health</span>
                <div class="home-programs-section__button-container">
                    <a href="#" class="standard-button  standard-button-position--default">
                        <span class="standard-button__text">
                            Learn more
                        </span>
                        <span class="standard-button__chevron-icon">
                            <svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
                                <title>right chevron</title>
                                <path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
                            </svg>
                        </span>
                    </a>
                </div>
            </div>
            <div class="home-programs-section__card">
                <span class="home-programs-section__card-text">Chronic diseases</span>
                <div class="home-programs-section__button-container">
                    <a href="#" class="standard-button  standard-button-position--default">
                        <span class="standard-button__text">
                            Learn more
                        </span>
                        <span class="standard-button__chevron-icon">
                            <svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
                                <title>right chevron</title>
                                <path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
                            </svg>
                        </span>
                    </a>
                </div>
            </div>
            <div class="home-programs-section__card">
                <span class="home-programs-section__card-text">Workforce training</span>
                <div class="home-programs-section__button-container">
                    <a href="#" class="standard-button  standard-button-position--default">
                        <span class="standard-button__text">
                            Learn more
                        </span>
                        <span class="standard-button__chevron-icon">
                            <svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
                                <title>right chevron</title>
                                <path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
                            </svg>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="home-programs-section">
    <div class="home-programs-section__content-container">
        <h2 class="home-programs-section__header">{{ programsSection.header }}</h2>
        <div class="home-programs-section__description">{{ programsSection.description | raw }}</div>
        <div class="home-programs-section__cards">
            {% for card in programsSection.portfolioCards %}
                <div class="home-programs-section__card">
                    <span class="home-programs-section__card-text">{{ card.text }}</span>
                    <div class="home-programs-section__button-container">
                        {% include 'bits/standard-button/standard-button.twig' with {
                            button: {
                                text: 'Learn more',
                                url: card.link,
                                linkType: 'internal',
                            }
                        } %}
                    </div>
                </div>
            {% endfor %}
        </div>
        {% if programsSection.addCta %}
            <div class="home-programs-section__cta">
                {% include 'bits/standard-button/standard-button.twig' with {
                    button: {
                        text: programsSection.ctaLinkText,
                        url: programsSection.ctaLinkReference,
                        linkType: component.ctaLinkType,
                        variant: 'onDarkSecondary'
                    }
                } %}
            </div>
        {% endif %}
    </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": []
          }
        ]
      }
    ]
  },
  "programsSection": {
    "header": "National public health priorities",
    "description": "With a presence in <strong>all 50 states</strong> and numerous territories, NNPHI is identifying gaps in public health infrastructure. Our programs teams and network members are ready to work with philanthropic partners in <em>key areas</em> impacting population health.",
    "portfolioCards": [
      {
        "text": "Behavior health",
        "link": "#"
      },
      {
        "text": "Chronic diseases",
        "link": "#"
      },
      {
        "text": "Workforce training",
        "link": "#"
      }
    ],
    "addCta": false,
    "ctaLinkText": "Learn more about what we offer members",
    "ctaLinkReference": "#",
    "ctaLinkType": "internal",
    "isComplete": true,
    "showSection": true
  }
}
  • Content:
    $breakpointHomepage: 47.5rem; // 760px
    
    .home-programs-section {
        --cardBackgroundColor: var(--lightBlue);
        --textColor: var(--white);
        --cardSkew: -8deg;
    
        background-color: var(--purple);
        width: 100%;
    
        &__content-container {
            @include contentContainer;
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            max-width: 60rem;
            @include fluid(padding-bottom, 4.5rem, 7rem);
            @include fluid(padding-top, 4.5rem, 7rem);
        }
    
        &__header {
            @include headline2;
            color: var(--textColor);
            margin-bottom: 2rem;
        }
    
        &__description {
            @include richText;
            @include bodyLarge;
            color: var(--textColor);
            @include fluid('font-size', 1rem, 1.5rem);
            font-weight: 200;
            margin-bottom: 3.75rem;
            max-width: 60rem;
            text-align: center;
        }
    
        &__cards {
            column-gap: 2rem;
            display: grid;
            grid-template-columns: repeat(auto-fit, min(20rem, 100%));
            grid-template-rows: auto;
            justify-content: center;
            padding-left: 1.75rem;
            row-gap: 1.5rem;
            width: 100%;
    
            @media (min-width: 31.25rem) {
                padding-left: 0;
            }
        }
    
        &__card {
            align-items: center;
            background-color: var(--cardBackgroundColor);
            display: flex;
            flex-direction: column;
            @include fluid(height, 14rem, 17rem);
            justify-content: center;
            margin-right: 2rem;
            max-width: 20rem;
            position: relative;
    
            &:before {
                background-color: var(--cardBackgroundColor);
                bottom: -3rem;
                content: '';
                inset: 0;
                position: absolute;
                transform-origin: top right;
                transform: skewX(var(--cardSkew));
            }
    
            &:after {
                background-color: var(--cardBackgroundColor);
                bottom: -3rem;
                content: '';
                inset: 0;
                position: absolute;
                transform-origin: bottom right;
                transform: skewX(var(--cardSkew));
                z-index: 0;
            }
        }
    
        &__card-text {
            @include headline5;
            color: var(--purple);
            padding: 0 1rem;
            position: relative;
            text-align: center;
            z-index: 1;
        }
    
        &__button-container {
            margin-top: 3.5rem;
            z-index: 1;
            & * {
                @include fluid(font-size, 0.675rem, 0.875rem);
            }
        }
    
        &__cta {
            margin-top: 4rem;
    
            @media (max-width: #{$breakpointHomepage}) {
                width: 100%;
            }
    
            > * {
                @media (max-width: #{$breakpointHomepage}) {
                    width: 100%;
                }
            }
        }
    }
    
  • URL: /components/raw/homepage-programs-section/homepage-programs-section.scss
  • Filesystem Path: patterns/partials/homepage/homepage-programs-section/homepage-programs-section.scss
  • Size: 2.8 KB

No notes defined.