<a href="#" class="resource-card__link" aria-labelledby="mauris-nibh-felis-adipiscing-varius-vel-tellus-urna" data-has-animation="true">
<div class="resource-card">
<div class="resource-card__text-content">
<div class="metadata-eyebrow-small">
<div class="metadata-eyebrow-small__type">
<div class="metadata-eyebrow-small__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-small__type__label">
PDF
</div>
</div>
</div>
<h2 class="text-with-icon text-with-icon--headline5" id="mauris-nibh-felis-adipiscing-varius-vel-tellus-urna" aria-label="Resource: PDF Mauris nibh felis adipiscing varius vel tellus urna">
Mauris nibh felis adipiscing varius vel tellus urna<span class="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> </h2>
<div class="resource-card__date">
November 2021
</div>
<div class="resource-card__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--blueTint">
Tribal Health
</span>
</li>
<li class="tag-badge-list__item">
<span class="tag-badge tag-badge--large tag-badge--blueTint">
Women's Health
</span>
</li>
</ul>
</div>
</div>
<img class="resource-card__image resource-card__image--landscape" src="holder.js/700x500?auto=yes&outline=yes" width="" height="" alt='a placeholder' />
</div>
</a>
{% set img = resource.featuredImage %}
{% set cardBackground = cardBackground ? cardBackground : resource.cardBackground %}
{% set textWithIconId = resource.title|replace({' ':'-'})|lower %}
{% set element = 'h2' %}
{% set ariaLabel = 'Resource: ' ~ resource.resourceType ~ ' ' ~ resource.title %}
{# Previously used default(true) which treats false as empty and therefore overwrote an explicit false.
Now explicitly check whether isAnimated is defined. If defined, honor its boolean value. If not defined, default to true. #}
{% set isAnimated = (isAnimated is defined) ? (isAnimated ? 'true' : 'false') : 'true' %}
<a href="{{ resource.permalink }}" class="resource-card__link" aria-labelledby="{{ textWithIconId }}" data-has-animation="{{ isAnimated }}">
<div class="resource-card{{ cardBackground ? ' resource-card--card-background-' ~ cardBackground }}">
<div class="resource-card__text-content">
{% include 'partials/metadata-eyebrow-small/metadata-eyebrow-small.twig' with {
post: {
typeIcon: 'document-icon',
type: resource.resourceType
},
} %}
{% include 'bits/text-with-icon/text-with-icon.twig' with {
link: {
text: resource.title,
url: resource.permalink,
type: 'internal_link',
ariaLabel: ariaLabel,
isLink: false
},
variant: 'headline5'
} %}
{% if resource.includeSummary and resource.summary %}
<div class="resource-card__summary">
{{ resource.summary }}
</div>
{% endif %}
<div class="resource-card__date">
{{ resource.creationDateDisplay }}
</div>
{% if resource.includeTags and resource.tags %}
<div class="resource-card__tags">
{% include 'bits/tag-badge-list/tag-badge-list.twig' with {
tags: resource.tags,
large: largeTags | default(true),
tagColor: cardBackground == 'blueTint' ? 'white' : 'blueTint'
} %}
</div>
{% endif %}
</div>
{% if resource.includeImage and img %}
<img class="resource-card__image resource-card__image--{{ img.orientation }}"
src="{{ img.src | resize(450) | towebp }}"
width="{{ img.width }}" height="{{ img.height }}" alt='{{img.altText }}'/>
{% endif %}
</div>
</a>
{
"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": true,
"resource": {
"resourceType": "PDF",
"creationDateDisplay": "November 2021",
"title": "Mauris nibh felis adipiscing varius vel tellus urna",
"permalink": "#",
"addImage": true,
"featuredImage": {
"src": "holder.js/700x500?auto=yes&outline=yes",
"altText": "a placeholder",
"orientation": "landscape"
},
"tags": [
"Tribal Health",
"Women's Health"
],
"includeTags": true,
"includeImage": true
}
}
$containerBreakpoint: 37.5rem;
.resource-card {
display: flex;
justify-content: space-between;
gap: 2rem;
background: var(--white);
flex-direction: column;
container-type: inline-size;
.homepage-resources-section & {
padding: 1.5rem;
}
@container (min-width: $containerBreakpoint) {
flex-direction: row;
}
&__text-content {
display: flex;
flex-direction: column;
gap: 0.75rem;
flex: 1 1 75%;
}
&--card-background-blueTint {
background: var(--blueTint);
}
&__summary {
@include bodySmall;
}
&__date {
@include detail;
color: var(--navy);
}
&__tags {
margin-top: 0.25rem;
}
&__image,
&__image--portrait {
max-width: 14rem;
height: auto;
@container (min-width: $containerBreakpoint) {
max-height: 12rem;
width: auto;
}
}
&__image--landscape {
max-width: 18rem;
height: auto;
@container (min-width: $containerBreakpoint) {
max-width: min(16rem, 40%);
height: 100%;
}
}
&__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;
flex-direction: column;
text-decoration: none;
height: 100%;
width: 100%;
&:hover {
.event-card__title {
text-decoration: underline;
}
}
}
}
No notes defined.