<div class="o-container c-page-header-person">
<h1 class="c-page-header-person__title-desktop f-title--h2 ">Kyle Luckenbill, BA</h1>
<div class="o-row c-page-header-person__row">
<div class="c-page-header-person__text o-col o-col-sm-7">
<h1 class="c-page-header-person__title f-title--h2">Kyle Luckenbill, BA</h1>
<ul class="c-page-header-person__list" aria-label="Department Information">
<li class="c-page-header-person__item">
<p class="c-page-header-person__occupation f-bold f-text--small">Curatorial Assistant, Imaging Specialist</p>
<p class="c-page-header-person__location f-text--small">Ichthyology</p>
</li>
<li class="c-page-header-person__item">
<p class="c-page-header-person__occupation f-bold f-text--small">Production Editor</p>
<p class="c-page-header-person__location f-text--small">Academy Scientific Publications</p>
</li>
<li class="c-page-header-person__item">
<p class="c-page-header-person__occupation f-bold f-text--small">Professor Emeritus</p>
<p class="c-page-header-person__location f-text--small">Department of Biodiversity, Earth & Environmental Science</p>
</li>
</ul>
<ul class="c-page-header-person__contact-information" aria-label="Additional Information">
<li>
<p class="c-page-header-person__contact-information-email f-text--small">firstname@gmail.com</p>
</li>
<li>
<p class="c-page-header-person__contact-information-phone f-text--small">123-456-7890</p>
</li>
<li class="c-page-header-person__download-cv">
<a href="#" class="f-text--xsmall f-upper">
<span class="c-page-header-person__download-cv__icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="u-ct-stroke" d="M8 0L8 15" />
<path class="u-ct-stroke" d="M15 8L8 15L1 8" />
</svg>
</span>
download cv
</a>
</li>
</ul>
</div>
<div class="c-page-header-person__image o-col o-col-sm-4 o-col-sm--offset-1">
<img src="/../../images/kyle.png" alt="">
</div>
<div class="o-col c-page-header-person__sep-wrapper">
<div class="c-page-header-person__sep"></div>
</div>
</div>
</div>
<div class="o-container c-page-header-person">
<h1 class="c-page-header-person__title-desktop f-title--h2 ">{{title}}</h1>
<div class="o-row c-page-header-person__row">
<div class="c-page-header-person__text o-col o-col-sm-7">
<h1 class="c-page-header-person__title f-title--h2">{{title}}</h1>
{% if items %}
<ul class="c-page-header-person__list" aria-label="Department Information">
{% for item in items %}
<li class="c-page-header-person__item">
<p class="c-page-header-person__occupation f-bold f-text--small">{{item.occupation}}</p>
<p class="c-page-header-person__location f-text--small">{{item.location}}</p>
</li>
{% endfor %}
</ul>
{% endif %}
{% if email or phone or downloadLinks.src %}
<ul class="c-page-header-person__contact-information" aria-label="Additional Information">
<li>
<p class="c-page-header-person__contact-information-email f-text--small">{{email}}</p>
</li>
<li>
<p class="c-page-header-person__contact-information-phone f-text--small">{{phone}}</p>
</li>
{% if downloadLinks.link %}
<li class="c-page-header-person__download-cv">
<a href="{{downloadLinks.link}}" class="f-text--xsmall f-upper">
<span class="c-page-header-person__download-cv__icon">{% include "03-icons/cta-arrow-down" %}</span>
{{downloadLinks.title}}
</a>
</li>
{% endif %}
</ul>
{% endif %}
</div>
<div class="c-page-header-person__image o-col o-col-sm-4 o-col-sm--offset-1">
{{ image|raw }}
</div>
<div class="o-col c-page-header-person__sep-wrapper">
<div class="c-page-header-person__sep"></div>
</div>
</div>
</div>
{
"pageColorTheme": "teal",
"title": "Kyle Luckenbill, BA",
"items": [
{
"occupation": "Curatorial Assistant, Imaging Specialist",
"location": "Ichthyology"
},
{
"occupation": "Production Editor",
"location": "Academy Scientific Publications"
},
{
"occupation": "Professor Emeritus",
"location": "Department of Biodiversity, Earth & Environmental Science"
}
],
"email": "firstname@gmail.com",
"phone": "123-456-7890",
"downloadLinks": {
"title": "download cv",
"link": "#"
},
"image": "<img src=\"/../../images/kyle.png\" alt=\"\">"
}
.c-page-header-person {
margin-top: 2.4rem;
margin-bottom: 3.2rem;
@include break($sm) {
margin-top: 5rem;
margin-bottom: 6.4rem;
}
}
.c-page-header-person__text {
order: 2;
@include break($sm-md) {
order: 1;
}
}
.c-page-header-person__image {
order: 1;
margin-bottom: 2.4rem;
@include break($sm) {
order: 2;
margin-bottom: 0;
}
}
.c-page-header-person__title {
margin-bottom: 2.9rem;
display: none;
@include break($sm) {
display: block;
}
}
.c-page-header-person__title-desktop {
margin-bottom: 2.9rem;
display: block;
@include break($sm) {
display: none;
}
}
.c-page-header-person__list {
margin-bottom: 3rem;
}
.c-page-header-person__item {
margin-bottom: 2rem;
}
.c-page-header-person__contact-information-email,
.c-page-header-person__contact-information-phone {
margin-bottom: 1rem;
}
.c-page-header-person__download-cv__icon {
padding-right: 1rem;
}
.c-page-header-person__sep-wrapper {
order: 3;
margin-top: 3.2rem;
@include break($sm) {
margin-top: 5.4rem;
}
}
.c-page-header-person__sep {
border-bottom: 0.1rem solid var(--ct-dark);
}
.c-page-header-person__download-cv__icon {
svg {
width: 11px;
height: 11px;
@include break($sm) {
width: auto;
height: auto;
}
}
}
No notes defined.