<div class="quote quote--background-is-white">
<div class="quote__container">
<div class="quote__icon">
<svg role="img" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 20">
<title>quote</title>
<path fill-rule="evenodd" d="M24 10h-4.5c0-3.162 1.586-4.814 4.5-5V0c-5 0-8.078 2.17-9.318 6.262C14.186 7.998 14 10.106 14 13.64V20h10V10zm-14 0H5.5c0-3.162 1.586-4.814 4.5-5V0C5 0 1.922 2.17.682 6.262.186 7.998 0 10.106 0 13.64V20h10V10z" />
</svg>
</div>
<figure class="quote__text-container">
<blockquote class="quote__text">
I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.
</blockquote>
<figcaption class="quote__attribution">
Maya Angelou
</figcaption>
</figure>
</div>
</div>
<div class="quote quote--background-is-{{ background ?: 'unknown' }}">
<div class="quote__container">
<div class="quote__icon">
{% include 'bits/icons/quote-icon.twig' %}
</div>
<figure class="quote__text-container">
<blockquote class="quote__text">
{{ component.quoteText }}
</blockquote>
<figcaption class="quote__attribution">
{{ component.attribution }}
</figcaption>
</figure>
</div>
</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": "quote",
"quoteText": "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel.",
"attribution": "Maya Angelou"
}
}
.quote {
@include componentWithMargin;
--backgroundColor: var(--purpleTint);
container-type: inline-size;
&--background-is-blueTint {
--backgroundColor: var(--white);
}
&__container {
display: flex;
flex-direction: column;
background-color: var(--backgroundColor);
padding: 2.25rem;
position: relative;
gap: 1.5rem;
max-width: 55rem;
@container (min-width: 42rem) {
flex-direction: row;
gap: 2.5rem;
justify-content: space-between;
padding: 2.25rem 3rem;
}
}
&__icon {
color: var(--purple);
width: 2rem;
& > svg {
fill: var(--purple);
}
}
&__text-container {
flex: 2;
}
&__text {
@include headline5;
color: var(--black);
margin-bottom: 1rem;
}
&__attribution {
@include detail;
color: var(--black);
}
}
No notes defined.