Academy of Natural Sciences

Infographic Trio: Hidden Title 

<div class="o-container c-infographic-trio" data-bkg-theme="base">
    <div class="c-infographic-trio__content c-infographic-trio__content--hidden-title">
        <h2 id="inforgraphic-title-2380" class="u-sr-only">You make it possible</h2>

    </div>
    <div class="c-infographic-trio__infographics o-row">
        <ul aria-labelledby="inforgraphic-title-2380" 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 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>

            </li>

            <li class="c-infographic-trio__item o-col o-col-xs-sm-6 o-col-sm-md-4 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>

            </li>

            <li class="c-infographic-trio__item o-col o-col-xs-sm-6 o-col-sm-md-4 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>

            </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": false,
  "items": [
    {
      "title": "36",
      "subtitle": "YEARS",
      "description": "of success for the Women in Natural Sciences Program"
    },
    {
      "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"
    },
    {
      "title": "244,130",
      "subtitle": "HOURS",
      "description": "of service contributed by 268 Academy volunteers this year"
    }
  ],
  "hiddenTitle": true
}
  • Content: 
    .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%);
  }
}
  • URL: /components/raw/infographic-trio/infographic-trio.scss
  • Filesystem Path: patterns\06-components\infographic-trio\infographic-trio.scss
  • Size: 3.2 KB

Overview

Videos are expected to be the webm format with an alpha channel to create a transparent background.

Video Sizes

Video alignment

Videos have options to align via top-left, top-right, or bottom.

  • Videos that should align top-left or top-right should not exceed 200px wide or 150px high.
  • Videos that should align bottom should not exceed 250px wide or 150px high.

To create videos:

  • Create an MOV with a transparent alpha channel background.
  • Use Shutter Encoder to create webm files from the mov files by:
    • Click browse to select videos
    • choose “VP9” function
    • in “Advanced features” check “Enable alpha”
    • click “Start Function”