<div class="o-container c-featured-content-callout" data-bkg-theme="base">
<h2 class="u-sr-only">Featured journal articles</h2>
<ul class="c-featured-content-callout__cards o-row">
<li class="c-featured-content-callout__card o-col o-col-sm-6">
<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">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Support environmental justice</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in, euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/tree-fire.png" alt="image of woman in a lake" />
</div>
</div>
</a>
<ul class="o-card__tags">
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>Environmental Justice</a>
</li>
</ul>
</div>
</li>
<li class="c-featured-content-callout__card o-col o-col-sm-6">
<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">
<h2 class="o-card__text-title f-title--h5">
<span class="u-hover-drawline">Lorem ipsum dolor sit amet consectetur adipiscing</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.</p>
</div>
<div class="o-card__img">
<img src="/images/fossil-spiral-fish.png" alt="image of woman in a lake" />
</div>
</div>
</a>
<ul class="o-card__tags">
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
<li class="o-card__tag">
<a class="c-tag f-text--tag" href=#>topic tag</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="{% if not hideContainer %}o-container {% endif %}c-featured-content-callout" data-bkg-theme="base">
<h2 class="u-sr-only">{{ title }}</h2>
<ul class="c-featured-content-callout__cards o-row">
{% for card in cards %}
{% if cards|length == 2 %}
{% set colClass = 'o-col-sm-6' %}
{% set hSize = 'small' %}
{% elseif cards|length == 3 %}
{% set colClass = loop.index == 1 ? 'o-col-12' : 'o-col-sm-6' %}
{% set hSize = loop.index == 1 ? 'normal' : 'small' %}
{% else %}
{% set colClass = 'o-col-12' %}
{% set hSize = 'normal' %}
{% endif %}
<li class="c-featured-content-callout__card o-col {{ colClass }}">
{% include '04-objects/card' with card|merge({hSize: hSize}) %}
</li>
{% endfor %}
</ul>
</div>
{
"pageColorTheme": "teal",
"title": "Featured journal articles",
"cards": [
{
"link": "#",
"title": "Support environmental justice",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in, euismodos.",
"image": "<img src=\"/images/tree-fire.png\" alt=\"image of woman in a lake\" />",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "Environmental Justice",
"link": "#"
}
]
},
{
"link": "#",
"title": "Lorem ipsum dolor sit amet consectetur adipiscing",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in, euismod libero amet. Etiam a purus auctor massa in euismodos.",
"image": "<img src=\"/images/fossil-spiral-fish.png\" alt=\"image of woman in a lake\" />",
"tagLinks": [
{
"title": "topic tag",
"link": "#"
},
{
"title": "topic tag",
"link": "#"
}
]
}
]
}
.c-featured-content-callout {
margin: 7rem auto;
}
.c-featured-content-callout__card {
& + & {
margin-top: 3.2rem;
@include break($sm) {
margin-top: 7.2rem;
}
}
.o-card__text-description-title {
max-width: 8rem;
}
.o-card__text-description {
max-width: 55rem;
}
}
No notes defined.