<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--h4">
<span class="u-hover-drawline">Delaware Watershed Initiative</span>
</h2>
<p class="o-card__text-description f-text--small ">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<p class="o-card__content-label f-text--tag f-upper f-spaced">Featured Article
</p>
<div class="o-card__img">
<img src="/images/fossil-spiral.jpg" alt="image of woman in a lake" />
</div>
</div>
</a>
</div>
{% set hTag = hTag is defined ? hTag : "h2" %}
{% set hClass = hSize == 'small' ? 'f-title--h5' : 'f-title--h4' %}
{% set hClass = hSize == 'xsmall' ? 'f-title--h6 f-reg' : hClass %}
<div class="o-card o-card">
<a class="o-card__link u-hover-grow-image" href="{{ link }}">
<div class="o-card__content">
<div class="o-card__text">
<{{hTag}} class="o-card__text-title {{ hClass }}">
<span class="u-hover-drawline">{{title}}</span>
</{{hTag}}>
{% if description %}
<p class="o-card__text-description f-text--small ">{{description}}</p>
{% endif %}
</div>
{% if label %}
<p class="o-card__content-label f-text--tag f-upper f-spaced">{{ label }}
{% if labelAdditional %}
<span class="u-sep-dot"></span>
{{ labelAdditional }}
{% endif %}
</p>
{% endif %}
<div class="o-card__img">
{% if videoEmbed %}
<div class="o-card__video">
{{ videoEmbed|raw }}
</div>
{% else %}
{{ image }}
{% endif %}
</div>
</div>
</a>
{% if tagLinks %}
<ul class="o-card__tags">
{% for tagLink in tagLinks %}
<li class="o-card__tag">
{% include '04-objects/tag' with tagLink only %}
</li>
{% endfor %}
</ul>
{% endif %}
{% if dateDay %}
<p class="o-card__date-day f-text--time">{{ dateDay }}</p>
{% endif %}
{% if dateTime %}
<p class="o-card__date-time f-text--time">{{ dateTime }}</p>
{% endif %}
</div>
{
"pageColorTheme": "teal",
"link": "#",
"title": "Delaware Watershed Initiative",
"description": "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
"image": "<img src=\"/images/fossil-spiral.jpg\" alt=\"image of woman in a lake\" />",
"label": "Featured Article"
}
.o-card {
position: relative;
}
.o-card__link {
display: block;
}
.o-card__content {
display: flex;
flex-direction: column;
}
.o-card__content-label {
margin-bottom: 1rem;
order: 1;
border-top: 0.1rem solid var(--ct-txt);
padding-top: 1rem;
color: inherit;
}
.o-card__img {
order: 2;
overflow: hidden;
}
.o-card__video {
position: relative;
overflow: hidden;
&:after {
content: '';
display: block;
padding-bottom: 56.25%;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.o-card__text {
order: 3;
}
.o-card__text-title {
margin: 2rem 0 0.8rem;
}
.o-card__tags {
margin-top: 2rem;
}
.o-card__tag {
display: inline-block;
margin-right: 1rem;
}
.o-card__date-day {
margin-top: 1.2rem;
}
.o-card__date-time {
margin-top: 0.4rem;
}
No notes defined.