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 iamges, you may utilized 3 or 4 internal card components within a row.
Action Card Image: Our standard image size is 460px (width) by 210px (height), 72 ppi (pixels per inch) jpeg or png.
<section class="grey-bg page-text-wrapper program-listing mt-5">
<!-- Action Cards -->
<div class="container">
<div class="row" id="visit">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="highlight-card white-bg">
<div class="highlight-card-img">
<a href="/visit/tours/">
<img src="../../college-dls/college/images/content-highland-card.png" alt="Card Image" />
</a>
</div>
<div class="highlight-card-content">
<a class="highlight-card-link pb-3" href="https://google.com ">Lorem ipsum dolor sit amet, consectetur</a>
<p>Led by student ambassadors, see what our campus looks like and what UTSA can do for you to enable you to reach your educational goals. Group tours are also available.</p>
<a class="blue-btn" href="https://google.com">Visit Us Today <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="highlight-card white-bg">
<div class="highlight-card-img">
<a href="/visit/tours/">
<img src="../../college-dls/college/images/content-highland-card.png" alt="Card Image" />
</a>
</div>
<div class="highlight-card-content">
<a class="highlight-card-link pb-3" href="https://google.com ">Lorem ipsum dolor sit amet, consectetur</a>
<p>Led by student ambassadors, see what our campus looks like and what UTSA can do for you to enable you to reach your educational goals. Group tours are also available.</p>
<a class="blue-btn" href="https://google.com">Visit Us Today <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
<div class="highlight-card white-bg">
<div class="highlight-card-img">
<a href="/visit/tours/">
<img src="../../college-dls/college/images/content-highland-card.png" alt="Card Image" />
</a>
</div>
<div class="highlight-card-content">
<a class="highlight-card-link pb-3" href="https://google.com ">Lorem ipsum dolor sit amet, consectetur</a>
<p>Led by student ambassadors, see what our campus looks like and what UTSA can do for you to enable you to reach your educational goals. Group tours are also available.</p>
<a class="blue-btn" href="https://google.com">Visit Us Today <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</div>
<!-- End Color Selection Section -->
</section>
/* components/03-sections/05-content-group/01-content-list/content-list.scss */
/* BEGIN content-list.scss */
/* Dark Mode - Component Styles - Content List */
@include color-mode(dark) {
.highlight-card .highlight-card-content p {
color: $blue;
}
}
/* Component Styles - Content List END */
/* Dark Mode - Component Styles - Programs */
@include color-mode(dark) {
.program-listing {
h2, h3, h4, h5, h6 {
color:$blue;
}
}
.highlight-card .highlight-card-content>.blue-btn {
color:$white;
&:hover {
background-color: $grey-b;
}
}
}
/* Component Styles - Programs END */
/* END content-list.scss */
<section class="grey-bg page-text-wrapper program-listing mt-5">
<!-- Action Cards -->
<div class="container">
<div class="row" id="visit">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
{{ render '@content-card--visit' }}
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
{{ render '@content-card--visit' }}
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12">
{{ render '@content-card--visit' }}
</div>
</div>
</div>
<!-- End Color Selection Section -->
</section>