<div class="event-header">
<div class="event-header__container">
<div class="metadata-eyebrow metadata-eyebrow--default">
<div class="metadata-eyebrow__type">
<div class="metadata-eyebrow__type__icon">
<svg role="img" width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>calendar</title>
<path d="M13 32.5H19.5V39H13V32.5Z" />
<path d="M29.25 32.5H22.75V39H29.25V32.5Z" />
<path d="M32.5 32.5H39V39H32.5V32.5Z" />
<path d="M19.5 22.75H13V29.25H19.5V22.75Z" />
<path d="M22.75 22.75H29.25V29.25H22.75V22.75Z" />
<path d="M39 22.75H32.5V29.25H39V22.75Z" />
<path d="M0 0H52V52H0V0ZM45.5 16.25H6.5V45.5H45.5V16.25Z" />
</svg>
</div>
<div class="metadata-eyebrow__type__label">
Event
</div>
</div>
<div class="metadata-eyebrow__separator">|</div>
<div class="metadata-eyebrow__date">
January 1, 2020
</div>
</div>
<div class="event-header__content">
<h1 class="event-header__title">
Lorem nibh felis adipiscing varius adipiscing in lacinia vel tellus urnaior
</h1>
<div class="event-header__time-location">
<div class="event-header__time">
<div class="event-header__item-label">
Time
</div>
<div class="event-header__time-value">
10:00 AM
<span class="event-header__time-separator">–</span>
2:00 PM
</div>
</div>
<div class="event-header__location">
<div class="event-header__item-label">
Location
</div>
<div class="event-header__location-name">
The City Venue
</div>
<div class="event-header__location-address">
123 Main St
<br>City, State, ZIP
</div>
</div>
</div>
<div class="event-header__calls-to-action">
<a href="#" class="standard-button standard-button--primary standard-button-position--default">
<span class="standard-button__text">
Register
</span>
<span class="standard-button__external-link-icon">
<svg role="img" class="external-link" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<title>external</title>
<path class="_mark external-link__shape" fill-rule="evenodd" clip-rule="evenodd" d="M12.5858 2H10C9.44771 2 9 1.55228 9 1C9 0.447715 9.44771 0 10 0H16V6C16 6.55228 15.5523 7 15 7C14.4477 7 14 6.55228 14 6V3.41421L5.70711 11.7071C5.31658 12.0976 4.68342 12.0976 4.29289 11.7071C3.90237 11.3166 3.90237 10.6834 4.29289 10.2929L12.5858 2ZM2 14H12V9C12 8.44771 12.4477 8 13 8C13.5523 8 14 8.44771 14 9V16H0V2H7C7.55228 2 8 2.44772 8 3C8 3.55228 7.55228 4 7 4H2V14Z" />
</svg>
</span>
</a>
<a href="#" class="standard-button standard-button--secondary standard-button-position--default">
<span class="standard-button__text">
Attend via Zoom
</span>
<span class="standard-button__external-link-icon">
<svg role="img" class="external-link" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<title>external</title>
<path class="_mark external-link__shape" fill-rule="evenodd" clip-rule="evenodd" d="M12.5858 2H10C9.44771 2 9 1.55228 9 1C9 0.447715 9.44771 0 10 0H16V6C16 6.55228 15.5523 7 15 7C14.4477 7 14 6.55228 14 6V3.41421L5.70711 11.7071C5.31658 12.0976 4.68342 12.0976 4.29289 11.7071C3.90237 11.3166 3.90237 10.6834 4.29289 10.2929L12.5858 2ZM2 14H12V9C12 8.44771 12.4477 8 13 8C13.5523 8 14 8.44771 14 9V16H0V2H7C7.55228 2 8 2.44772 8 3C8 3.55228 7.55228 4 7 4H2V14Z" />
</svg>
</span>
</a>
</div>
<figure class="event-header__image">
<img src="holder.js/880x560?auto=yes&outline=yes" alt="" height="" width="">
<figcaption class="text__image-caption">
Caption of image
</figcaption>
</figure>
</div>
</div>
</div>
<div class="event-header">
<div class="event-header__container">
{% include 'partials/metadata-eyebrow/metadata-eyebrow.twig' with {
colorVariant: 'purple',
} %}
<div class="event-header__content">
<h1 class="event-header__title">
{{ post.title }}
</h1>
<div class="event-header__time-location">
{% if not post.allDayEvent %}
{% if post.startTime %}
<div class="event-header__time">
<div class="event-header__item-label">
Time
</div>
<div class="event-header__time-value">
{% if post.startTime %}
{{ post.startTime | date('g:i A') }}
{% endif %}
{% if post.endTime %}
<span class="event-header__time-separator">–</span>
{{ post.endTime | date('g:i A') }}
{% endif %}
</div>
</div>
{% endif %}
{% endif %}
{% if post.eventLocationName or post.eventLocationAddress1 or post.eventLocationAddress2 %}
<div class="event-header__location">
<div class="event-header__item-label">
Location
</div>
<div class="event-header__location-name">
{{ post.eventLocationName }}
</div>
<div class="event-header__location-address">
{% if post.eventLocationAddress1 %}
{{ post.eventLocationAddress1 }}
{% endif %}
{% if post.eventLocationAddress2 %}
<br>{{ post.eventLocationAddress2 }}
{% endif %}
</div>
</div>
{% endif %}
</div>
{% if post.callsToAction|length > 0 %}
<div class="event-header__calls-to-action">
{% for callToAction in post.callsToAction %}
{% include 'bits/standard-button/standard-button.twig' with {
button: {
text: callToAction.linkText,
url: callToAction.linkUrl,
linkType: callToAction.linkType,
variant: callToAction.variant|default('secondary'),
}
} %}
{% endfor %}
</div>
{% endif %}
{% block image %}
{% if post.featuredImage %}
<figure class="event-header__image">
<img src="{{ post.featuredImage.src | towebp | resize(880) }}" alt="{{ post.featuredImage.alt ?: '' }}" height="{{ post.featuredImage.height }}" width="{{ post.featuredImage.width }}">
{% if post.featuredImage.caption %}
<figcaption class="text__image-caption">
{{ post.featuredImage.caption }}
</figcaption>
{% endif %}
</figure>
{% endif %}
{% endblock %}
</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": "Lorem nibh felis adipiscing varius adipiscing in lacinia vel tellus urnaior",
"addImage": true,
"type": "Event",
"typeIcon": "calendar",
"date": "January 1, 2020",
"startTime": "10:00 AM",
"endTime": "2:00 PM",
"eventLocationName": "The City Venue",
"eventLocationAddress1": "123 Main St",
"eventLocationAddress2": "City, State, ZIP",
"callsToAction": [
{
"linkText": "Register",
"linkUrl": "#",
"linkType": "external",
"variant": "primary"
},
{
"linkText": "Attend via Zoom",
"linkUrl": "#",
"linkType": "external",
"variant": "secondary"
}
],
"featuredImage": {
"src": "holder.js/880x560?auto=yes&outline=yes",
"altText": "a placeholder",
"caption": "Caption of image"
}
}
}
.event-header {
&__container {
@include contentContainer;
@include fluid(padding-bottom, 2rem, 6rem);
@include fluid(padding-top, 2rem, 5rem);
align-items: flex-start;
display: flex;
flex-direction: column;
max-width: 100%;
position: relative;
}
&__content {
display: flex;
flex-direction: column;
gap: 2rem;
align-items: flex-start;
width: 100%;
max-width: 100%;
position: relative;
margin-top: 2.25rem;
}
&__title {
@include headline3;
color: var(--black);
}
&__summary {
@include bodyLarge;
color: var(--navy);
font-weight: 300;
}
&__time-location {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
&__item-label {
@include detailBold;
color: var(--black);
font-weight: 700;
}
&__calls-to-action {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
}
No notes defined.