<div class="card staff">
<div class="card-image">
<img src="/img/silhoutte.jpg" class="card-img-top" alt="" />
</div>
<div class="card-body">
<h3 class="staff-name">
<a href="https://es.pn">Jane Doe</a>
</h3>
<div class="staff-title detail">
Job Title Here
</div>
<div class="staff-team detail">
Team Name Here
</div>
<div class="staff-email detail">
<a href="mailto:email123@lehigh.edu">email123@lehigh.edu</a>
</div>
<div class="staff-phone detail">
123-456-6778
</div>
<div class="staff-text detail">
<h4>Ask me about:</h4>
<ul>
<li>Area of Expertise 1</li>
<li>Area of Expertise 2</li>
<li>Area of Expertise 3</li>
</ul>
</div>
</div>
</div>
{% if title is iterable %}
{% set titles = title %}
{% else %}
{% set titles = title is defined ? [title] : [] %}
{% endif %}
{% if phone is iterable %}
{% set phones = phone %}
{% else %}
{% set phones = phone ? [phone] : [] %}
{% endif %}
{% if staff_expertise is iterable %}
{% set staff_expertises = staff_expertise %}
{% else %}
{% set staff_expertises = staff_expertise is defined ? [staff_expertise] : [] %}
{% endif %}
<div class="card staff">
{% block card_img %}
{% if card_img %}
<div class="card-image">
<img src="{{ card_img }}" class="card-img-top" alt="" />
</div>
{% endif %}
{% endblock card_img %}
<div class="card-body">
<h3 class="staff-name">
{% block profile_name %}
{% if name %}
{% if name_link %}
<a href="{{ name_link }}">{{ name }}</a>
{% endif %}
{% endif %}
{% endblock profile_name %}
</h3>
{% for title in titles %}
{% block staff_title %}
{% if title %}
<div class="staff-title detail">
{{ title }}
</div>
{% endif %}
{% endblock staff_title %}
{% endfor %}
{% block staff_team %}
{% if staff_team %}
<div class="staff-team detail">
{{ staff_team }}
</div>
{% endif %}
{% endblock staff_team %}
{% block staff_email %}
{% if staff_email %}
<div class="staff-email detail">
<a href="mailto:{{ staff_email }}">{{ staff_email }}</a>
</div>
{% endif %}
{% endblock staff_email %}
{% for phone in phones %}
{% if phone %}
<div class="staff-phone detail">
{{ phone }}
</div>
{% endif %}
{% endfor %}
{% if staff_expertise %}
<div class="staff-text detail">
<h4>Ask me about:</h4>
<ul>
{% endif %}
{% block staff_expertise %}
{% for staff_expertise in staff_expertises %}
<li>{{ staff_expertise.text }}</li>
{% endfor %}
{% endblock staff_expertise %}
{% if staff_expertise %}
</ul>
</div>
{% endif %}
</div>
</div>
{
"card_img": "/img/silhoutte.jpg",
"name_link": "https://es.pn",
"name": "Jane Doe",
"title": "Job Title Here",
"staff_team": "Team Name Here",
"staff_email": "email123@lehigh.edu",
"phone": "123-456-6778",
"staff_expertise": {
"1": {
"text": "Area of Expertise 1"
},
"2": {
"text": "Area of Expertise 2"
},
"3": {
"text": "Area of Expertise 3"
}
}
}
.card {
&.staff {
width: 100%;
background-color: $white;
background-color: var(--white, $white);
border-left: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 5px;
border-top: 3px solid $accent_color;
border-top: 3px solid var(--accent_color, $accent_color);
padding: $space_one_half;
-webkit-box-shadow: 0 5px 15px $drop_shadow;
-moz-box-shadow: 0 5px 15px $drop_shadow;
box-shadow: 0 5px 15px $drop_shadow;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
.color-scheme-dark & {
-webkit-box-shadow: 0 5px 15px $drop_shadow_darkmode;
-moz-box-shadow: 0 5px 15px $drop_shadow_darkmode;
box-shadow: 0 5px 15px $drop_shadow_darkmode;
color: $base_font;
color: var(--base_font, $base_font);
h3 {
a {
color: var(--hyperlink, $hyperlink);
&:hover,
&:focus {
text-decoration: none;
color: var(--black, $black) !important;
border-bottom: 2px solid var(--accent_color, $accent_color);
}
}
}
}
.card-img-top {
transition: transform .2s;
}
&:hover,
&:focus-within {
-webkit-box-shadow: 0 0 10px $drop_shadow;
-moz-box-shadow: 0 0 10px $drop_shadow;
box-shadow: 0 0 10px $drop_shadow;
.color-scheme-dark & {
-webkit-box-shadow: 0 0 10px $drop_shadow_darkmode;
-moz-box-shadow: 0 0 10px $drop_shadow_darkmode;
box-shadow: 0 0 10px $drop_shadow_darkmode;
}
}
.card-image,
.profile-square {
max-width: unset;
.media {
display: block;
}
img {
width: 300px;
}
}
.card-body {
display: flex;
flex-direction: column;
.staff-name {
color: $body-color;
color: var(--body-color, $body-color);
a {
color: inherit;
text-decoration: underline;
border-bottom: 0;
&:hover,
&:focus {
text-decoration: none;
.color-scheme-dark & {
color: $body-color;
color: var(--body-color, $body-color);
}
.accent-lehigh_brown &,
.accent-blue_k60 & {
.color-scheme-dark & {
color: $white;
color: var(--white, $white);
}
}
}
}
}
}
.detail {
margin: 0 0 $space_one_half 0;
&:last-of-type {
margin: 0;
}
&.staff-text {
margin: $spacer 0;
.color-scheme-dark & {
color: $base_font;
color: var(--base_font, $base_font);
}
a {
color: $hyperlink_breadcrumb;
color: var(--hyperlink_breadcrumb, $hyperlink_breadcrumb);
border-bottom: 2px solid $hyperlink_breadcrumb;
border-bottom: 2px solid var(--hyperlink_breadcrumb, $hyperlink_breadcrumb);
}
.color-scheme-dark & {
a {
color: $hyperlink_breadcrumb;
color: var(--hyperlink_breadcrumb, $hyperlink_breadcrumb);
border-bottom: 2px solid $hyperlink_breadcrumb;
border-bottom: 2px solid var(--hyperlink_breadcrumb, $hyperlink_breadcrumb);
.accent-lehigh_brown &,
.accent-blue_k60 & {
color: $white;
color: var(--white, $white);
border-bottom: 2px solid $white;
border-bottom: 2px solid var(--white, $white);
}
&:hover,
&:focus {
color: $black !important;
color: var(--black, $black) !important;
border-bottom: $accent_color !important;
border-bottom: var(--accent_color, $accent_color) !important;
}
}
}
h4 {
font-size: 1.25rem;
}
ul {
@include reset-list;
li {
margin: 0 0 0 $spacer;
list-style-type: none;
}
}
}
}
}
}
Display card with image.