<div class="person-brief ">
<span class="person-brief__name">Name McNameface</span>
<span class="person-brief__detail">
Title of Person </span>
<span class="person-brief__detail">
Another Title </span>
<span class="person-brief__detail">
<a href="mailto:email@davidson.edu" class="">email@davidson.edu</a> </span>
<span class="person-brief__detail">
(704) 123-4567 </span>
</div>
{% if person_brief is not empty %}
<div class="person-brief {{ person_brief.variant }}">
<span class="person-brief__name">{{ person_brief.person_name }}</span>
{% for item in person_brief.details %}
<span class="person-brief__detail">
{% include '@optional-link' with { optional_link: item } %}
</span>
{% endfor %}
</div>
{% endif %}
{
"person_brief": {
"person_name": "Name McNameface",
"details": [
"Title of Person",
"Another Title",
{
"title": "email@davidson.edu",
"url": "mailto:email@davidson.edu"
},
"(704) 123-4567"
]
}
}
.person-brief {
margin-bottom: rr-gridbase(3);
a {
@include underline-link;
}
span {
display: block;
margin-bottom: rr-gridbase(1);
@include rr-break-directive(m) {
display: inline;
&:before {
content: '';
display: inline-block;
vertical-align: middle;
width: rem(1px);
height: 1em;
background: color(gray-light);
margin: 0 rr-gridbase(1);
}
&:nth-child(2),
&.person-brief__name {
&:before {
display: none;
}
}
}
}
span.person-brief__name {
font-family: $font-rubik;
font-weight: $rubik-heavier-weight;
@include rr-font-compute(l, medium);
@include rr-break-directive(m) {
margin-right: rr-gridbase(1);
}
}
}
There are no notes for this item.