Make A Difference Callout

Release Candidate

HTML
View
Context
Assets
Notes


        
        <div class="o-container c-make-a-difference-callout" data-bkg-theme="base">

    <div class="c-make-a-difference-callout__content">
        <div class="c-make-a-difference-callout__image">
            <img src="/images/homepage/macroInvertebrate.jpg" alt="People collecting specimens in a creek" />
            <h2 class="c-make-a-difference-callout__title f-title--h2">
                Make a difference
            </h2>
        </div>
        <div class="c-make-a-difference-callout__blocks">

            <div class="c-make-a-difference-callout__block">

                <a href=# class="c-make-a-difference-callout__block-link">

                    <h3 class="c-make-a-difference-callout__block-title f-title--h5">
                        <span class="u-hover-drawline">Support our research</span>
                    </h3>
                    <p class="c-make-a-difference-callout__block-description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget auctor odio, et pellentesque felis. Nullam eu donec.</p>

                    <span class="c-make-a-difference-callout__block-icon u-expanding-cta-arrow" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
                            <path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
                        </svg>
                    </span>
                </a>

                </a>
            </div>

            <div class="c-make-a-difference-callout__block">

                <a href=# class="c-make-a-difference-callout__block-link">

                    <h3 class="c-make-a-difference-callout__block-title f-title--h5">
                        <span class="u-hover-drawline">Become a member</span>
                    </h3>
                    <p class="c-make-a-difference-callout__block-description f-text--small">Your membership supports our efforts to ensure a healthy, sustainable and equitable planet.</p>

                    <span class="c-make-a-difference-callout__block-icon u-expanding-cta-arrow" aria-hidden="true"><svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
                            <path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
                        </svg>
                    </span>
                </a>

                </a>
            </div>

        </div>
    </div>
</div>


        <div class="o-container c-make-a-difference-callout" data-bkg-theme="base">

	<div class="c-make-a-difference-callout__content">
		<div class="c-make-a-difference-callout__image">
			{{ image }}
			<h2 class="c-make-a-difference-callout__title f-title--h2">
				{{title}}
			</h2>
		</div>
		<div class="c-make-a-difference-callout__blocks">
			{% for tile in tiles%}
				<div class="c-make-a-difference-callout__block">
					{% if tile.link %}
						<a href={{tile.link}} class="c-make-a-difference-callout__block-link">
						{% endif %}
						<h3 class="c-make-a-difference-callout__block-title f-title--h5">
              <span class="u-hover-drawline">{{tile.title}}</span>
            </h3>
						<p class="c-make-a-difference-callout__block-description f-text--small">{{tile.description}}</p>
						{% if tile.link %}
							<span class="c-make-a-difference-callout__block-icon u-expanding-cta-arrow" aria-hidden="true">{% include '03-icons/cta-expanding-arrow'%}</span>
						</a>
					{% endif %}

				</a>
			</div>
		{% endfor %}
	</div>
</div></div>


        
            
            {
  "pageColorTheme": "teal",
  "title": "Make a difference",
  "image": "<img src=\"/images/homepage/macroInvertebrate.jpg\" alt=\"People collecting specimens in a creek\" />",
  "tiles": [
    {
      "title": "Support our research",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget auctor odio, et pellentesque felis. Nullam eu donec.",
      "link": "#"
    },
    {
      "title": "Become a member",
      "description": "Your membership supports our efforts to ensure a healthy, sustainable and equitable planet.",
      "link": "#"
    }
  ]
}

File:

Content:


                                .c-make-a-difference-callout {
  // height: 100vh;
  margin-top: 12rem;
  margin-bottom: 12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  @include break($sm) {
    margin-top: 17.4rem;
    margin-bottom: 18rem;
  }
  @include break($lg){
    max-width: 125rem;
  }
}

.c-make-a-difference-callout__content {
  display: flex;
  flex-direction: column;
  @include break($lg) {
    flex-direction: row;
  }
}
.c-make-a-difference-callout__image {
  color: $c-white;
  position: relative;
  flex: 0 0 67%;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &:before {
    content: '';
    display: block;
    background: linear-gradient(0deg, rgba($c-black, 0.75) 30%, rgba($c-black, 0) 100%);
    position: absolute;
    top: 40%;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

.c-make-a-difference-callout__title {
  max-width: 25rem;
  position: absolute;
  bottom: 4rem;
  left: 6rem;
}
.c-make-a-difference-callout__blocks {
  display: flex;
  flex-direction: column;
  color: var(--ct-text-on-dark);
  flex: 0 0 33%;
}

.c-make-a-difference-callout__block {
  background-color: $c-plum;
  flex: 1;
  padding: 2rem 2rem 2rem 2rem;
  @include break($sm-md) {
    padding: 3rem 3rem 5.5rem 3rem;
  }
  &:last-child {
    background-color: $c-navy;
  }
}
.c-make-a-difference-callout__block-title {
  padding: 1.5rem 0;
}

.c-make-a-difference-callout__block-icon {
  display: block;
  margin-top: 2.5rem;
}

.c-make-a-difference-callout__block-link {
  display: block;
  color: var(--ct-text-on-dark);
}

URL: /components/raw/make-a-difference-callout/make-a-difference-callout.scss
Filesystem Path: patterns\06-components\make-a-difference-callout\make-a-difference-callout.scss
Size: 1.6 KB

No notes defined.