<li class="o-list-card js-watch u-watch--fade-up">
<a href="#" class="o-list-card__link">
<div class="o-list-card__content">
<h4 class="o-list-card__title f-title--h5">
<span class="u-hover-drawline">Academy Science Camp: Secrets of the museum</span>
</h4>
<p class="o-list-card__eyebrow f-text--tag f-upper">Daily Activity <span class="u-sep-dot"></span> Free</p>
<p class="o-list-card__description f-text--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.</p>
<p class="o-list-card__date f-text--time">Thursday, March 25</p>
</div>
<div class="o-list-card__image">
<img src="/images/experience/AcademyScienceCamp.jpg" alt="" />
</div>
</a>
</li>
{% set hTag = hTag is defined ? hTag : "h4" %}
<li class="o-list-card {{ classes }} js-watch u-watch--fade-up">
<a href="{{ link }}" class="o-list-card__link{% if noImage %} o-list-card__link--no-image{% endif %}">
<div class="o-list-card__content">
<{{ hTag }} class="o-list-card__title f-title--h5">
<span class="u-hover-drawline">{{title}}</span>
</{{ hTag}}>
{% if tag or cost %}
<p class="o-list-card__eyebrow f-text--tag f-upper">{{ tag }}{% if tag and cost %} <span class="u-sep-dot"></span> {% endif %}{{ cost }}</p>
{% endif %}
{% if description %}
<p class="o-list-card__description f-text--small">{{ description }}</p>
{% endif %}
{% if date %}
<p class="o-list-card__date f-text--time">{{ date }}</p>
{% endif %}
</div>
{% if not noImage %}
<div class="o-list-card__image">
{% if image %}
{{ image|raw }}
{% else %}
<div class="o-list-card__image-fallback"></div>
{% endif %}
</div>
{% endif %}
</a>
</li>
{
"pageColorTheme": "teal",
"title": "Academy Science Camp: Secrets of the museum",
"tag": "Daily Activity",
"cost": "Free",
"image": "<img src=\"/images/experience/AcademyScienceCamp.jpg\" alt=\"\" />",
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus auctor massa in.",
"date": "Thursday, March 25",
"time": "2:00p.m.–3:00p.m.",
"link": "#"
}
.o-list-card {
& + & {
margin-top: 4.8rem;
}
}
.o-list-card__link {
display: block;
display: flex;
flex-direction: column-reverse;
@include break($sm) {
flex-direction: row-reverse;
}
}
.o-list-card__content {
margin-top: 2.4rem;
display: flex;
flex-direction: column;
@include break($sm) {
flex: 0 0 50%;
margin-top: 0;
padding-left: 3.2rem;
.o-list-card__link--no-image & {
flex: 0 0 100%;
padding-left: 0;
}
}
}
.o-list-card__eyebrow {
order: 1;
margin-bottom: 1.6rem;
color: $c-charcoal;
}
.o-list-card__title {
order: 2;
}
.o-list-card__description {
order: 3;
margin-top: 1.2rem;
}
.o-list-card__date {
order: 4;
margin-top: 2rem;
}
.o-list-card__image {
@include break($sm) {
flex: 0 0 50%;
}
}
.o-list-card__image-fallback {
padding-bottom: 75%;
background-color: $c-charcoal-light;
}
No notes defined.