Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/card-tiles.html#content-card
All Content Group level components are designed to be full width. Depending on the size of the content and images, you may utilize 3 or 4 internal card components within a row.
<section class="py-5 our-faculty-sec position-relative z-index-0 half-bg-shape">
<div class="container">
<div class="profile-card-list-compact">
<div class="inner-sec-headings">
<h3 class="h4">Our Profiles</h3>
<a class="view-all-link" href="#">View Accounting Directory <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
<div class="row">
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-12">
<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">
<span class="icon"><i class=" fa-solid fa-link" aria-hidden="true"></i></span> <a href="#">Nicole Beebe, Ph.D., CISSP</a>
</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.</p>
</div>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-12">
<div class="profile-card white-bg">
<div class="profile-card-img">
<img src="../../college-dls/college/images/faculty/Glenn-Martinez.jpg" alt="Card Image" loading="lazy">
</div>
<div class="profile-card-content">
<p class="profile-card-name">
Glenn Martinez, Ph.D.
</p>
<p class="profile-card-title">Dean, College of Liberal and Fine Arts</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>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-12">
<div class="profile-card white-bg">
<div class="profile-card-img">
<img src="../../college-dls/college/images/faculty/Tracy-Cowden.jpg" alt="Card Image" loading="lazy">
</div>
<div class="profile-card-content">
<p class="profile-card-name">
<span class="icon"><i class=" fa-solid fa-link" aria-hidden="true"></i></span> <a href="#">Tracy Cowden, Ph.D.</a>
</p>
<p class="profile-card-title">Roland K. Blumberg Professorship in Music</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>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-12">
<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.</p>
</div>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-12">
<div class="profile-card white-bg">
<div class="profile-card-img">
<img src="../../college-dls/college/images/faculty/Glenn-Martinez.jpg" alt="Card Image" loading="lazy">
</div>
<div class="profile-card-content">
<p class="profile-card-name">
<span class="icon"><i class=" fa-solid fa-link" aria-hidden="true"></i></span> <a href="#">Glenn Martinez, Ph.D.</a>
</p>
<p class="profile-card-title">Dean, College of Liberal and Fine Arts</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>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-12">
<div class="profile-card white-bg">
<div class="profile-card-img">
<img src="../../college-dls/college/images/faculty/Tracy-Cowden.jpg" alt="Card Image" loading="lazy">
</div>
<div class="profile-card-content">
<p class="profile-card-name">
Tracy Cowden, Ph.D.
</p>
<p class="profile-card-title">Roland K. Blumberg Professorship in Music</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>
</div>
</div>
</div>
</div>
</section>
/* components/03-sections/05-content-group/05-profile-group/profile-group.scss */
/* BEGIN profile-group.scss */
@include media-breakpoint-down(lg) {
.profile-card {
.profile-card-list .row>div {
margin-bottom: 20px;
}
}
}
.profile-card-list {
.row>div{
margin-bottom: 38px;
}
}
.profile-card-list-compact {
.row>div{
margin-bottom: 38px;
}
.profile-card .profile-card-img > img {
min-height:250px;
}
.profile-card-content {
padding: 20px;
}
}
/* Dark Mode - Component Styles - Faculty Profiles */
@include color-mode(dark) {
.profile-card .profile-card-content {
p, .profile-card-title, .mail-info, .phone-no {
color:$blue;
}
}
.profile-card-list {
h2, .h2 {
color: $blue;
}
}
.profile-details-component-div {
h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
color:$orange;
}
}
.profile-details-component-div .profile-details-title {
color:$grey;
}
.faculty-contact-list, .faculty-degree-list {
ul li {
color:$white;
}
ul li a {
color:$white;
&:hover{
color:$blue;
}
}
}
}
/* Component Styles - Faculty Profiles END */
/* END profile-group.scss */
<section class="py-5 our-faculty-sec position-relative z-index-0 half-bg-shape">
<div class="container">
<div class="profile-card-list-compact">
<div class="inner-sec-headings">
<h3 class="h4">Our Profiles</h3>
<a class="view-all-link" href="#">View Accounting Directory <i class="fas fa-arrow-right"
aria-hidden="true"></i></a>
</div>
<div class="row">
{{#each profiles as |faculty|}}
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-12">
{{render '@profile-card' faculty merge=true}}
</div>
{{/each}}
</div>
</div>
</div>
</section>