<div class="topic-block
topic-block--purpleTint
">
<div class="topic-block__content">
<div class="topic-block__image-container">
<img class="topic-block__image" loading="lazy" height="" width="" src="holder.js/800x650?auto=yes&random=yes" alt="placeholder">
</div>
<div class="topic-block__text-content">
<div class="topic-block__text-content__inner">
<h2 class="topic-block__header">A header for this component</h2>
<div class="topic-block__text">
<p>Lorem ipsum dolor sit amet, consectetur <em>adipiscing</em> elit. <strong>Aenean euismod bibendum laoreet.</strong> Proin gravida dolor.</p>
</div>
<div class="topic-block__button-container">
<a href="#" class="standard-button standard-button-position--default">
<span class="standard-button__text">
Button text
</span>
<span class="standard-button__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>
</div>
</div>
</div>
</div>
{% set color = (background == 'blueTint') ? 'white' : colorVariant | default('purpleTint') %}
<div class="topic-block
{% if component.direction %}topic-block--direction--{{component.direction}} {% endif %}
{% if component.style %}topic-block--style--{{component.style}}{% endif %}
topic-block--{{ color }}
">
<div class="topic-block__content">
<div class="topic-block__image-container">
{% if 'homepage' in component.style %}
<div class="shapes--top"></div>
<div class="shapes--bottom"></div>
<img class="topic-block__image" loading="lazy" height="{{ component.image.height }}" width="{{ component.image.width }}" src="{{ component.image.src|resize(1200)|towebp }}" alt="{{ component.image.altText }}">
{% else %}
<img class="topic-block__image" loading="lazy" height="{{ component.image.height }}" width="{{ component.image.width }}" src="{{ component.image.src|resize(560)|towebp }}" alt="{{ component.image.altText }}">
{% endif %}
</div>
{% if component.header or component.text or component.hasCallToAction %}
<div class="topic-block__text-content">
<div class="topic-block__text-content__inner">
<h2 class="topic-block__header">{{ component.header }}</h2>
<div class="topic-block__text">
{{ component.text }}
</div>
{% if component.hasCallToAction %}
<div class="topic-block__button-container">
{% include 'bits/standard-button/standard-button.twig' with {
button: {
text: component.linkText,
url: component.linkUrl,
linkType: component.linkType,
}
} %}
</div>
{% endif %}
</div>
</div>
{% endif %}
</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": "topic-block",
"header": "A header for this component",
"text": "<p>Lorem ipsum dolor sit amet, consectetur <em>adipiscing</em> elit. <strong>Aenean euismod bibendum laoreet.</strong> Proin gravida dolor.</p>",
"image": {
"src": "holder.js/800x650?auto=yes&random=yes",
"altText": "placeholder"
},
"hasCallToAction": true,
"linkText": "Button text",
"linkUrl": "#",
"linkType": "internal"
}
}
.topic-block {
$breakpoint: 35rem;
$breakpointHomepage: 47.5rem; // 760px
$breakpointOverlaySizeChange: 60rem; // 960px
$breakpointOverlaySizeChangeLarge: 80rem; // 1280px
overflow: hidden;
&:not(.topic-block--style--homepage) {
@include componentWithMargin;
container-type: inline-size;
container-name: topic-block;
}
&__content {
background-color: var(--purpleTint);
display: flex;
flex-direction: column;
@container (min-width: #{$breakpoint}) {
flex-direction: row;
}
.topic-block--direction--reverse & {
@container (min-width: #{$breakpoint}) {
flex-direction: row-reverse;
}
}
.topic-block--white & {
background-color: var(--white);
}
.topic-block--style--homepage & {
@media (min-width: #{$breakpointHomepage}) {
flex-direction: row;
}
}
.topic-block--style--homepage.topic-block--direction--default & {
.shapes--top {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
&:before {
background-color: var(--peach);
content: '';
height: 2.25rem;
position: absolute;
right: 75%;
top: 1rem;
transform-origin: bottom left;
transform: skewX(-20deg);
width: 100vw;
@media (min-width: $breakpointHomepage) {
top: 2.5rem;
height: 7rem;
right: calc(100% - 5rem);
}
}
&:after {
background-color: var(--lightBlue);
content: '';
height: 0.75rem;
position: absolute;
right: 68%;
top: 2.15rem;
transform-origin: bottom left;
transform: skewX(20deg);
width: 100vw;
@media (min-width: $breakpointHomepage) {
top: 7rem;
right: calc(100% - 12rem);
height: 1.5rem;
}
}
}
.shapes--bottom {
position: absolute;
left: -2rem;
bottom: 0rem;
width: 100%;
height: 100%;
z-index: 2;
&:before {
content: '';
background-color: var(--brightPurple);
height: 1.5rem;
position: absolute;
right: 55%;
bottom: 2rem;
transform-origin: bottom left;
transform: skewX(-20deg);
width: 100vw;
@media (min-width: $breakpointHomepage) {
right: calc(100% - 20rem);
height: 4rem;
}
@media (min-width: $breakpointOverlaySizeChange) {
right: calc(100% - 28rem);
bottom: 3rem;
}
@media (min-width: $breakpointOverlaySizeChangeLarge) {
bottom: 4rem;
}
}
}
}
.topic-block--style--homepage.topic-block--direction--reverse & {
@media (min-width: #{$breakpointHomepage}) {
flex-direction: row-reverse;
}
.shapes--top {
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2;
&:before {
background-color: var(--blue);
content: '';
height: 1rem;
position: absolute;
left: calc(50% + 5rem);
top: 1rem;
transform-origin: bottom left;
transform: skewX(20deg);
width: 100vw;
@media (min-width: $breakpointHomepage) {
height: 4rem;
left: calc(100% - 20rem);
top:3.5rem;
}
}
&:after {
content: '';
background-color: var(--yellow);
height: 2rem;
position: absolute;
left: 80%;
top: 1.5rem;
transform-origin: bottom left;
transform: skewX(-20deg);
width: 100vw;
@media (min-width: $breakpointHomepage) {
height: 7rem;
left: calc(100% - 12rem);
top: 4.5rem;
}
}
}
.shapes--bottom {
position: absolute;
right: -2rem;
bottom: 0rem;
width: 100%;
height: 100%;
z-index: 2;
&:before {
content: '';
background-color: var(--orange);
height: 0.85rem;
position: absolute;
left: 30%;
bottom: 3rem;
transform-origin: bottom left;
transform: skewX(-20deg);
width: 100vw;
@media (min-width: $breakpointHomepage) {
left: calc(100% - 23rem);
}
@media (min-width: $breakpointOverlaySizeChange) {
left: calc(100% - 28rem);
}
@media (min-width: $breakpointOverlaySizeChangeLarge) {
height: 1.75rem;
left: calc(100% - 35rem);
bottom: 4rem;
}
}
}
}
}
&__text-content__inner {
max-width: 31rem;
width: 100%;
}
&__image-container {
flex-basis: 55%;
flex-grow: 0;
flex-shrink: 0;
position: relative;
.topic-block--style--homepage & {
flex-basis: 53%;
}
.topic-block--style--homepage.topic-block--direction--reverse & {
display: flex;
justify-content: flex-end;
}
}
&__image {
clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
@container (min-width: #{$breakpoint}) {
height: 100%;
inset: 0;
object-fit: cover;
position: absolute;
width: 100%;
clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}
@media (min-width: #{$breakpointHomepage}) {
clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}
.topic-block--direction--reverse & {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%);
@container (min-width: #{$breakpoint}) {
clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%);
}
@media (min-width: #{$breakpointHomepage}) {
clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%);
}
}
.topic-block--style--homepage & {
width: 100%;
height: 100%;
max-height: 35rem;
object-fit: cover;
}
}
&__text-content {
display: flex;
flex-direction: column;
justify-content: center;
flex-basis: 45%;
flex-grow: 0;
flex-shrink: 0;
padding: 2.75rem 5rem 2.75rem 3.5rem;
position: relative;
align-items: flex-start;
.topic-block--style--homepage & {
flex-basis: 47%;
@media (max-width: #{$breakpointHomepage}) {
padding: 0.85rem 1.5rem 2rem;
}
}
.topic-block--direction--reverse & {
@media (min-width: #{$breakpointHomepage}) {
align-items: flex-end;
}
}
.topic-block--style--homepage.topic-block--direction--reverse & {
@media (min-width: #{$breakpointOverlaySizeChangeLarge}) {
padding: 2.75rem 6.5rem 2.75rem 3.5rem;
}
}
.topic-block--style--homepage.topic-block--direction--default & {
@media (min-width: #{$breakpointOverlaySizeChangeLarge}) {
padding: 2.75rem 3.5rem 2.75rem 6.5rem;
}
}
}
&__header {
@include headline4;
margin-bottom: .5rem;
position: relative;
.topic-block--style--homepage & {
@include headline3;
text-transform: none;
letter-spacing: 0;
}
}
&__text {
@include richText;
@include bodySmall;
color: var(--black);
position: relative;
.topic-block--style--homepage & {
@media (min-width: #{$breakpointHomepage}) {
@include body;
}
}
}
&__button-container {
position: relative;
margin-top: 1.5rem;
> * {
@media (max-width: #{$breakpointHomepage}) {
width: 100%;
}
}
}
}
No notes defined.