<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>
<a class="linked-text-with-icon linked-text-with-icon--headline5" href="#">Mauris nibh felis adipiscing varius vel tellus urna<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="resource-card__summary">
Voluptate qui quidem qui veniam quae. Beatae voluptatem ducimus unde aut ipsum omnis dolor. Repellat debitis reprehenderit quisquam sunt.
</div>
<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">
Aging
</span>
</li>
<li class="tag-badge-list__item">
<span class="tag-badge tag-badge--large tag-badge--blueTint">
Behavioral and Mental Health
</span>
</li>
<li class="tag-badge-list__item">
<span class="tag-badge tag-badge--large tag-badge--blueTint">
Health Equity
</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>
</div>
{% set img = resource.featuredImage %}
{% set cardBackground = cardBackground ? cardBackground : resource.cardBackground %}
<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/linked-text-with-icon/linked-text-with-icon.twig' with {
link: {
text: resource.title,
url: resource.permalink,
type: 'internal_link'
},
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>
{
"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": []
}
]
}
]
},
"resource": {
"resourceType": "PDF",
"creationDateDisplay": "November 2021",
"title": "Mauris nibh felis adipiscing varius vel tellus urna",
"permalink": "#",
"tags": [
"Aging",
"Behavioral and Mental Health",
"Health Equity",
"Women's Health"
],
"includeTags": true,
"includeSummary": true,
"summary": "Voluptate qui quidem qui veniam quae. Beatae voluptatem ducimus unde aut ipsum omnis dolor. Repellat debitis reprehenderit quisquam sunt."
}
}
$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%;
}
}
}
No notes defined.