This is a smaller level component and is not designed to be used stand alone.
An example of this component in action, please see the corresponding Faculty Group component.
This component should only be used in Faculty Group, on a marketing landing or home page for displaying a quick list of faculty.
If you need to display more information about a faculty member on a page, please consider the Profile Info or Faculty Bio components.
The name of the person in the profile card is meant to be linked to a more detail page, for faculty, this would be their respective faculty profile page. This feature is optional, and without it, there should be no other interaction within this component except for any anchor tags contained within the card content box (email, phone, anchor tags in the short content field).
This component is supported in our Cascade templates via the Asset Factory: Blocks > Faculty and is used via the faculty listing page template.
This component currently only supports two variants:
A profile card consists of the following elements:
Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/card-tiles.html#profile-card
<div class="profile-card white-bg">
<div class="profile-card-img">
<img src="../../college-dls/college/images/faculty/Nicole-Beebe.jpg" alt="Card Image" loading="lazy">
</div>
<div class="profile-card-content">
<p class="profile-card-name">
Nicole Beebe, Ph.D., CISSP
</p>
<p class="profile-card-title">Professor, Information Systems and Cyber Security</p>
<p><span class="icon"><i class="far fa-mobile" aria-hidden="true"></i></span> <a class="phone-no" href="tel:210-123-4567">210-123-4567</a></p>
<p><span class="icon"><i class="far fa-envelope" aria-hidden="true"></i></span> <a class="mail-info" href="mailto:supercalifragilisticexpialidocious.Supercalifragilisticexpialidocious@utsa.edu">supercalifragilisticexpialidocious.Supercalifragilisticexpialidocious@utsa.edu</a></p>
<p class="profile-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fusce id velit ut tortor pretium viverra suspendisse. Dignissim convallis aenean et tortor at risus. At lectus urna duis convallis convallis tellus. Tellus orci ac auctor augue mauris.</p>
</div>
</div>
/* components/02-components/01-card/05-profile/01-profile-card/profile-card.scss */
/* BEGIN profile-card.scss */
.profile-card {
// clip-path: polygon(100% 0, 100% 18%, 100% 84%, 84% 100%, 0 100%, 0% 60%, 0 0);
// -webkit-clip-path: polygon(100% 0, 100% 18%, 100% 84%, 84% 100%, 0 100%, 0% 60%, 0 0);
--notchSize: 3.8rem;
clip-path: polygon(100% 0,
100% calc(100% - var(--notchSize)),
calc(100% - var(--notchSize)) 100%,
0 100%,
0 0);
-webkit-clip-path: polygon(100% 0,
100% calc(100% - var(--notchSize)),
calc(100% - var(--notchSize)) 100%,
0 100%,
0 0);
height: 100%;
a {
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
.profile-card-img>img {
width: 100%;
min-height: 500px;
-o-object-fit: cover;
object-fit: cover;
}
.profile-card-content {
padding: 17px 35px;
border-top: 6px solid $orange;
p {
margin-bottom: 5px;
}
.profile-card-link {
font-size: 1.3rem;
font-weight: 700;
text-decoration: none;
color: $orange-a11y;
}
.profile-card-name {
font-size: 1.3rem;
font-weight: 700;
color: $blue;
}
.h5 {
font-size: 25px;
margin-bottom: 16px;
}
.profile-card-title {
margin-bottom: 10px;
font-weight: 600;
}
.profile-description {
padding: 10px 0;
}
.icon {
display: inline-block;
font-size: 15px;
width: 15px;
margin-right: 5px;
text-align: center;
}
}
&.blue-bg {
.profile-card-name {
color: $grey-b;
}
.profile-card-link {
color: $white;
}
.profile-card-link>a:hover {
color: $orange-a11y;
}
.profile-card-name>a {
color: $white;
text-decoration: none;
}
.profile-card-name a:hover {
color: $orange-a11y;
}
p {
color: $white;
}
.profile-card-content,
a {
color: $white;
}
p a:hover {
color: $orange-a11y;
}
}
& .profile-card-link {
color: $orange-a11y;
}
& .profile-card-link>a:hover {
color: $blue;
}
& .profile-card-name,
& .profile-card-name>a {
color: $orange-a11y;
text-decoration: none;
}
& .profile-card-name>a:hover {
color: $blue;
background-color: $grey;
}
& .phone-no:hover,
& .mail-info:hover {
color: $blue;
background-color: $grey;
}
& .phone-no,
& .mail-info {
font-size: 16px;
font-weight: 400;
line-height: 1.6;
}
}
@include media-breakpoint-down(md) {
.profile-card {
.profile-details .right-arrow-link {
position: absolute;
top: 0;
right: 0;
}
}
}
/* Dark Mode - Component Styles - Faculty Profiles */
@include color-mode(dark) {
.profile-card.blue-bg .profile-card-content {
p, .mail-info, .phone-no {
color:$white;
}
}
.profile-card.blue-bg .profile-card-content {
.profile-card-name {
color:$grey-b;
}
}
.profile-card.blue-bg .profile-card-content {
a:hover {
color: $blue;
background-color: $grey;
}
}
.profile-card .profile-card-content {
a:hover {
color: $blue;
background-color: $grey;
}
ul li {
color: $blue;
}
}
}
/* Component Styles - Faculty Profiles END */
/* END profile-card.scss */
<div class="profile-card white-bg">
<div class="profile-card-img">
<img src="{{path image}}" alt="Card Image" loading="lazy">
</div>
<div class="profile-card-content">
<p class="profile-card-name">
{{#if link }}
<span class="icon"><i class=" fa-solid fa-link" aria-hidden="true"></i></span> <a href="#">{{ name }}</a>
{{else}}
{{ name }}
{{/if}}
</p>
<p class="profile-card-title">{{ title }}</p>
<p><span class="icon"><i class="far fa-mobile" aria-hidden="true"></i></span> <a class="phone-no" href="tel:{{ phone }}">{{ phone }}</a></p>
<p><span class="icon"><i class="far fa-envelope" aria-hidden="true"></i></span> <a class="mail-info" href="mailto:{{ email }}">{{ email }}</a></p>
<p class="profile-description">{{ content }}</p>
</div>
</div>