The profile info component is designed to display quick information for a faculty member.
For an example of this section-level component in action, please see the Faculty Profile Page
This component would be best used on a faculty profile page, so the user can see information about the faculty member.
The information is best on a faculty profile page, but other components have brief information about the faculty member. Some of the other components to use for quick details are the following:
Please use one of the above if you don’t have enough information for a faculty profile page.
Please make sure to add proper alt text to the profile image that clearly explains who the person is. Also, if linking to a PDF for the CV, make sure the document is accessible.
This component is supported in our Cascade templates via the Asset Factory: Pages > Faculty Profile and can be assigned via the Add Content > Pages menu.
There are currently no variants for this component.
The profile component is composed of the following elements:
Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/card-tiles.html#profile-detail-compnent
<div class="profile-details-component-div white">
<div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">
<h2>John Doe, Ph.D</h2>
<p class="profile-details-title">Associate Professor, Department Name</p>
</div>
<div class="row no-mrg pt-4">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="profile-details-img">
<img class="clip-mask-top-right" src="../../college-dls/college/images/faculty/Glenn-Martinez.jpg" alt="Card Image">
</div>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-8 col-sm-12">
<div class="profile-details-content">
<h3>Contact</h3>
<div class="profile-details-list">
<ul class="list-unstyled">
<li><span class="icon"><i class="fas fa-building" aria-hidden="true"></i></span> Office Location</li>
<li><span class="icon"><i class="far fa-mobile" aria-hidden="true"></i></span> <a href="tel:210-123-4567">210-123-4567</a></li>
<li><span class="icon"><i class="far fa-envelope" aria-hidden="true"></i></span> <a href="mailto:jane.doe@utsa.edu">jane.doe@utsa.edu</a></li>
<li><span class="icon"><i class="far fa-file" aria-hidden="true"></i></span> <a href="#">Download CV (PDF)</a></li>
</ul>
</div>
<h3 class="profile-details-section">Degrees</h3>
<div class="profile-details-list">
<ul>
<li>Ph.D. The University of Texas at San Antonio</li>
<li>M.S. The University of Texas at San Antonio</li>
<li>MBA The University of Texas at San Antonio</li>
<li>BBA The University of Texas at San Antonio</li>
</ul>
</div>
</div>
</div>
<div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">
<div class="profile-details-content">
<h3 class="profile-details-section">About</h3>
<p>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>
<h3 class="profile-details-section">Research Interests</h3>
<div class="profile-details-list">
<ul>
<li>Research Topic</li>
<li>Research Topic</li>
<li>Research Topic</li>
</ul>
</div>
</div>
</div>
</div>
</div>
/* components/02-components/04-profile/03-profile-info/profile-info.scss */
/* BEGIN profile-info.scss */
.profile-details-component-div {
color: $blue;
a {
text-decoration: underline;
&:hover {
color: $orange-a11y;
background-color: #dadde2;
}
}
.profile-details-img {
margin-right:20px;
padding-bottom: 30px;
&>img {
width: 100%;
height: 100%;
}
}
h2 {
color: $blue;
font-weight: 700;
font-size: 38px;
margin-bottom: 5px;
}
h3 {
color: $orange-a11y;
font-weight: 700;
font-size: 28px;
margin-bottom: 5px;
}
.profile-details- {
&content {
padding-left: 20px;
padding-right: 20px;
p {
font-size: 18px;
margin-bottom: 30px;
}
.icon {
display: inline-block;
font-size: 22px;
text-align: center;
width: 25px;
margin-right: 5px;
}
}
&title {
color: $orange-a11y;
font-size: 28px;
font-weight: 600;
}
&list > ul {
margin-bottom: 30px;
font-size: 20px;
font-weight: 600;
}
}
.profile-details-list > ul {
/*
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
*/
&>li {
//width: 50%;
margin-bottom: 7px;
}
}
.profile-details {
position: relative;
}
.profile-details .right-arrow-link {
position: absolute;
bottom: 0;
right: 0;
}
}
@media (max-width: 991px) {
.profile-card-list .row>div {
margin-bottom: 20px;
}
}
@media (max-width: 767px) {
.profile-details .right-arrow-link {
position: absolute;
top: 0;
right: 0;
}
.profile-details-img {
margin-right:0px;
}
}
@include color-mode(dark) {
.profile-details-content{
color: $white;
}
}
/* END profile-info.scss */
<div class="profile-details-component-div white">
<div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">
<h2>{{ name }}</h2>
<p class="profile-details-title">{{ title }}, {{ department }}</p>
</div>
<div class="row no-mrg pt-4">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="profile-details-img">
<img class="clip-mask-top-right" src="{{path image}}" alt="Card Image">
</div>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-8 col-sm-12">
<div class="profile-details-content">
<h3>Contact</h3>
<div class="profile-details-list">
<ul class="list-unstyled">
<li><span class="icon"><i class="fas fa-building" aria-hidden="true"></i></span> {{ office }}</li>
<li><span class="icon"><i class="far fa-mobile" aria-hidden="true"></i></span> <a href="tel:{{ phone }}">{{ phone }}</a></li>
<li><span class="icon"><i class="far fa-envelope" aria-hidden="true"></i></span> <a href="mailto:{{ email }}">{{ email }}</a></li>
<li><span class="icon"><i class="far fa-file" aria-hidden="true"></i></span> <a href="#">{{ cv }}</a></li>
</ul>
</div>
<h3 class="profile-details-section">Degrees</h3>
<div class="profile-details-list">
<ul>
<li>Ph.D. The University of Texas at San Antonio</li>
<li>M.S. The University of Texas at San Antonio</li>
<li>MBA The University of Texas at San Antonio</li>
<li>BBA The University of Texas at San Antonio</li>
</ul>
</div>
</div>
</div>
<div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12">
<div class="profile-details-content">
<h3 class="profile-details-section">About</h3>
<p>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>
<h3 class="profile-details-section">Research Interests</h3>
<div class="profile-details-list">
<ul>
<li>Research Topic</li>
<li>Research Topic</li>
<li>Research Topic</li>
</ul>
</div>
</div>
</div>
</div>
</div>