<div class="blog-card-large blog-card-large--card-background-blueTint">
<div class="blog-card-large__text-content">
<div class="metadata-eyebrow-small">
<div class="metadata-eyebrow-small__type">
<div class="metadata-eyebrow-small__type__icon">
<svg role="img" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>bullhorn</title>
<path d="M22.6614 1.5061C22.4981 1.35515 22.2874 1.26666 22.0872 1.26666C22.0556 1.26666 22.0188 1.27707 21.9872 1.27707C21.9556 1.28748 21.8765 1.29789 14.9335 4.88947H5.65149C3.01228 4.88947 0.773438 7.10167 0.773438 9.71988C0.773438 12.3381 3.01228 14.5399 5.65149 14.5399H6.72087L9.21784 21.8896C9.339 22.2383 9.68141 22.4778 10.0449 22.4778H15.1863C15.4497 22.4778 15.7026 22.3476 15.8712 22.1082C16.0503 21.8792 16.0924 21.5825 16.0029 21.343L13.6955 14.5399H14.9546L21.6869 18.043C21.9398 18.1731 22.2506 18.1627 22.5245 18.0013C22.7984 17.84 22.9565 17.5745 22.967 17.3038V2.14113C22.967 1.90169 22.8564 1.67267 22.6562 1.5061H22.6614ZM21.2233 3.54653V15.8724L16.0239 13.1657V6.25323L21.2233 3.54653ZM11.857 14.5399L13.9747 20.7653H10.6876L8.56989 14.5399H11.857ZM5.65149 6.60197H14.2961V12.8274H5.65149C3.94997 12.8274 2.5171 11.4011 2.5171 9.71988C2.5171 8.0386 3.94997 6.60197 5.65149 6.60197Z" />
</svg>
</div>
<div class="metadata-eyebrow-small__type__label">
Press Release
</div>
</div>
</div>
<a class="linked-text-with-icon linked-text-with-icon--headline5" href="">Mauris nibh felis adipiscing varius in lacinia vel tellus<span class="linked-text-with-icon__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 class="blog-card-large__summary">
Voluptate qui quidem qui veniam quae. Beatae voluptatem ducimus unde aut ipsum omnis dolor. Repellat debitis reprehenderit quisquam sunt.
</div>
<div class="blog-card-large__date">
</div>
<div class="blog-card-large__tags">
<ul class="tag-badge-list tag-badge-list--large">
<li class="tag-badge-list__item">
<span class="tag-badge tag-badge--large tag-badge--white">
Aging
</span>
</li>
<li class="tag-badge-list__item">
<span class="tag-badge tag-badge--large tag-badge--white">
Behavioral and Mental Health
</span>
</li>
<li class="tag-badge-list__item">
<span class="tag-badge tag-badge--large tag-badge--white">
Health Equity
</span>
</li>
<li class="tag-badge-list__item">
<span class="tag-badge tag-badge--large tag-badge--white">
Women's Health
</span>
</li>
</ul>
</div>
</div>
</div>
<div class="blog-card-large{{ cardBackground ? ' blog-card-large--card-background-' ~ cardBackground }}">
<div class="blog-card-large__text-content">
{% include 'partials/metadata-eyebrow-small/metadata-eyebrow-small.twig' with {
post: {
typeIcon: blog.typeIcon,
type: blog.type
},
} %}
{% include 'bits/linked-text-with-icon/linked-text-with-icon.twig' with {
link: {
text: blog.title,
url: blog.permalink,
type: 'internal_link'
},
variant: 'headline5'
} %}
{% if blog.summary %}
<div class="blog-card-large__summary">
{{ blog.summary }}
</div>
{% endif %}
<div class="blog-card-large__date">
{{ blog.creationDateDisplay }}
</div>
{% if blog.tags %}
<div class="blog-card-large__tags">
{% include 'bits/tag-badge-list/tag-badge-list.twig' with {
tags: blog.tags,
large: true,
tagColor: cardBackground == 'blueTint' ? 'white' : 'blueTint'
} %}
</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": []
}
]
}
]
},
"blog": {
"type": "Press Release",
"typeIcon": "bullhorn",
"title": "Mauris nibh felis adipiscing varius in lacinia vel tellus",
"summary": "Voluptate qui quidem qui veniam quae. Beatae voluptatem ducimus unde aut ipsum omnis dolor. Repellat debitis reprehenderit quisquam sunt.",
"tags": [
"Aging",
"Behavioral and Mental Health",
"Health Equity",
"Women's Health"
]
},
"cardBackground": "blueTint"
}
$breakpoint: 37.5rem;
.blog-card-large {
background: var(--white);
display: flex;
flex-direction: column;
gap: 2rem;
justify-content: space-between;
&__text-content {
display: flex;
flex-direction: column;
flex: 1 1 75%;
gap: 0.75rem;
}
&--card-background-blueTint {
background: var(--blueTint);
}
&__type {
@include label;
color: var(--blue);
}
&__summary {
@include bodySmall;
}
&__date {
@include detail;
color: var(--navy);
}
&__tags {
margin-top: 0.25rem;
}
&__image {
height: auto;
max-height: 100%;
max-width: 10rem;
@media (min-width: $breakpoint) {
max-height: 10rem;
max-width: 100%;
width: auto;
}
}
}
No notes defined.