<div class="event-cards event-cards--background-is-blue">
<div class="event-cards__content">
<div class="event-cards__header">
<h2 class="event-cards__title">
event Cards
</h2>
<div class="event-cards__more-link">
<a href="#" class="standard-button standard-button--onDarkSecondary standard-button-position--default">
<span class="standard-button__text">
See all
</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="event-cards__item">
<div class="event-card event-card--white">
<div class="event-card__content">
<div class="event-card__eyebrow">
Event
</div>
<div class="event-card__header">
<div class="event-card__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="event-card__date">
January 1, 2028
</div>
</div>
<div class="event-card__text-content">
<h2 class="event-card__title">
<a href="#" class="event-card__link">
Mauris nibh felis adipiscing varius in lacinia vel tellus
</a>
</h2>
<div class="event-card__time-and-location">
<div class="event-card__time">
<div class="event-card__time-value">
10:00 AM
<span class="event-card__time-separator">–</span>
2:00 PM
</div>
</div>
<div class="event-card__location">
<div class="event-card__location-name">
The City Venue
</div>
<div class="event-card__location-address">
123 Main St, City, State, ZIP
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="event-cards__item">
<div class="event-card event-card--white">
<div class="event-card__content">
<div class="event-card__eyebrow">
Event
</div>
<div class="event-card__header">
<div class="event-card__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="event-card__date">
January 1, 2028
</div>
</div>
<div class="event-card__text-content">
<h2 class="event-card__title">
<a href="#" class="event-card__link">
Mauris nibh felis adipiscing varius in lacinia vel tellus
</a>
</h2>
<div class="event-card__time-and-location">
<div class="event-card__time">
<div class="event-card__time-value">
10:00 AM
<span class="event-card__time-separator">–</span>
2:00 PM
</div>
</div>
<div class="event-card__location">
<div class="event-card__location-name">
The City Venue
</div>
<div class="event-card__location-address">
123 Main St, City, State, ZIP
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="event-cards__item">
<div class="event-card event-card--white">
<div class="event-card__content">
<div class="event-card__eyebrow">
Event
</div>
<div class="event-card__header">
<div class="event-card__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="event-card__date">
January 1, 2028
</div>
</div>
<div class="event-card__text-content">
<h2 class="event-card__title">
<a href="#" class="event-card__link">
Mauris nibh felis adipiscing varius in lacinia vel tellus
</a>
</h2>
<div class="event-card__time-and-location">
<div class="event-card__time">
<div class="event-card__time-value">
10:00 AM
<span class="event-card__time-separator">–</span>
2:00 PM
</div>
</div>
<div class="event-card__location">
<div class="event-card__location-name">
The City Venue
</div>
<div class="event-card__location-address">
123 Main St, City, State, ZIP
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="event-cards__item">
<div class="event-card event-card--white">
<div class="event-card__content">
<div class="event-card__eyebrow">
Event
</div>
<div class="event-card__header">
<div class="event-card__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="event-card__date">
January 1, 2028
</div>
</div>
<div class="event-card__text-content">
<h2 class="event-card__title">
<a href="#" class="event-card__link">
Mauris nibh felis adipiscing varius in lacinia vel tellus
</a>
</h2>
<div class="event-card__time-and-location">
<div class="event-card__time">
<div class="event-card__time-value">
10:00 AM
<span class="event-card__time-separator">–</span>
2:00 PM
</div>
</div>
<div class="event-card__location">
<div class="event-card__location-name">
The City Venue
</div>
<div class="event-card__location-address">
123 Main St, City, State, ZIP
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="event-cards__item">
<div class="event-card event-card--white">
<div class="event-card__content">
<div class="event-card__eyebrow">
Event
</div>
<div class="event-card__header">
<div class="event-card__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="event-card__date">
January 1, 2028
</div>
</div>
<div class="event-card__text-content">
<h2 class="event-card__title">
<a href="#" class="event-card__link">
Mauris nibh felis adipiscing varius in lacinia vel tellus
</a>
</h2>
<div class="event-card__time-and-location">
<div class="event-card__time">
<div class="event-card__time-value">
10:00 AM
<span class="event-card__time-separator">–</span>
2:00 PM
</div>
</div>
<div class="event-card__location">
<div class="event-card__location-name">
The City Venue
</div>
<div class="event-card__location-address">
123 Main St, City, State, ZIP
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="event-cards__item">
<div class="event-card event-card--white">
<div class="event-card__content">
<div class="event-card__eyebrow">
Event
</div>
<div class="event-card__header">
<div class="event-card__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="event-card__date">
January 1, 2028
</div>
</div>
<div class="event-card__text-content">
<h2 class="event-card__title">
<a href="#" class="event-card__link">
Mauris nibh felis adipiscing varius in lacinia vel tellus
</a>
</h2>
<div class="event-card__time-and-location">
<div class="event-card__time">
<div class="event-card__time-value">
10:00 AM
<span class="event-card__time-separator">–</span>
2:00 PM
</div>
</div>
<div class="event-card__location">
<div class="event-card__location-name">
The City Venue
</div>
<div class="event-card__location-address">
123 Main St, City, State, ZIP
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% set cardBackground = background|default('white') == 'white' ? 'blueTint' : 'white' %}
<div class="event-cards event-cards--background-is-{{ background|default('inherit') }}">
<div class="event-cards__content">
{% if component.heading or component.moreLinkUrl %}
<div class="event-cards__header">
{% if component.heading %}
<h2 class="event-cards__title">
{{component.heading}}
</h2>
{% endif %}
{% if component.moreLinkUrl %}
<div class="event-cards__more-link">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
text: component.moreLinkText,
url: component.moreLinkUrl,
linkType: component.moreLinkType,
variant: component.moreLinkVariant|default('secondary'),
}
} %}
</div>
{% endif %}
</div>
{% endif %}
{% if component.cards | length > 0 %}
{% for event in component.cards %}
{% if event %}
<div class="event-cards__item">
{% include 'partials/event-card/event-card.twig' with { 'event': event, cardBackground: cardBackground} %}
</div>
{% endif %}
{% endfor %}
{% else %}
<span class="event-cards__no-results-message">
No events to show.
</span>
{% endif %}
</div>
</div>
{
"site": {
"title": "National Network of Public Health Institutes"
},
"background": "blue",
"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": []
}
]
}
]
},
"component": {
"type": "event-cards",
"heading": "event Cards",
"moreLinkUrl": "#",
"moreLinkText": "See all",
"moreLinkType": "internal",
"cards": [
{
"type": "Event",
"typeIcon": "calendar",
"title": "Mauris nibh felis adipiscing varius in lacinia vel tellus",
"permalink": "#",
"date": "January 1, 2028",
"startTime": "10:00 AM",
"endTime": "2:00 PM",
"eventLocationName": "The City Venue",
"eventLocationAddress1": "123 Main St, City, State, ZIP",
"isComplete": true
},
{
"type": "Event",
"typeIcon": "calendar",
"title": "Mauris nibh felis adipiscing varius in lacinia vel tellus",
"permalink": "#",
"date": "January 1, 2028",
"startTime": "10:00 AM",
"endTime": "2:00 PM",
"eventLocationName": "The City Venue",
"eventLocationAddress1": "123 Main St, City, State, ZIP",
"isComplete": true
},
{
"type": "Event",
"typeIcon": "calendar",
"title": "Mauris nibh felis adipiscing varius in lacinia vel tellus",
"permalink": "#",
"date": "January 1, 2028",
"startTime": "10:00 AM",
"endTime": "2:00 PM",
"eventLocationName": "The City Venue",
"eventLocationAddress1": "123 Main St, City, State, ZIP",
"isComplete": true
},
{
"type": "Event",
"typeIcon": "calendar",
"title": "Mauris nibh felis adipiscing varius in lacinia vel tellus",
"permalink": "#",
"date": "January 1, 2028",
"startTime": "10:00 AM",
"endTime": "2:00 PM",
"eventLocationName": "The City Venue",
"eventLocationAddress1": "123 Main St, City, State, ZIP",
"isComplete": true
},
{
"type": "Event",
"typeIcon": "calendar",
"title": "Mauris nibh felis adipiscing varius in lacinia vel tellus",
"permalink": "#",
"date": "January 1, 2028",
"startTime": "10:00 AM",
"endTime": "2:00 PM",
"eventLocationName": "The City Venue",
"eventLocationAddress1": "123 Main St, City, State, ZIP",
"isComplete": true
},
{
"type": "Event",
"typeIcon": "calendar",
"title": "Mauris nibh felis adipiscing varius in lacinia vel tellus",
"permalink": "#",
"date": "January 1, 2028",
"startTime": "10:00 AM",
"endTime": "2:00 PM",
"eventLocationName": "The City Venue",
"eventLocationAddress1": "123 Main St, City, State, ZIP",
"isComplete": true
}
],
"moreLinkVariant": "onDarkSecondary"
}
}
.event-cards {
@include fluid(padding-bottom, 2rem, 6rem);
@include fluid(padding-top, 2rem, 6rem);
padding-inline: 1.5rem;
--textColor: var(--black);
&--background-is-blue {
background-color: var(--blue);
--textColor: var(--white);
}
.basic-page__content-wrapper & {
@include fluid(padding-bottom, 1rem, 2rem);
@include fluid(padding-top, 1rem, 2rem);
@include componentWithMargin;
}
&__content {
display: grid;
gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
grid-template-rows: auto;
max-width: 100%;
.basic-page__content-wrapper & {
grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
}
}
&__header {
grid-column: 1/-1;
display: flex;
flex-direction: row;
align-items: end;
gap: 0.5rem;
}
&__title {
@include headline4;
color: var(--textColor);
flex: 0 1 auto;
}
&__more-link {
flex: 0 0 auto;
margin-left: auto;
}
&__more-link-text {
@include body;
display: flex;
flex-flow: row nowrap;
align-items: center;
gap: 0.5rem;
}
&__more-link-icon svg {
width: 1rem;
height: 1rem;
}
/* Card styles */
.home__upcoming-events-section & {
.event-cards__content {
width: 100%;
max-width: 83rem;
margin-inline: auto;
}
}
&__no-results-message {
color: var(--textColor);
}
}
No notes defined.