<div class="o-featured-card o-container">
<a href="#" class="o-featured-card__inner">
<div class="o-featured-card__content">
<div class="o-featured-card__content-inner">
<h2 class="o-featured-card__title f-title--h4">
<span class="u-hover-drawline">Permian Monsters</span>
</h2>
<p class="o-featured-card__label f-text--tag">Featured Exhibit</p>
<p class="o-featured-card__description f-text--small">What did the world look like before the dinosaurs? Step back 290 million years to when bizarre-looking creatures dominated life on land and sea, and dinosaurs had not yet evolved.</p>
<div class="o-featured-card__cta">
<span class="o-featured-card__cta-text o-btn o-btn--primary-inverse">Explore this Exhibit</span>
</div>
</div>
</div>
<div class="o-featured-card__image">
<img src="/images/homepage/beetle.jpg" alt="" />
</div>
</a>
</div>
{% set hTag = hTag is defined ? hTag : "h2" %}
<div class="o-featured-card o-container">
<a href="{{ link }}" class="o-featured-card__inner">
<div class="o-featured-card__content">
<div class="o-featured-card__content-inner">
<{{ hTag }} class="o-featured-card__title f-title--h4">
<span class="u-hover-drawline">{{title}}</span>
</{{ hTag }}>
<p class="o-featured-card__label f-text--tag">{{ label }}</p>
<p class="o-featured-card__description f-text--small">{{ description }}</p>
<div class="o-featured-card__cta">
<span class="o-featured-card__cta-text o-btn o-btn--primary-inverse">{{ ctaTitle }}</span>
</div>
</div>
</div>
<div class="o-featured-card__image">
{{ image|raw }}
</div>
</a>
</div>
{
"pageColorTheme": "teal",
"label": "Featured Exhibit",
"title": "Permian Monsters",
"image": "<img src=\"/images/homepage/beetle.jpg\" alt=\"\" />",
"description": "What did the world look like before the dinosaurs? Step back 290 million years to when bizarre-looking creatures dominated life on land and sea, and dinosaurs had not yet evolved.",
"link": "#",
"ctaTitle": "Explore this Exhibit"
}
.o-featured-card__inner {
display: flex;
flex-direction: column-reverse;
@include break($sm) {
flex-direction: row-reverse;
}
}
.o-featured-card__content {
display: flex;
align-items: center;
padding: 3.2rem;
background-color: var(--ct-dark);
color: var(--ct-text-on-dark);
@include break($sm) {
flex: 0 0 40%;
}
}
.o-featured-card__content-inner {
display: flex;
flex-direction: column;
}
.o-featured-card__label {
order: 1;
margin-bottom: 1.6rem;
}
.o-featured-card__title {
order: 2;
}
.o-featured-card__description {
order: 3;
margin-top: 1.6rem;
}
.o-featured-card__cta {
order: 4;
margin-top: 4.3rem;
}
.o-featured-card__image {
@include break($sm) {
flex: 0 0 60%;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
No notes defined.