<div class="link-cards link-cards--background-is-white">
<div class="link-cards__card">
<img class="link-cards__card-image" src="holder.js/450x450?auto=yes&outline=yes&random=yes" width="450" height="450" alt='placeholder' />
<div class="link-cards__card-info">
<a class="linked-text-with-icon linked-text-with-icon--bodyLarge" href="#">Link Text<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="link-cards__card-description">
<p>This is the link card description. It is about twelve words long.</p>
</div>
</div>
</div>
<div class="link-cards__card">
<img class="link-cards__card-image" src="holder.js/450x450?auto=yes&outline=yes&random=yes" width="450" height="450" alt='placeholder' />
<div class="link-cards__card-info">
<a class="linked-text-with-icon linked-text-with-icon--bodyLarge" href="#">Link Text<span class="linked-text-with-icon__external-link-icon">
<svg role="img" class="external-link" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<title>external</title>
<path class="_mark external-link__shape" fill-rule="evenodd" clip-rule="evenodd" d="M12.5858 2H10C9.44771 2 9 1.55228 9 1C9 0.447715 9.44771 0 10 0H16V6C16 6.55228 15.5523 7 15 7C14.4477 7 14 6.55228 14 6V3.41421L5.70711 11.7071C5.31658 12.0976 4.68342 12.0976 4.29289 11.7071C3.90237 11.3166 3.90237 10.6834 4.29289 10.2929L12.5858 2ZM2 14H12V9C12 8.44771 12.4477 8 13 8C13.5523 8 14 8.44771 14 9V16H0V2H7C7.55228 2 8 2.44772 8 3C8 3.55228 7.55228 4 7 4H2V14Z" />
</svg>
</span></a>
<div class="link-cards__card-description">
<p>This is the <strong>link card description</strong>. It is longer than the <a href="#">other card descriptions</a>, about <em>eighteen</em> words long.</p>
</div>
</div>
</div>
<div class="link-cards__card">
<img class="link-cards__card-image" src="holder.js/450x300?auto=yes&outline=yes&random=yes" width="450" height="450" alt='placeholder' />
<div class="link-cards__card-info">
<a class="linked-text-with-icon linked-text-with-icon--bodyLarge" href="#">Link Text<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="link-cards__card-description">
<p>This is the link card description. It is about twelve words long.</p>
</div>
</div>
</div>
</div>
<div class="link-cards link-cards--background-is-{{ background ?: 'unknown' }}">
{% for card in component.cards %}
<div class="link-cards__card">
<img class="link-cards__card-image"
src="{{ card.image.src | resize(520) | towebp }}"
width="450" height="450" alt='{{ card.image.altText }}'/>
<div class="link-cards__card-info">
{% include 'bits/linked-text-with-icon/linked-text-with-icon.twig' with {
link: {
text: card.linkText,
url: card.linkUrl,
type: card.linkType ~ '_link'
},
variant: 'bodyLarge'
} %}
<div class="link-cards__card-description">
{{ card.description | raw }}
</div>
</div>
</div>
{% endfor %}
</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": []
}
]
}
]
},
"component": {
"type": "link-cards",
"cards": [
{
"linkText": "Link Text",
"linkUrl": "#",
"image": {
"src": "holder.js/450x450?auto=yes&outline=yes&random=yes",
"altText": "placeholder"
},
"description": "<p>This is the link card description. It is about twelve words long.</p>"
},
{
"linkText": "Link Text",
"linkUrl": "#",
"linkType": "external",
"image": {
"src": "holder.js/450x450?auto=yes&outline=yes&random=yes",
"altText": "placeholder"
},
"description": "<p>This is the <strong>link card description</strong>. It is longer than the <a href=\"#\">other card descriptions</a>, about <em>eighteen</em> words long.</p>"
},
{
"linkText": "Link Text",
"linkUrl": "#",
"image": {
"src": "holder.js/450x300?auto=yes&outline=yes&random=yes",
"altText": "placeholder"
},
"description": "<p>This is the link card description. It is about twelve words long.</p>"
}
]
}
}
.link-cards {
@include componentWithMargin;
display: grid;
gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
grid-template-rows: auto;
max-width: 100%;
&--background-is-blueTint {
--cardBackgroundColor: var(--white);
}
&__card {
display: flex;
flex-direction: column;
height: 100%;
}
&__card-image {
width: 100%;
}
&__card-info {
background-color: var(--cardBackgroundColor, var(--blueTint));
flex-grow: 1;
padding: 1.5rem;
}
&__card-description {
@include detail;
@include richText;
color: var(--grayDarkest);
margin-top: 0.25rem;
}
}
No notes defined.