<div class="c-multi-column-callout" data-bkg-theme="dark">
<div class="o-container">
<div class="c-multi-column-callout__text c-multi-column-callout__text--space o-row">
<div class="c-multi-column-callout__text-content o-col o-col-sm-8">
<h2 id="multi-column-callout-1583" class="c-multi-column-callout__text-title f-title--h3">In the Field</h2>
<p class="c-multi-column-callout__text-description">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit nemo deleniti saepe tenetur libero id qui, corrupti deserunt.</p>
</div>
</div>
<ul class="c-multi-column-callout__cards o-row" aria-labelledby="multi-column-callout-1583">
<li class="c-multi-column-callout__card o-col o-col-sm-4">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="#">
<div class="o-card__content">
<div class="o-card__text">
<h3 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Delaware Watershed Initiative</span>
</h3>
<p class="o-card__text-description f-text--small ">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit nemo deleniti saepe tenetur libero id qui, corrupti deserunt.</p>
</div>
<div class="o-card__img">
<img src="/images/homepage/Data_TheDelaware.jpg" alt="image of woman in a lake" />
</div>
</div>
</a>
</div>
</li>
<li class="c-multi-column-callout__card o-col o-col-sm-4">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="#">
<div class="o-card__content">
<div class="o-card__text">
<h3 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Delaware Watershed Initiative</span>
</h3>
<p class="o-card__text-description f-text--small ">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit nemo deleniti saepe tenetur libero id qui, corrupti deserunt.</p>
</div>
<div class="o-card__img">
<img src="/images/homepage/Data_TheDelaware.jpg" alt="image of woman in a lake" />
</div>
</div>
</a>
</div>
</li>
<li class="c-multi-column-callout__card o-col o-col-sm-4">
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="#">
<div class="o-card__content">
<div class="o-card__text">
<h3 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Delaware Watershed Initiative</span>
</h3>
<p class="o-card__text-description f-text--small ">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit nemo deleniti saepe tenetur libero id qui, corrupti deserunt.</p>
</div>
<div class="o-card__img">
<img src="/images/homepage/Data_TheDelaware.jpg" alt="image of woman in a lake" />
</div>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
{% set panelColorTheme = panelColorTheme ? panelColorTheme : 'base' %}
{% set hID = 'multi-column-callout-' ~ random(5000) %}
{% set idAttr = id is defined and id ? 'id="' ~ id ~ '"' : '' %}
<div {{ idAttr }} class="c-multi-column-callout" data-bkg-theme="{{ panelColorTheme }}">
<div class="o-container">
<div class="c-multi-column-callout__text{% if not hiddenTitle or description or primaryCtaLink %} c-multi-column-callout__text--space {% endif %} o-row">
<div class="c-multi-column-callout__text-content o-col o-col-sm-8">
<h2 id="{{ hID }}" class="{% if hiddenTitle %}u-sr-only{% else %}c-multi-column-callout__text-title f-title--h3{% endif %}">{{ title }}</h2>
{% if description %}
<p class="c-multi-column-callout__text-description">{{description}}</p>
{% endif %}
</div>
{% if primaryCtaLink %}
<div class="c-multi-column-callout__text-cta o-col o-col-sm-4">
<a href="{{ primaryCtaLink }}" class="c-multi-column-callout__text-cta-link o-btn o-btn--expanding-arrow">
{{ primaryCtaTitle }}
<span class="o-btn__icon" aria-hidden="true">{% include "03-icons/cta-expanding-arrow" %}</span>
</a>
</div>
{% endif %}
</div>
<ul class="c-multi-column-callout__cards o-row" aria-labelledby="{{ hID }}">
{% for card in cards %}
{% if
(cards.length == 3 or cards.length == 6) or
(cards.length == 5 and loop.index > 2)
%}
{% set titleSize = 'small' %}
<li class="c-multi-column-callout__card o-col o-col-sm-4">
{% elseif cards.length == 4 %}
{% if loop.first %}
<li class="c-multi-column-callout__card c-multi-column-callout__card--horizontal o-col">
{% else %}
{% set titleSize = 'small' %}
<li class="c-multi-column-callout__card o-col o-col-sm-4">
{% endif %}
{% else %}
{% set titleSize = 'large' %}
<li class="c-multi-column-callout__card o-col o-col-sm-6">
{% endif %}
{% if cards.length == 4 %}
{% if loop.first %}
{% include '05-objects/horizontal-card' with card|merge({hideContainer: true}) %}
{% else %}
{% include '05-objects/card' with card|merge({hSize: titleSize}) %}
{% endif %}
{% else %}
{% include '05-objects/card' with card|merge({hSize: titleSize}) %}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</div>
{
"pageColorTheme": "teal",
"title": "In the Field",
"description": "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit nemo deleniti saepe tenetur libero id qui, corrupti deserunt.",
"panelColorTheme": "dark",
"cards": [
{
"title": "Delaware Watershed Initiative",
"image": "<img src=\"/images/homepage/Data_TheDelaware.jpg\" alt=\"image of woman in a lake\" />",
"link": "#",
"hTag": "h3"
},
{
"title": "Delaware Watershed Initiative",
"image": "<img src=\"/images/homepage/Data_TheDelaware.jpg\" alt=\"image of woman in a lake\" />",
"link": "#",
"hTag": "h3"
},
{
"title": "Delaware Watershed Initiative",
"image": "<img src=\"/images/homepage/Data_TheDelaware.jpg\" alt=\"image of woman in a lake\" />",
"link": "#",
"hTag": "h3"
}
]
}
.c-multi-column-callout {
margin: 7.2rem 0;
@include break($sm){
margin: 11.2rem 0;
}
&[data-bkg-theme="light"] {
margin: 0;
padding: 7.2rem 0;
@include break($sm){
margin: 0;
padding: 11.2rem 0;
}
}
}
.c-multi-column-callout__text {
align-items: flex-end;
}
.c-multi-column-callout__text--space {
margin-bottom: 3.4rem;
}
.c-multi-column-callout__text-title {
margin-bottom: 1.2rem;
}
.c-multi-column-callout__text-cta {
margin-top: 2.4rem;
@include break($sm) {
margin-top: 0;
text-align: right;
}
}
.c-multi-column-callout__card {
margin-bottom: 7.8rem;
&.c-multi-column-callout__card--horizontal {
@include break($sm) {
margin-bottom: 3.2rem;
}
}
}
No notes defined.