<div class="alternating-image-callouts" data-bkg-theme="base">
<ul class="alternating-image-callouts__cards">
<li class="alternating-image-callouts__card js-watch u-watch--fade-up">
<div class="o-h-card " data-bkg-theme="">
<div class="o-container o-h-card__wrapper">
<div class="o-row o-h-card__row">
<div class="o-h-card__image-wrapper o-col o-col-sm-6 o-col-sm-md-7">
<div class="o-h-card__image">
<img src="/images/support/Donate.jpg" alt="" />
</div>
</div>
<div class="o-h-card__content-wrapper o-col o-col-sm-6 o-col-sm-md-5">
<div class="o-h-card__content o-h-card__content--bordered">
<div class="o-h-card__main-text">
<a href="" class="o-h-card__link">
<h2 class="o-h-card__title f-title--h4 ">
<span class="u-hover-drawline">Donate to the Academy</span>
</h2>
<p class="o-h-card__desc f-text--small">Your donation goes towards lorem ipsum dolor sit amet. Whether it's adopting a criter, lorem ipsum, or vel sodales dictum, leo turpis pellentesque nisi ac viverra turpis ex sit amet dolor. </p>
</div>
<div class="o-h-card__cta o-btn o-btn--expanding-arrow f-text--cta">
Learn More
<span class="o-h-card__cta-icon o-btn__icon">
<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>
</div>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="alternating-image-callouts__card js-watch u-watch--fade-up">
<div class="o-h-card " data-bkg-theme="">
<div class="o-container o-h-card__wrapper">
<div class="o-row o-h-card__row">
<div class="o-h-card__image-wrapper o-col o-col-sm-6 o-col-sm-md-7">
<div class="o-h-card__image">
<img src="/images/support/becomeamember.jpg" alt="" />
</div>
</div>
<div class="o-h-card__content-wrapper o-col o-col-sm-6 o-col-sm-md-5">
<div class="o-h-card__content o-h-card__content--bordered">
<div class="o-h-card__main-text">
<a href="" class="o-h-card__link">
<h2 class="o-h-card__title f-title--h4 ">
<span class="u-hover-drawline">Become a member</span>
</h2>
<p class="o-h-card__desc f-text--small">Your donation goes towards lorem ipsum dolor sit amet. Whether it's adopting a criter, lorem ipsum, or vel sodales dictum, leo turpis pellentesque nisi ac viverra turpis ex sit amet dolor. </p>
</div>
<div class="o-h-card__cta o-btn o-btn--expanding-arrow f-text--cta">
Learn More
<span class="o-h-card__cta-icon o-btn__icon">
<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>
</div>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="alternating-image-callouts__card js-watch u-watch--fade-up">
<div class="o-h-card " data-bkg-theme="">
<div class="o-container o-h-card__wrapper">
<div class="o-row o-h-card__row">
<div class="o-h-card__image-wrapper o-col o-col-sm-6 o-col-sm-md-7">
<div class="o-h-card__image">
<img src="/images/support/volunteer.jpg" alt="" />
</div>
</div>
<div class="o-h-card__content-wrapper o-col o-col-sm-6 o-col-sm-md-5">
<div class="o-h-card__content o-h-card__content--bordered">
<div class="o-h-card__main-text">
<a href="" class="o-h-card__link">
<h2 class="o-h-card__title f-title--h4 ">
<span class="u-hover-drawline">Volunteer</span>
</h2>
<p class="o-h-card__desc f-text--small">Your donation goes towards lorem ipsum dolor sit amet. Whether it's adopting a criter, lorem ipsum, or vel sodales dictum, leo turpis pellentesque nisi ac viverra turpis ex sit amet dolor. </p>
</div>
<div class="o-h-card__cta o-btn o-btn--expanding-arrow f-text--cta">
Learn More
<span class="o-h-card__cta-icon o-btn__icon">
<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>
</div>
</a>
</div>
</div>
</div>
</div>
</li>
<li class="alternating-image-callouts__card js-watch u-watch--fade-up">
<div class="o-h-card " data-bkg-theme="">
<div class="o-container o-h-card__wrapper">
<div class="o-row o-h-card__row">
<div class="o-h-card__image-wrapper o-col o-col-sm-6 o-col-sm-md-7">
<div class="o-h-card__image">
<img src="/images/support/corporate.jpg" alt="" />
</div>
</div>
<div class="o-h-card__content-wrapper o-col o-col-sm-6 o-col-sm-md-5">
<div class="o-h-card__content o-h-card__content--bordered">
<div class="o-h-card__main-text">
<a href="" class="o-h-card__link">
<h2 class="o-h-card__title f-title--h4 ">
<span class="u-hover-drawline">Become a corporate partner</span>
</h2>
<p class="o-h-card__desc f-text--small">The Academy's Corporate Partners make all our initiatives possible.</p>
</div>
<div class="o-h-card__cta o-btn o-btn--expanding-arrow f-text--cta">
Learn More
<span class="o-h-card__cta-icon o-btn__icon">
<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>
</div>
</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="alternating-image-callouts" data-bkg-theme="base">
<ul class="alternating-image-callouts__cards">
{% for hCard in hCards %}
<li class="alternating-image-callouts__card js-watch u-watch--fade-up">
{% include "04-objects/horizontal-card" with hCard|merge({useBorder: true, hTag: 'h2'}) %}
</li>
{% endfor %}
</ul>
</div>
{
"pageColorTheme": "teal",
"hCards": [
{
"title": "Donate to the Academy",
"link": "#",
"description": "Your donation goes towards lorem ipsum dolor sit amet. Whether it's adopting a criter, lorem ipsum, or vel sodales dictum, leo turpis pellentesque nisi ac viverra turpis ex sit amet dolor. ",
"image": "<img src=\"/images/support/Donate.jpg\" alt=\"\" />",
"linkCTAText": "Learn More"
},
{
"title": "Become a member",
"link": "#",
"description": "Your donation goes towards lorem ipsum dolor sit amet. Whether it's adopting a criter, lorem ipsum, or vel sodales dictum, leo turpis pellentesque nisi ac viverra turpis ex sit amet dolor. ",
"image": "<img src=\"/images/support/becomeamember.jpg\" alt=\"\" />",
"linkCTAText": "Learn More"
},
{
"title": "Volunteer",
"link": "#",
"description": "Your donation goes towards lorem ipsum dolor sit amet. Whether it's adopting a criter, lorem ipsum, or vel sodales dictum, leo turpis pellentesque nisi ac viverra turpis ex sit amet dolor. ",
"image": "<img src=\"/images/support/volunteer.jpg\" alt=\"\" />",
"linkCTAText": "Learn More"
},
{
"title": "Become a corporate partner",
"link": "#",
"description": "The Academy's Corporate Partners make all our initiatives possible.",
"image": "<img src=\"/images/support/corporate.jpg\" alt=\"\" />",
"linkCTAText": "Learn More"
}
]
}
.alternating-image-callouts {
margin: 4.8rem 0;
@include break($sm) {
margin: 9.2rem 0;
}
.alternating-image-callouts__card .o-h-card__title {
margin: 1rem 0;
@include break($sm) {
margin: 6.4rem 0 1.2rem;
}
}
.alternating-image-callouts__card .o-h-card__desc {
margin-bottom: 0.5rem;
@include break($sm) {
margin-bottom: 2.4rem;
}
}
}
.alternating-image-callouts__card {
& + & {
margin-top: 3.2rem;
@include break($sm) {
margin-top: 6.4rem;
}
}
}
.alternating-image-callouts__card:nth-child(even) .o-h-card__row {
@include break($sm) {
flex-direction: row-reverse;
}
}
No notes defined.