<div class="person-teaser ">
<div class="person-teaser__content">
<h3 class="headline-group person-teaser__name">
<span class="headline-group__head"><a href="http://example.com" class="">Name McNameface</a></span>
</h3>
<div class="person-teaser__info">
<ul class="person-teaser__titles">
<li>Director of Example Departments</li>
</ul>
</div>
<div class="person-teaser__contact">
<p><a href="#">email@davidson.edu</a></p>
<p>704-123-4567</p>
<dl class="inline-terms">
<dt>Office</dt>
<dd>Wall 327</dd>
<dt>Research Lab</dt>
<dd>Wall 325/325A</dd>
</dl>
</div>
</div>
</div>
{% if person_teaser is not empty %}
<div class="person-teaser {{ person_teaser.variant }}">
<div class="person-teaser__content">
{% include '@headline-group' with { hg: {
headline: {
title: person_teaser.person_name,
url: 'http://example.com'
},
variant: 'person-teaser__name',
tag: 'h3'
} } %}
<div class="person-teaser__info">
{% if person_teaser.titles is not empty %}
<ul class="person-teaser__titles">
{% for title in person_teaser.titles %}
<li>{{ title }}</li>
{% endfor %}
</ul>
{% endif %}
{% if person_teaser.list is not empty %}
{% include '@headline-group' with { hg: person_teaser.list_headline } %}
<ul class="person-teaser__list">
{% for item in person_teaser.list %}
<li>{{ item }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="person-teaser__contact">
<p><a href="#">email@davidson.edu</a></p>
<p>704-123-4567</p>
<dl class="inline-terms">
<dt>Office</dt>
<dd>Wall 327</dd>
<dt>Research Lab</dt>
<dd>Wall 325/325A</dd>
</dl>
</div>
</div>
{% if person_teaser.image %}
<div class="person-teaser__image">
{% include '@image' with { image: person_teaser.image } %}
</div>
{% endif %}
</div>
{% endif %}
{
"person_teaser": {
"person_name": "Name McNameface",
"titles": [
"Director of Example Departments"
],
"image": null
}
}
.person-teaser {
.headline-group.person-teaser__name {
.headline-group__head {
@include rr-font-compute(xl, tight);
a {
@include link-fancy;
background-image: none;
}
}
}
.person-teaser__content {
margin-bottom: rr-gridbase(4);
a {
@include underline-link;
}
ul.person-teaser__titles {
@include clean;
margin-bottom: rr-gridbase(3);
li {
@include rr-font-compute(l, medium);
line-height: 1.6em;
margin-bottom: rr-gridbase(2);
}
}
.headline-group.person-teaser__list-headline {
.headline-group__head {
@include rr-font-compute(r, tight);
font-weight: bold;
}
}
}
ul.person-teaser__list {
li {
line-height: rr-gridbase(2);
margin-bottom: rr-gridbase(1);
}
}
@include rr-break-directive(m) {
display: flex;
.person-teaser__content {
flex: 0 1 82%;
display: flex;
justify-content: space-between;
align-content: flex-start;
flex-flow: row wrap;
.headline-group {
flex: 0 1 100%;
}
.person-teaser__info,
.person-teaser__contact {
flex: 0 1 47%;
}
}
.person-teaser__image {
flex: 0 1 18%;
margin-left: rr-gridbase(4);
margin-bottom: rr-gridbase(4);
}
}
}
There are no notes for this item.