<div class="member-card">
<a href="#" class="member-card__link" aria-labelledby="center-for-health-innovation">
<div class="member-card__image-container">
<img class="member-card__image" src="holder.js/200x100?auto=yes&random=yes" width="200" height="100" alt='placeholder' />
</div>
<div class="member-card__info">
<p class="text-with-icon text-with-icon--bodyLarge" id="center-for-health-innovation" aria-label="member title: Center for Health Innovation">
Center for Health Innovation<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> </p>
<div class="member-card__region">
Texas, Montana, Wyoming
</div>
<div class="member-card__badges">
<ul class="tag-badge-list ">
<li class="tag-badge-list__item">
<span class="tag-badge tag-badge--white">
Aging
</span>
</li>
</ul>
</div>
</div>
</a>
</div>
{% set textWithIconId = member.title|replace({' ':'-'})|lower %}
{% set ariaLabel = 'member title: ' ~ member.title %}
<div class="member-card">
<a href="{{ member.permalink }}" class="member-card__link" aria-labelledby="{{ textWithIconId }}">
{% if member.logoImage.src|default(false) %}
<div class="member-card__image-container">
<img class="member-card__image"
src="{{ member.logoImage.src | towebp | letterbox(200, 100, '#FFFFFF') }}"
width="200" height="100" alt='{{ member.logoImage.altText }}'/>
</div>
{% endif %}
<div class="member-card__info">
{% include 'bits/text-with-icon/text-with-icon.twig' with {
link: {
text: member.title | trim,
url: member.permalink,
type: 'internal',
ariaLabel: ariaLabel
},
variant: 'bodyLarge',
} %}
{% if member.statesAndTerritories %}
<div class="member-card__region">
{{ member.statesAndTerritories|join(', ') }}
</div>
{% endif %}
{% if member.tags %}
<div class="member-card__badges">
{% include 'bits/tag-badge-list/tag-badge-list.twig' with { tags: member.tags, tagColor: 'white' } %}
</div>
{% endif %}
</div>
</a>
</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": []
}
]
}
]
},
"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
}
]
},
"member": {
"title": "Center for Health Innovation",
"permalink": "#",
"logoImage": {
"src": "holder.js/200x100?auto=yes&random=yes",
"altText": "placeholder"
},
"statesAndTerritories": [
"Texas",
"Montana",
"Wyoming"
],
"tags": [
"Aging"
]
}
}
.member-card {
display: flex;
flex-direction: column;
height: 100%;
&__image-container {
width: 100%;
height: 6.25rem;
display: flex;
align-items: center;
justify-content: center;
}
&__image {
padding: 0.5rem;
height: 100%;
width: auto;
}
&__info {
background-color: var(--blueTint);
flex-grow: 1;
padding: 1.5rem;
}
&__region {
@include detail;
color: var(--grayDarkest);
margin-top: 0.25rem;
}
&__title {
@include detail;
color: var(--grayDarkest);
margin-top: 0.25rem;
}
&__badges {
margin-top: 0.75rem;
}
&__link {
@include animate("transform");
display: flex;
flex-direction: column;
text-decoration: none;
transform: translate(0,0);
height: 100%;
width: 100%;
border: 2px var(--blueTint) solid;
&:hover {
transform: translate(0, -0.5rem);
box-shadow: var(--drop-shadow-hover);
}
}
}
No notes defined.