<div class="contact-info ">
<dl class="invisible-labels">
<dt class="contact-info__label contact-info__label--name">Name</dt>
<dd class="contact-info__label contact-info__value--name">Alfred E. Newman</dd>
<dt class="contact-info__label contact-info__label--jobtitle">Job Title</dt>
<dd class="contact-info__label contact-info__value--jobtitle">Associate Professor</dd>
<dt class="contact-info__label contact-info__label--orgunit">College or Department</dt>
<dd class="contact-info__label contact-info__value--orgunit"><a href="http://www.example.com" class="">College of Paper Folding Puzzles</a></dd>
<dt class="contact-info__label contact-info__label--office">Office Number</dt>
<dd class="contact-info__label contact-info__value--office">347 Donner Bldg.</dd>
<dt class="contact-info__label contact-info__label--phone">Phone Number</dt>
<dd class="contact-info__label contact-info__value--phone"><a href="tel:15555551212" class="">555-555-1212</a></dd>
<dt class="contact-info__label contact-info__label--email">Email</dt>
<dd class="contact-info__label contact-info__value--email"><a href="mailto:newman@example.com" class="">newman@example.com</a></dd>
</dl>
</div>
<div class="contact-info {{ contact_info.variant }}">
{% if image is not empty %}
<div class="contact-info__photo">
{% include '@image' %}
</div>
{% endif %}
<dl class="invisible-labels">
{% for field in contact_info.fields %}
<dt class="contact-info__label contact-info__label--{{ field.slug }}">{{ field.label }}</dt>
<dd class="contact-info__label contact-info__value--{{ field.slug }}">{% include '@optional-link' with { optional_link: field.content } only %}</dd>
{% endfor %}
</dl>
</div>
{
"contact_info": {
"fields": [
{
"slug": "name",
"label": "Name",
"content": "Alfred E. Newman"
},
{
"slug": "jobtitle",
"label": "Job Title",
"content": "Associate Professor"
},
{
"slug": "orgunit",
"label": "College or Department",
"content": {
"title": "College of Paper Folding Puzzles",
"url": "http://www.example.com"
}
},
{
"slug": "office",
"label": "Office Number",
"content": "347 Donner Bldg."
},
{
"slug": "phone",
"label": "Phone Number",
"content": {
"title": "555-555-1212",
"url": "tel:15555551212"
}
},
{
"slug": "email",
"label": "Email",
"content": {
"url": "mailto:newman@example.com",
"title": "newman@example.com"
}
}
]
}
}
.contact-info {
&__photo {
width: 66vw;
height: auto;
margin: 0 auto #{rr-grid-remainder(3px, 2)};
@include rr-break-directive('m') {
position: relative;
width: 6.25rem;
margin-right: calc(#{rr-gridbase(-3)} + 6px);
margin-bottom: rr-gridbase(2);
margin-left: rr-gridbase(2);
float: right;
}
@include rr-break-directive('l') {
margin-right: calc(#{rr-gridbase(-6)} + 8px);
margin-bottom: rr-gridbase(2);
margin-left: rr-gridbase(2);
}
}
}
The contact info block is used to provide contact information. It can be built two ways:
Variables: none