<div class="event-card event-card--white">
<a href="#" class="event-card__link" aria-labelledby="mauris-nibh-felis-adipiscing-varius-in-lacinia-vel-tellus" data-has-animation="false">
<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" aria-label="Event title: Mauris nibh felis adipiscing varius in lacinia vel tellus. Event dates: January 1, 2028 from 10:00 AM to 2:00 PM">
Mauris nibh felis adipiscing varius in lacinia vel tellus
</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
CST
</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>
</a>
</div>
{% set textWithIconId = event.title|replace({' ':'-'})|lower %}
{% set ariaLabel = 'Event title: ' ~ event.title ~ '. Event dates: ' ~ event.date ~
(event.startTime ? ' from ' ~ event.startTime : '') ~
(event.endTime ? ' to ' ~ event.endTime : '') %}
{% if event.isComplete %}
<div class="event-card event-card--{{ cardBackground|default('white') }}">
<a href="{{ event.permalink }}" class="event-card__link" aria-labelledby="{{ textWithIconId }}" data-has-animation="{{ isAnimated|default(true) ? 'true' : 'false' }}">
<div class="event-card__content">
{% if event.type %}
<div class="event-card__eyebrow">
{{ event.type }}
</div>
{% endif %}
<div class="event-card__header">
{% if event.typeIcon %}
<div class="event-card__type__icon">
{% include 'bits/icons/' ~ event.typeIcon ~ '.twig' %}
</div>
{% endif %}
{% if event.date %}
<div class="event-card__date">
{{ event.date }}
</div>
{% endif %}
</div>
<div class="event-card__text-content">
<h2 class="event-card__title" aria-label="{{ ariaLabel }}">
{{ event.title }}
</h2>
{% if event.startTime or event.eventLocationName or event.eventLocationAddress1 or event.eventLocationAddress2 %}
<div class="event-card__time-and-location">
{% if event.startTime %}
<div class="event-card__time">
<div class="event-card__time-value">
{% if event.startTime %}
{{ event.startTime | date('g:i A') }}
{% endif %}
{% if event.endTime %}
<span class="event-card__time-separator">–</span>
{{ event.endTime | date('g:i A') }}
{% endif %}
{% if event.timezone %}
{{ event.timezone }}
{% endif %}
</div>
</div>
{% endif %}
{% if event.eventLocationName or event.eventLocationAddress1 or event.eventLocationAddress2 %}
<div class="event-card__location">
<div class="event-card__location-name">
{{ event.eventLocationName }}
</div>
<div class="event-card__location-address">
{% if event.eventLocationAddress1 %}
{{ event.eventLocationAddress1 }}
{% endif %}
{% if event.eventLocationAddress2 %}
<br>{{ event.eventLocationAddress2 }}
{% endif %}
</div>
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</a>
</div>
{% endif %}
{
"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": []
}
]
}
]
},
"latest_blog_component": {
"heading": "Latest from the Blog",
"moreLinkText": "View all posts",
"moreLinkUrl": "#",
"moreLinkType": "internal",
"cards": [
{
"type": "Press Release",
"typeIcon": "bullhorn",
"title": "Mauris nibh felis adipiscing varius in lacinia vel tellus",
"isComplete": true
},
{
"type": "Announcement",
"typeIcon": "update-boxes",
"title": "Mauris nibh felis adipiscing varius in lacinia vel tellus Lorem nulla nostrud velit anim lorem anim lorem qui enim.",
"isComplete": true
},
{
"type": "Press Release",
"typeIcon": "bullhorn",
"title": "Mauris nibh felis adipiscing varius in lacinia vel tellus",
"isComplete": true
}
]
},
"isAnimated": false,
"event": {
"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",
"timezone": "CST",
"eventLocationName": "The City Venue",
"eventLocationAddress1": "123 Main St, City, State, ZIP",
"isComplete": true
}
}
$breakpoint: 40rem; // 640px
.event-card {
height: 100%;
--cardBackgroundColor: var(--white);
&--blueTint {
--cardBackgroundColor: var(--blueTint);
}
&__content {
display: flex;
flex-direction: column;
gap: 1rem;
height: inherit;
padding: 0.75rem;
background-color: var(--cardBackgroundColor);
width: 100%;
@media (min-width: $breakpoint) {
padding: 1.1rem;
}
}
&__header {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
}
&__type__icon {
aspect-ratio: 1;
flex: 0 0 1.5rem;
display: flex;
justify-content: center;
align-items: center;
& > svg {
fill: var(--brightPurple);
width: 100%;
max-width: 1.5rem;
}
}
&__eyebrow {
@include labelSmall;
color: var(--navy);
line-height: 1;
}
&__text-content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: 0.25rem;
@media (min-width: $breakpoint) {
gap: 1rem;
}
}
&__date {
@include headline6;
color: var(--navy);
line-height: 1.5;
}
&__title {
@include body;
}
&__time {
@include bodySmall;
}
&__location {
@include bodySmall;
}
&__link[data-has-animation="true"] {
@include animate("transform");
transform: translate(0,0);
&:hover {
transform: translate(0, -0.5rem);
box-shadow: var(--drop-shadow-hover);
}
}
&__link {
display: flex;
text-decoration: none;
height: 100%;
width: 100%;
&:hover {
.event-card__title {
text-decoration: underline;
}
}
}
}
No notes defined.