<div class="resource-header">
    <div class="resource-header__container">
        <div class="metadata-eyebrow metadata-eyebrow--default">
            <div class="metadata-eyebrow__type">
                <div class="metadata-eyebrow__type__icon">
                    <svg role="img" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 24">
                        <title>document</title>
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M20 6.25L14.2857 0.5H0V23.5H20V6.25ZM2.85714 3.375H12.8571V7.6875H17.1429V20.625H2.85714V3.375ZM14.2857 16.3125V17.75H5.71429V16.3125H14.2857ZM14.2857 14.875V13.4375H5.71429V14.875H14.2857ZM14.2857 10.5625V12H5.71429V10.5625H14.2857ZM8.57143 7.6875V6.25H5.71429V7.6875H8.57143Z" />
                    </svg>
                </div>
                <div class="metadata-eyebrow__type__label">
                    Peer-reviewed publication
                </div>
            </div>
            <div class="metadata-eyebrow__separator">|</div>
            <div class="metadata-eyebrow__date">
                November 2021
            </div>
        </div>

        <div class="resource-header__content">
            <h1 class="resource-header__title">
                Systems for Tracking Partner Engagement: A Guide
            </h1>
            <a href="#" class="standard-button standard-button--blue standard-button-position--default">
                <span class="standard-button__text">

                </span>
                <span class="standard-button__external-link-icon">
                    <svg role="img" class="download" viewBox="0 0 16 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <title>download</title>
                        <path d="M8.49957 0H7.48957C7.21957 0 6.98957 0.22 6.98957 0.5V8.09L5.54957 6.65C5.35957 6.46 5.03957 6.46 4.84957 6.65L4.13957 7.36C3.94957 7.55 3.94957 7.87 4.13957 8.06L7.99957 11.92L11.8596 8.06C12.0496 7.87 12.0496 7.55 11.8596 7.36L11.1496 6.65C10.9596 6.46 10.6396 6.46 10.4496 6.65L9.00957 8.09V0.5C9.00957 0.23 8.78957 0 8.50957 0H8.49957Z" />
                        <path d="M0.5 1H4.51C4.78 1 5.01 1.22 5.01 1.5V2.51C5.01 2.78 4.79 3.01 4.51 3.01H2.5C2.23 3.01 2 3.23 2 3.51V12.52C2 12.79 2.22 13.02 2.5 13.02H13.51C13.78 13.02 14.01 12.8 14.01 12.52V3.5C14.01 3.23 13.79 3 13.51 3H11.5C11.23 3 11 2.78 11 2.5V1.49C11 1.22 11.22 0.99 11.5 0.99H15.51C15.78 0.99 16.01 1.21 16.01 1.49V14.5C16.01 14.77 15.79 15 15.51 15H0.5C0.23 15 0 14.78 0 14.5V1.5C0 1.23 0.22 1 0.5 1Z" />
                    </svg>
                </span>
            </a>
        </div>
        <div class="resource-header__featured-image">
            <img src="holder.js/980x560?auto=yes&outline=yes" alt="" height="" width="">
        </div>
    </div>
</div>
<div class="resource-header">
    <div class="resource-header__container">
        {% include 'partials/metadata-eyebrow/metadata-eyebrow.twig' with {
            post: {
                type: post.resourceType,
                date: post.creationDateDisplay,
                typeIcon: post.resourceTypeIcon,
            }
        } %}

        <div class="resource-header__content">
            <h1 class="resource-header__title">
                {{ post.title }}
            </h1>
            {% include 'bits/standard-button/standard-button.twig' with {
                button: {
                    text: post.resourceButtonText,
                    url: post.resourceUrl,
                    linkType: post.resourceLinkType,
                    variant: 'blue'
                }
            } %}
        </div>
        {% if post.featuredImage %}
            <div class="resource-header__featured-image">
                <img src="{{ post.featuredImage.src | towebp }}"
                     alt="{{ post.featuredImage.alt ?: '' }}"
                     height="{{ post.featuredImage.height }}"
                     width="{{ post.featuredImage.width }}">
            </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": []
          }
        ]
      }
    ]
  },
  "post": {
    "title": "Systems for Tracking Partner Engagement: A Guide",
    "resourceType": "Peer-reviewed publication",
    "resourceUrl": "#",
    "resourceTypeIcon": "document-icon",
    "resourceLinkType": "file",
    "resourceFileType": "PDF",
    "resourceFileSize": "152 KB",
    "creationDateDisplay": "November 2021",
    "addImage": true,
    "featuredImage": {
      "src": "holder.js/980x560?auto=yes&outline=yes",
      "altText": "a placeholder"
    }
  }
}
  • Content:
    .resource-header {
        &__container {
            @include contentContainer;
            align-items: flex-start;
            display: flex;
            flex-direction: column;
            max-width: 100%;
            padding-bottom: 5.75rem;
            padding-top: 7.5rem;
            position: relative;
        }
    
        &__content {
            align-items: flex-end;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 2rem;
            justify-content: space-between;
            margin-top: 2.25rem;
            width: 100%;
        }
    
        &__title {
            @include headline1;
            flex: 1 1 70%;
        }
    
        &__featured-image {
            align-items: center;
            display: flex;
            justify-content: center;
            margin-top: 3.5rem;
            width: 100%;
    
            & img {
                max-height: 35rem;
                width: auto;
            }
        }
    }
    
  • URL: /components/raw/resource-header/resource-header.scss
  • Filesystem Path: patterns/partials/resource-header/resource-header.scss
  • Size: 846 Bytes

No notes defined.