<div class="o-h-card " data-bkg-theme="">
<div class="o-container o-h-card__wrapper">
<div class="o-row o-h-card__row">
<div class="o-h-card__image-wrapper o-col o-col-sm-6 o-col-sm-md-7">
<div class="o-h-card__image">
<img src="/images/collections/shells.jpg" alt="" />
</div>
</div>
<div class="o-h-card__content-wrapper o-col o-col-sm-6 o-col-sm-md-5">
<div class="o-h-card__content">
<div class="o-h-card__main-text">
<div class="o-h-card__eyebrows">
<div class="o-h-card__eyebrow-groups">
<div class="o-h-card__eyebrow-group">
<p class="o-h-card__content-eyebrow f-text--cta f-upper f-bold f-spaced">Eyebrow Title</p>
<p class="o-h-card__content-sub-eyebrow f-text--tag">Eyebrow Subtitle</p>
</div>
<div class="o-h-card__eyebrow-group">
<p class="o-h-card__content-eyebrow f-text--cta f-upper f-bold f-spaced">Eyebrow Title</p>
<p class="o-h-card__content-sub-eyebrow f-text--tag">Eyebrow Subtitle</p>
</div>
</div>
</div>
<a href="" class="o-h-card__link">
<h4 class="o-h-card__title f-title--h4 ">
<span class="u-hover-drawline">Amazing shells of the Academy</span>
</h4>
<p class="o-h-card__desc f-text--small">The Academy's shell collection dates back to 1812. Including more than 10 million shells, it represents every region of the world</p>
</div>
<div class="o-h-card__cta o-btn o-btn--expanding-arrow f-text--cta">
Learn More
<span class="o-h-card__cta-icon o-btn__icon">
<svg width="31" height="16" viewBox="0 0 31 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="u-cta-arrow">
<path class="u-ct-stroke u-cta-arrow__path" d="M0 8H20M20 8L13 1M20 8L13 15" />
</svg>
</span>
</div>
</a>
<a class="o-h-card__secondary-link o-btn o-btn--primary" href=#>
explore all projects
</a>
</div>
</div>
</div>
</div>
{% set hTag = hTag is defined ? hTag : "h2" %}
{% set hSizeClass = hSizeClass is defined ? hSizeClass : 'f-title--h4' %}
{% set panelColorTheme = panelColorTheme ? panelColorTheme : 'base' %}
<div class="o-h-card {% if label %} o-h-card--label{% endif %}{% if isCentered %} o-h-card--centered{% endif %}" data-bkg-theme="{{ panelColorTheme }}">
<div class="{% if not hideContainer %}o-container{% endif %} o-h-card__wrapper">
<div class="o-row o-h-card__row">
<div class="o-h-card__image-wrapper o-col o-col-sm-6 o-col-sm-md-7">
<div class="o-h-card__image">
{{ image|raw }}
</div>
</div>
<div class="o-h-card__content-wrapper o-col o-col-sm-6 o-col-sm-md-5">
<div class="o-h-card__content{% if not label and useBorder %} o-h-card__content--bordered{% endif %}">
{% if label %}
<p class="o-h-card__content-label f-text--tag f-upper f-spaced">{{label}}</p>
{% endif %}
<div class="o-h-card__main-text">
{% if eyebrowGroups or eyebrow or subEyebrow %}
<div class="o-h-card__eyebrows">
{% if eyebrowGroups %}
<div class="o-h-card__eyebrow-groups">
{% for item in eyebrowGroups %}
<div class="o-h-card__eyebrow-group">
<p class="o-h-card__content-eyebrow f-text--cta f-upper f-bold f-spaced">{{ item.title }}</p>
{% if item.subtitle %}
<p class="o-h-card__content-sub-eyebrow f-text--tag">{{ item.subtitle }}</p>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
{% if eyebrow %}
<p class="o-h-card__content-eyebrow f-text--cta f-upper f-bold f-spaced">{{ eyebrow }}</p>
{% endif %}
{% if subEyebrow %}
<p class="o-h-card__content-sub-eyebrow f-text--tag">{{ subEyebrow }}</p>
{% endif %}
</div>
{% endif %}
<a href="{{ url }}" class="o-h-card__link">
<{{hTag}} class="o-h-card__title {{ hSizeClass}} {{ hClass }}">
<span class="u-hover-drawline">{{title}}</span>
</{{hTag}}>
<p class="o-h-card__desc f-text--small">{{description}}</p>
</div>
<div class="o-h-card__cta o-btn o-btn--expanding-arrow f-text--cta">
{{linkCTAText}}
<span class="o-h-card__cta-icon o-btn__icon">
{% include "03-icons/03-icons/cta-expanding-arrow" %}
</span>
</div>
</a>
{% if buttonCTALink %}
<a class="o-h-card__secondary-link o-btn o-btn--primary" href={{buttonCTALink}}>
{{buttonCTAText}}
</a>
{% endif %}
</div>
</div>
</div>
</div>
{
"pageColorTheme": "teal",
"hTag": "h4",
"title": "Amazing shells of the Academy",
"link": "#",
"label": false,
"description": "The Academy's shell collection dates back to 1812. Including more than 10 million shells, it represents every region of the world",
"image": "<img src=\"/images/collections/shells.jpg\" alt=\"\" />",
"linkCTAText": "Learn More",
"buttonCTAText": "explore all projects",
"buttonCTALink": "#",
"eyebrowGroups": [
{
"title": "Eyebrow Title",
"subtitle": "Eyebrow Subtitle"
},
{
"title": "Eyebrow Title",
"subtitle": "Eyebrow Subtitle"
}
]
}
.o-h-card--centered {
.o-h-card__content-wrapper {
display: flex;
align-items: center;
}
}
.o-h-card__content--bordered {
@include break($sm) {
border-top: 0.1rem solid var(--ct-txt);
}
}
.o-h-card__image {
margin-bottom: 3.2rem;
@include break($sm) {
margin-bottom: 0;
}
}
.o-h-card__content-label {
padding-top: 1.5rem;
@include break($sm) {
border-top: 0.1rem solid var(--ct-txt);
padding-top: 1.5rem;
padding-bottom: 2rem;
}
}
.o-h-card__eyebrows {
margin-bottom: 1.2rem;
}
.o-h-card__content-eyebrow {
line-height: 1.2;
}
.o-h-card__content-sub-eyebrow {
margin-top: 0.8rem;
}
.o-h-card__eyebrow-groups {
@include break($xs) {
display: flex;
}
@include break($sm) {
display: block;
}
@include break($sm-md) {
display: flex;
}
}
.o-h-card__eyebrow-group {
margin-right: 1.2rem;
& + & {
margin-top: 1.6rem;
@include break($xs) {
margin-top: 0;
padding-left: 1.2rem;
border-left: 0.1rem solid $c-charcoal-light;
}
@include break($sm) {
margin-top: 1.6rem;
padding-left: 0;
border-left: 0;
}
@include break($sm-md) {
margin-top: 0;
padding-left: 1.2rem;
border-left: 0.1rem solid $c-charcoal-light;
}
}
}
.o-h-card__link {
display: flex;
flex-direction: column;
}
.o-h-card__title {
margin: 1rem 0;
@include break($sm) {
margin: 2rem 0;
}
}
.o-h-card__desc {
margin-bottom: 0.5rem;
@include break($xl) {
margin-bottom: 2rem;
}
}
.o-h-card__secondary-link {
margin-top: 2rem;
@include break($sm) {
margin-top: 2.4rem;
}
}
.o-h-card__cta-icon {
padding-left: 0.4rem;
}
No notes defined.