<div class="profile-header">
    <div class="profile-header__content-container">
        <div class="profile-header__content">
            <div class="profile-header__text-content">
                <h1 class="profile-header__title">
                    Wendy D. Sanchez
                </h1>
                <div class="profile-header__intro-text">
                    Program Manager-Partner Relations
                </div>
            </div>
            <div class="profile-header__featured-image">
                <img src="holder.js/450x450?auto=yes&outline=yes" alt="" height="450" width="450">
            </div>
        </div>
    </div>
</div>
<div class="profile-header">
    <div class="profile-header__content-container">
        <div class="profile-header__content">
            <div class="profile-header__text-content">
                <h1 class="profile-header__title">
                    {{ fullName }}
                </h1>
                {% if role %}
                    <div class="profile-header__intro-text">
                        {{ role }}
                    </div>
                {% endif %}
            </div>
            {% if addImage and featuredImage.src|default(false) %}
                <div class="profile-header__featured-image">
                    <img src="{{ featuredImage.src | towebp | resize(450,450) }}"
                        alt="{{ featuredImage.alt ?: '' }}"
                        height="450"
                        width="450">
                </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": []
          }
        ]
      }
    ]
  },
  "fullName": "Wendy D. Sanchez",
  "role": "Program Manager-Partner Relations",
  "addImage": true,
  "featuredImage": {
    "src": "holder.js/450x450?auto=yes&outline=yes",
    "altText": "a placeholder"
  }
}
  • Content:
    .profile-header {
        @include fluid(padding-bottom, 2rem, 6rem);
        @include fluid(padding-top, 2rem, 6rem);
    
        &__content-container {
            @include contentContainer;
        }
    
        &__content {
            display: flex;
            flex-wrap: wrap;
            max-width: 100%;
        }
    
        &__title {
            @include headline1;
        }
    
        &__intro-text {
            @include bodyLarge;
            color: var(--grayDarkest);
            margin-top: 1.5rem;
            margin-bottom: 3rem;
            max-width: 50rem;
        }
    
        &__text-content {
            flex-shrink: 1;
            flex-grow: 2;
            flex-basis: 400px;
        }
    
        &__featured-image {
            flex-grow: 0;
            flex-shrink: 1;
            flex-basis: 320px;
            height: auto;
            margin-block-start: 1rem;
    
            & .captioned-image__caption {
                font-size: .875rem;
            }
        }
    }
    
  • URL: /components/raw/profile-header/profile-header.scss
  • Filesystem Path: patterns/partials/profile-header/profile-header.scss
  • Size: 845 Bytes

No notes defined.