<div class="c-content-panel" data-bkg-theme="dark">
<div class="o-container">
<h2 class="c-content-panel__title f-title--h2">Our research</h2>
<div class="o-row">
<div class="c-content-panel__content o-col o-col-sm-8 o-col-sm--offset-2 o-col-sm-md-7">
<p>An introduction about the general focus and purpose of the Academy’s research goes here. Mauris efficitur libero risus, semper auctor orci sollicitudin sed. In varius lorem at ex varius.</p>
<p>Additional detail about the different centers of research or areas of focus may go here. Gravida velit et, suscipit ex. Nullam iaculis ex dui, et lobortis purus blandit sed. Nam non sapien imperdiet lorem accumsan volutpat at et quam. Vestibulum facilisis dolor quis mauris consequat, ipsum porttitor ex rhoncus. </p>
<div class="c-content-panel__link">
<a class="c-content-panel__link-cta o-btn o-btn--expanding-arrow f-text--cta" href=#>
Explore our programs
<span class="o-btn__icon" aria-hidden="true"><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>
</a>
</div>
</div>
</div>
</div>
</div>
{% set panelColorTheme = panelColorTheme is defined ? panelColorTheme : 'base' %}
{% set idAttr = id is defined ? 'id="' ~ id ~ '"' : '' %}
<div {{ idAttr }} class="c-content-panel" data-bkg-theme="{{ panelColorTheme }}">
<div class="o-container">
<h2 class="c-content-panel__title f-title--h2">{{ title }}</h2>
<div class="o-row">
<div class="c-content-panel__content o-col o-col-sm-8 o-col-sm--offset-2 o-col-sm-md-7">
{{ content|raw }}
{% if ctaTitle %}
<div class="c-content-panel__link">
<a class="c-content-panel__link-cta o-btn o-btn--expanding-arrow f-text--cta" href={{ctaLink}}>
{{ctaTitle}}
<span class="o-btn__icon" aria-hidden="true">{% include "03-icons/cta-expanding-arrow" %}</span>
</a>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{
"pageColorTheme": "teal",
"panelColorTheme": "dark",
"title": "Our research",
"content": "<p>An introduction about the general focus and purpose of the Academy’s research goes here. Mauris efficitur libero risus, semper auctor orci sollicitudin sed. In varius lorem at ex varius.</p><p>Additional detail about the different centers of research or areas of focus may go here. Gravida velit et, suscipit ex. Nullam iaculis ex dui, et lobortis purus blandit sed. Nam non sapien imperdiet lorem accumsan volutpat at et quam. Vestibulum facilisis dolor quis mauris consequat, ipsum porttitor ex rhoncus. </p>",
"ctaLink": "#",
"ctaTitle": "Explore our programs"
}
.c-content-panel {
margin: 6.4rem 0;
@include break($sm){
margin: 12rem 0 13.6rem;
}
&[data-bkg-theme="light"] {
margin: 0;
padding: 6.4rem 0;
@include break($sm){
margin: 0;
padding: 12rem 0 13.6rem;
}
}
}
.c-content-panel__title {
margin-bottom: 7.2rem;
}
.c-content-panel__content {
p,
ul {
@include text--reg;
}
p:first-of-type {
@include text--large;
font-weight: $f-bold;
}
p + p {
margin-top: 3.2rem;
}
}
.c-content-panel__link {
margin-top: 4rem;
align-items: center;
}
.c-content-panel__link-cta {
display: flex;
}
.c-content-panel__link-cta-icon {
padding-left: 1rem;
}
No notes defined.