<div class="c-people-feature" data-bkg-theme="dark">
<div class="o-container">
<div class="c-people-feature__content o-row">
<div class="o-col o-col-sm-5 o-col-sm--offset-1 c-people-feature__img">
<img src="/images/robert-peck.png" alt="placeholder">
<p class="c-people-feature__img--caption f-text--caption">Bob Peck pictured on the Great Wall China in 2011.</p>
</div>
<div class="o-col o-col-sm-6 o-col-lg-6 c-people-feature__text">
<figure class="c-people-feature__wrapper">
<blockquote class="c-people-feature__quote">
<span class="c-people-feature__icon" aria-hidden="true"><svg width="32" height="27" viewBox="0 0 32 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-fill" d="M31.16 20.48C31.16 17.44 29.72 14 23.88 14H22.04C22.68 9.12 25.64 6.16 30.92 3.36L29.64 0.879998C21.72 4.56 17.32 9.52 17.32 18.08C17.32 23.04 20.12 26.4 25 26.4C28.68 26.4 31.16 23.68 31.16 20.48ZM13.96 20.48C13.96 17.44 12.52 14 6.68 14H4.84C5.48 9.12 8.44 6.16 13.72 3.36L12.44 0.879998C4.52 4.56 0.12 9.52 0.12 18.08C0.12 23.04 2.92 26.4 7.8 26.4C11.48 26.4 13.96 23.68 13.96 20.48Z" />
</svg>
</span>
<p class="c-people-feature__quote">I loved every expedition I was on, every one of them — even when they were dangerous, uncomfortable, difficult… that was all just part of the experience. I wouldn’t have passed them up for anything.</p>
</blockquote>
<figcaption class="c-people-feature__caption">
<p class=" c-people-feature__attribution f-text--attribution f-upper">
Robert peck
</p>
<cite class="c-people-feature__attribution-byline f-text--attribution-byline">
Senior Fellow
</cite>
</figcaption>
</figure>
<a class="c-people-feature__cta o-btn o-btn--primary o-btn--primary-light" href="#">Meet the team</a>
</div>
</div>
</div>
</div>
{% set panelColorTheme = panelColorTheme is defined ? panelColorTheme : 'dark' %}
<div class="c-people-feature" data-bkg-theme="{{ panelColorTheme }}">
<div class="o-container">
<div class="c-people-feature__content o-row">
<div class="o-col o-col-sm-5 o-col-sm--offset-1 c-people-feature__img">
{{ image|raw }}
<p class="c-people-feature__img--caption f-text--caption">{{credit}}</p>
</div>
<div class="o-col o-col-sm-6 o-col-lg-6 c-people-feature__text">
<figure class="c-people-feature__wrapper">
<blockquote class="c-people-feature__quote">
<span class="c-people-feature__icon" aria-hidden="true">{% include '03-icons/quote' %}</span>
<p class="c-people-feature__quote">{{ quoteText }}</p>
</blockquote>
<figcaption class="c-people-feature__caption">
<p class=" c-people-feature__attribution f-text--attribution f-upper">
{{ attribution }}
</p>
<cite class="c-people-feature__attribution-byline f-text--attribution-byline">
{{ attributionByline }}
</cite>
</figcaption>
</figure>
{% if ctaLink %}
<a class="c-people-feature__cta o-btn o-btn--primary {% if panelColorTheme == 'light' %}o-btn--primary-dark{% else %}o-btn--primary-light{% endif %}" href="{{ ctaLink }}">{{ ctaTitle }}</a>
{% endif %}
</div>
</div>
</div>
</div>
{
"pageColorTheme": "plum",
"image": "<img src=\"/images/robert-peck.png\" alt=\"placeholder\">",
"credit": "Bob Peck pictured on the Great Wall China in 2011.",
"quoteText": "I loved every expedition I was on, every one of them — even when they were dangerous, uncomfortable, difficult… that was all just part of the experience. I wouldn’t have passed them up for anything.",
"attribution": "Robert peck",
"attributionByline": "Senior Fellow",
"ctaTitle": "Meet the team",
"ctaLink": "#"
}
.c-people-feature {
margin: 4.8rem auto;
@include break($sm) {
margin: 16.4rem auto;
}
&[data-bkg-theme="light"] {
margin: 0;
padding: 4.8rem 0;
color: var(--ct-dark);
@include break($sm) {
margin: 0;
padding: 16.4rem 0;
}
}
}
.c-people-feature__img {
@include break($sm) {
padding-right: 5.4rem;
}
}
.c-people-feature__icon {
margin-bottom: 3.2rem;
display: block;
svg {
display: block;
}
}
.c-people-feature__text {
padding-top: 2rem;
}
.c-people-feature__blockquote {
margin: 0 auto;
margin-bottom: 2rem;
@include break($sm) {
margin: 28.6rem 0 9.9rem;
}
}
.c-people-feature__quote {
font-size: 2.2rem;
font-weight: 400;
font-family: $f-serif;
line-height: 1.4;
@include break($sm) {
font-size: 2.5rem;
}
@include break($xl) {
font-size: 3rem;
}
}
.c-people-feature__caption {
margin-top: 3.2rem;
}
.c-people-feature__attribution-byline {
margin-top: 0.8rem;
}
.c-people-feature__cta {
margin-top: 2rem;
@include break($sm) {
margin-top: 4rem;
}
&.o-btn--primary-light {
color: var(--ct-dark);
&:before {
background-color: var(--ct-dark);
}
&:hover {
color: var(--ct-text-on-dark);
}
}
}
.c-people-feature__img--caption {
margin-top: 1.6rem;
}
No notes defined.