<div class="numbers numbers--default">
<ul class="numbers__list">
<li class="numbers__item">
<span class="numbers__item-number">
$2.2B
</span>
<span class="numbers__item-text">
in annual funding
</span>
</li>
<li class="numbers__item">
<span class="numbers__item-number">
50
</span>
<span class="numbers__item-text">
Members
</span>
</li>
<li class="numbers__item">
<span class="numbers__item-number">
12,000
</span>
<span class="numbers__item-text">
subject matter experts
</span>
</li>
</ul>
</div>
<div class="numbers numbers--{{ component.variant | default('default') }}">
<ul class="numbers__list">
{% for number in component.numbers %}
<li class="numbers__item">
<span class="numbers__item-number">
{{ number.number }}
</span>
<span class="numbers__item-text">
{{ number.text }}
</span>
</li>
{% endfor %}
</ul>
{% if component.callsToAction|length > 0 %}
<div class="numbers__calls-to-action">
{% for callToAction in component.callsToAction %}
{% include 'bits/standard-button/standard-button.twig' with {
button: {
text: callToAction.linkText,
url: callToAction.linkUrl,
linkType: callToAction.linkType,
variant: callToAction.variant|default('secondary'),
}
} %}
{% endfor %}
</div>
{% 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": []
}
]
}
]
},
"component": {
"type": "numbers",
"variant": "default",
"numbers": [
{
"number": "$2.2B",
"text": "in annual funding"
},
{
"number": "50",
"text": "Members"
},
{
"number": "12,000",
"text": "subject matter experts"
}
],
"callsToAction": []
}
}
$homepageBreakpointMapSection: 75rem;
.numbers {
--numberColor: var(--purple);
--itemTextColor: var(--black);
&--default {
@include componentWithMargin;
}
&--homepage {
--numberColor: var(--blueTint);
--itemTextColor: var(--blueTint);
grid-row: 2;
grid-column: 1;
z-index: 1;
@media (min-width: $homepageBreakpointMapSection) {
--numberColor: var(--purple);
--itemTextColor: var(--purple);
width: 100%;
max-width: 62rem;
margin-inline: auto;
}
}
&__list {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: space-evenly;
}
&__item {
align-items: center;
display: flex;
flex-direction: column;
gap: 1rem;
}
&__item-number {
@include billboardTitle;
color: var(--numberColor);
text-align: center;
}
&__item-text {
@include bodyLarge;
color: var(--itemTextColor);
text-align: center;
}
&__calls-to-action {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
margin-top: 3rem;
}
}
No notes defined.