<div class="blog-card blog-card--">
<div class="blog-card__content">
<div class="blog-card__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="blog-card__text-content">
<div class="blog-card__eyebrow">
Press Release
</div>
<h2 class="blog-card__title">
<a href="" class="blog-card__link">
Mauris nibh felis adipiscing varius in lacinia vel tellus
</a>
</h2>
</div>
</div>
</div>
{% if component.isComplete %}
<div class="blog-card blog-card--{{ componentBackground }}">
<div class="blog-card__content">
{% if component.typeIcon %}
<div class="blog-card__type__icon">
{% include 'bits/icons/' ~ component.typeIcon ~ '.twig' %}
</div>
{% endif %}
{% if component.title %}
<div class="blog-card__text-content">
{% if component.type %}
<div class="blog-card__eyebrow">
{{ component.type }}
</div>
{% endif %}
<h2 class="blog-card__title">
<a href="{{ component.permalink }}" class="blog-card__link">
{{ component.title }}
</a>
</h2>
{% if component.date %}
<div class="blog-card__date">
{{ component.date }}
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
{% endif %}
{
"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": "Press Release",
"typeIcon": "bullhorn",
"title": "Mauris nibh felis adipiscing varius in lacinia vel tellus",
"isComplete": true
}
}
$breakpoint: 40rem; // 640px
.blog-card {
--type-bg-color: var(--blue);
--svg-fill-color: var(--blueTint);
&--blue {
--type-bg-color: var(--blueTint);
--svg-fill-color: var(--blue);
}
&__content {
display: grid;
grid-template-columns: 120px 3fr;
align-items: stretch;
background-color: var(--white);
height: 100%;
}
&__type__icon {
background-color: var(--type-bg-color);
display: flex;
justify-content: center;
align-items: center;
& > svg {
fill: var(--svg-fill-color);
width: 100%;
max-width: 4rem;
}
}
&__eyebrow {
@include labelSmall;
color: var(--blue);
line-height: 1;
}
&__text-content {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.75rem;
@media (min-width: $breakpoint) {
gap: 1rem;
padding: 1.1rem;
width: 100%;
}
}
&__title {
@include headline6;
}
&__link {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
No notes defined.