<div class="o-container c-infographic-trio" data-bkg-theme="base">
<div class="c-infographic-trio__content">
<h2 id="inforgraphic-title-3331" class="c-infographic-trio__content-title f-title--h3">You make it possible</h2>
<div class="c-infographic-trio__content-description f-text-reg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Mauris id consequat sem. Praesent vulputate ipsum at metus sodales. Etiam a purus auctor massa in, massa in ibero.</p>
</div>
</div>
<div class="c-infographic-trio__infographics o-row">
<ul aria-labelledby="inforgraphic-title-3331" class="c-infographic-trio__item-list o-row">
<li class="c-infographic-trio__item o-col o-col-xs-sm-6 o-col-sm-md-4 c-infographic-trio__item--top-left js-watch">
<div class="c-infographic-trio__item-content">
<p class="c-infographic-trio__item-title f-bold">
36
</p>
<p class="c-infographic-trio__item-subtitle f-bold">
YEARS
</p>
<p class="c-infographic-trio__item-description f-text--small">
of success for the Women in Natural Sciences Program
</p>
</div>
<div class="js-infographic-video c-infographic-trio__item-video">
<video playsinline muted>
<source src="/video/infographics/butterfly_VP9.webm" type="video/webm">
</video>
</div>
</li>
<li class="c-infographic-trio__item o-col o-col-xs-sm-6 o-col-sm-md-4 c-infographic-trio__item--bottom js-watch">
<div class="c-infographic-trio__item-content">
<p class="c-infographic-trio__item-title f-bold">
500
</p>
<p class="c-infographic-trio__item-subtitle f-bold">
MILLION WATER SAMPLES
</p>
<p class="c-infographic-trio__item-description f-text--small">
processed by Academy scientists for the Delaware Watershed initiative this year. Lorem ipsum dolor sit amet, consectetur. tes
</p>
</div>
<div class="js-infographic-video c-infographic-trio__item-video">
<video playsinline muted>
<source src="/video/infographics/journal_VP9.webm" type="video/webm">
</video>
</div>
</li>
<li class="c-infographic-trio__item o-col o-col-xs-sm-6 o-col-sm-md-4 c-infographic-trio__item--top-right js-watch">
<div class="c-infographic-trio__item-content">
<p class="c-infographic-trio__item-title f-bold">
244,130
</p>
<p class="c-infographic-trio__item-subtitle f-bold">
HOURS
</p>
<p class="c-infographic-trio__item-description f-text--small">
of service contributed by 268 Academy volunteers this year
</p>
</div>
<div class="js-infographic-video c-infographic-trio__item-video">
<video playsinline muted>
<source src="/video/infographics/shell-1_VP9.webm" type="video/webm">
</video>
</div>
</li>
</ul>
</div>
</div>
{% set hID = 'inforgraphic-title-' ~ random(5000) %}
{% set hClass = hiddenTitle ? 'u-sr-only' : 'c-infographic-trio__content-title f-title--h3' %}
<div class="o-container c-infographic-trio" data-bkg-theme="base">
<div class="c-infographic-trio__content{% if not description and hiddenTitle %} c-infographic-trio__content--hidden-title{% endif %}">
<h2 id="{{ hID }}" class="{{ hClass }}">{{title}}</h2>
{% if description %}
<div class="c-infographic-trio__content-description f-text-reg">
{{description}}
</div>
{% endif %}
</div>
<div class="c-infographic-trio__infographics o-row">
<ul aria-labelledby="{{ hID }}" class="c-infographic-trio__item-list o-row">
{% for item in items %}
{% set location = item.location ? item.location : 'top-left' %}
<li class="c-infographic-trio__item o-col o-col-xs-sm-6 o-col-sm-md-4{% if item.webmSrc %} c-infographic-trio__item--{{ location }}{% endif %} js-watch">
<div class="c-infographic-trio__item-content">
<p class="c-infographic-trio__item-title f-bold">
{{item.title}}
</p>
<p class="c-infographic-trio__item-subtitle f-bold">
{{item.subtitle}}
</p>
<p class="c-infographic-trio__item-description f-text--small">
{{item.description}}
</p>
</div>
{% if item.webmSrc %}
<div class="js-infographic-video c-infographic-trio__item-video">
<video playsinline muted>
<source src="{{ item.webmSrc }}" type="video/webm">
</video>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>
{
"pageColorTheme": "teal",
"title": "You make it possible",
"description": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Mauris id consequat sem. Praesent vulputate ipsum at metus sodales. Etiam a purus auctor massa in, massa in ibero.</p>",
"items": [
{
"title": "36",
"subtitle": "YEARS",
"description": "of success for the Women in Natural Sciences Program",
"webmSrc": "/video/infographics/butterfly_VP9.webm",
"location": "top-left"
},
{
"title": "500",
"subtitle": "MILLION WATER SAMPLES",
"description": "processed by Academy scientists for the Delaware Watershed initiative this year. Lorem ipsum dolor sit amet, consectetur. tes",
"webmSrc": "/video/infographics/journal_VP9.webm",
"location": "bottom"
},
{
"title": "244,130",
"subtitle": "HOURS",
"description": "of service contributed by 268 Academy volunteers this year",
"webmSrc": "/video/infographics/shell-1_VP9.webm",
"location": "top-right"
}
]
}
.c-infographic-trio {
margin-top: 3rem;
margin-bottom: 3rem;
@include break($sm-md) {
margin-top: 10.6rem;
margin-bottom: 12.5rem;
}
}
.c-infographic-trio__content {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 3rem;
text-align: center;
@include break($sm-md) {
margin-bottom: 12rem;
}
}
.c-infographic-trio__content--hidden-title {
margin: 0;
@include break($sm-md) {
margin-bottom: 0;
}
}
.c-infographic-trio__content-title {
margin-bottom: 2rem;
}
.c-infographic-trio__content-description {
@include break($sm) {
width: 70%;
}
@include break($xl) {
width: 55%;
}
}
.c-infographic-trio__item-list {
justify-content: center;
}
.c-infographic-trio__item {
margin: 2rem 0;
background-image: url('/images/homepage/Linegraph_Fade.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
align-self: flex-start;
color: $c-teal;
padding-bottom: 6.4rem;
&:nth-child(2) {
color: $c-plum;
}
&:nth-child(3) {
color: $c-ocean;
}
}
.c-infographic-trio__item--bottom {
padding-bottom: 15rem;
}
.c-infographic-trio__item-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.c-infographic-trio__item-title {
font-size: 7.2rem;
body:not(.is-experience-editor) .c-infographic-trio__item & {
transform: translate3d(0, 2rem, 0);
opacity: 0;
transition: all 0.6s $ease-standard-cubic;
}
body:not(.is-experience-editor) .c-infographic-trio__item.is-in-view & {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.c-infographic-trio__item-subtitle {
font-size: 2rem;
line-height: 1.8;
// color: $c-teal;
body:not(.is-experience-editor) .c-infographic-trio__item & {
transform: translate3d(0, 2rem, 0);
opacity: 0;
transition: all 0.6s $ease-standard-cubic 0.2s;
}
body:not(.is-experience-editor) .c-infographic-trio__item.is-in-view & {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.c-infographic-trio__item-description {
color: $c-black;
font-size: 1.7rem;
width: 80%;
body:not(.is-experience-editor) .c-infographic-trio__item & {
transform: translate3d(0, 2rem, 0);
opacity: 0;
transition: all 0.6s $ease-standard-cubic 0.4s;
}
body:not(.is-experience-editor) .c-infographic-trio__item.is-in-view & {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.c-infographic-trio__item-video {
position: absolute;
top: 0;
left: 0;
body:not(.is-experience-editor) .c-infographic-trio__item & {
opacity: 0;
transition: opacity 1.5s $ease-standard-cubic;
}
body:not(.is-experience-editor) .c-infographic-trio__item.is-in-view & {
opacity: 1;
}
.c-infographic-trio__item--top-right & {
left: auto;
right: 0;
}
.c-infographic-trio__item--bottom & {
left: 50%;
top: auto;
bottom: 0;
transform: translateX(-50%);
}
}
Videos are expected to be the webm
format with an alpha channel to create a transparent background.
Videos have options to align via top-left
, top-right
, or bottom
.