Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/card-tiles.html#content-card
Please ensure all the content is consistent (image, heading, blurb, link), otherwise an Action Group may look unbalanced. Please see the Action Card Component for additional documentation.
All Content Group level components are designed to be full width. Depending on the size of the content and images, you may utilize multiple 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="py-5 content-listing">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-12">
<!--Card Component -->
<div class="content-card-wrapper">
<div class="content-card position-relative white-bg">
<div class="content-card-img">
<img src="../../college-dls/utsa/images/card-image.png" class="clip-mask-top-right" alt="Content Card Image">
</div>
<div class="content-card-content position-relative px-lg-2">
<a href="#" class="content-card-link px-lg-2">Lorem ipsum dolor sit amet, consectetur </a>
<p class="font-14 blue regular px-lg-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<div class="blue-action-btn">
<a href="#" class="action-btn">Call to Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<!-- End card Component -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<!--Card Component -->
<div class="content-card-wrapper">
<div class="content-card position-relative white-bg">
<div class="content-card-img">
<img src="../../college-dls/utsa/images/card-image.png" class="clip-mask-top-right" alt="Content Card Image">
</div>
<div class="content-card-content position-relative px-lg-2">
<a href="#" class="content-card-link px-lg-2">Lorem ipsum dolor sit amet, consectetur </a>
<p class="font-14 blue regular px-lg-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<div class="blue-action-btn">
<a href="#" class="action-btn">Call to Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<!-- End card Component -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<!--Card Component -->
<div class="content-card-wrapper">
<div class="content-card position-relative white-bg">
<div class="content-card-img">
<img src="../../college-dls/utsa/images/card-image.png" class="clip-mask-top-right" alt="Content Card Image">
</div>
<div class="content-card-content position-relative px-lg-2">
<a href="#" class="content-card-link px-lg-2">Lorem ipsum dolor sit amet, consectetur </a>
<p class="font-14 blue regular px-lg-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<div class="blue-action-btn">
<a href="#" class="action-btn">Call to Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<!-- End card Component -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<!--Card Component -->
<div class="content-card-wrapper">
<div class="content-card position-relative white-bg">
<div class="content-card-img">
<img src="../../college-dls/utsa/images/card-image.png" class="clip-mask-top-right" alt="Content Card Image">
</div>
<div class="content-card-content position-relative px-lg-2">
<a href="#" class="content-card-link px-lg-2">Lorem ipsum dolor sit amet, consectetur </a>
<p class="font-14 blue regular px-lg-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<div class="blue-action-btn">
<a href="#" class="action-btn">Call to Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<!-- End card Component -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<!--Card Component -->
<div class="content-card-wrapper">
<div class="content-card position-relative white-bg">
<div class="content-card-img">
<img src="../../college-dls/utsa/images/card-image.png" class="clip-mask-top-right" alt="Content Card Image">
</div>
<div class="content-card-content position-relative px-lg-2">
<a href="#" class="content-card-link px-lg-2">Lorem ipsum dolor sit amet, consectetur </a>
<p class="font-14 blue regular px-lg-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<div class="blue-action-btn">
<a href="#" class="action-btn">Call to Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<!-- End card Component -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<!--Card Component -->
<div class="content-card-wrapper">
<div class="content-card position-relative white-bg">
<div class="content-card-img">
<img src="../../college-dls/utsa/images/card-image.png" class="clip-mask-top-right" alt="Content Card Image">
</div>
<div class="content-card-content position-relative px-lg-2">
<a href="#" class="content-card-link px-lg-2">Lorem ipsum dolor sit amet, consectetur </a>
<p class="font-14 blue regular px-lg-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<div class="blue-action-btn">
<a href="#" class="action-btn">Call to Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<!-- End card Component -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<!--Card Component -->
<div class="content-card-wrapper">
<div class="content-card position-relative white-bg">
<div class="content-card-img">
<img src="../../college-dls/utsa/images/card-image.png" class="clip-mask-top-right" alt="Content Card Image">
</div>
<div class="content-card-content position-relative px-lg-2">
<a href="#" class="content-card-link px-lg-2">Lorem ipsum dolor sit amet, consectetur </a>
<p class="font-14 blue regular px-lg-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<div class="blue-action-btn">
<a href="#" class="action-btn">Call to Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<!-- End card Component -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<!--Card Component -->
<div class="content-card-wrapper">
<div class="content-card position-relative white-bg">
<div class="content-card-img">
<img src="../../college-dls/utsa/images/card-image.png" class="clip-mask-top-right" alt="Content Card Image">
</div>
<div class="content-card-content position-relative px-lg-2">
<a href="#" class="content-card-link px-lg-2">Lorem ipsum dolor sit amet, consectetur </a>
<p class="font-14 blue regular px-lg-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<div class="blue-action-btn">
<a href="#" class="action-btn">Call to Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<!-- End card Component -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<!--Card Component -->
<div class="content-card-wrapper">
<div class="content-card position-relative white-bg">
<div class="content-card-img">
<img src="../../college-dls/utsa/images/card-image.png" class="clip-mask-top-right" alt="Content Card Image">
</div>
<div class="content-card-content position-relative px-lg-2">
<a href="#" class="content-card-link px-lg-2">Lorem ipsum dolor sit amet, consectetur </a>
<p class="font-14 blue regular px-lg-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<div class="blue-action-btn">
<a href="#" class="action-btn">Call to Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<!-- End card Component -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<!--Card Component -->
<div class="content-card-wrapper">
<div class="content-card position-relative white-bg">
<div class="content-card-img">
<img src="../../college-dls/utsa/images/card-image.png" class="clip-mask-top-right" alt="Content Card Image">
</div>
<div class="content-card-content position-relative px-lg-2">
<a href="#" class="content-card-link px-lg-2">Lorem ipsum dolor sit amet, consectetur </a>
<p class="font-14 blue regular px-lg-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<div class="blue-action-btn">
<a href="#" class="action-btn">Call to Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<!-- End card Component -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<!--Card Component -->
<div class="content-card-wrapper">
<div class="content-card position-relative white-bg">
<div class="content-card-img">
<img src="../../college-dls/utsa/images/card-image.png" class="clip-mask-top-right" alt="Content Card Image">
</div>
<div class="content-card-content position-relative px-lg-2">
<a href="#" class="content-card-link px-lg-2">Lorem ipsum dolor sit amet, consectetur </a>
<p class="font-14 blue regular px-lg-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<div class="blue-action-btn">
<a href="#" class="action-btn">Call to Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<!-- End card Component -->
</div>
<div class="col-lg-3 col-md-4 col-sm-12">
<!--Card Component -->
<div class="content-card-wrapper">
<div class="content-card position-relative white-bg">
<div class="content-card-img">
<img src="../../college-dls/utsa/images/card-image.png" class="clip-mask-top-right" alt="Content Card Image">
</div>
<div class="content-card-content position-relative px-lg-2">
<a href="#" class="content-card-link px-lg-2">Lorem ipsum dolor sit amet, consectetur </a>
<p class="font-14 blue regular px-lg-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vel purus ut arcu tempor mollis vitae sit amet nulla. Morbi quis interdum odio, ut hendrerit</p>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
<div class="blue-action-btn">
<a href="#" class="action-btn">Call to Action <i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
<!-- End card Component -->
</div>
</div>
</div>
</section>
/* components/03-sections/05-content-group/00-action-group/action-group.scss */
/* BEGIN action-group.scss */
.content-listing .row > div {
margin-bottom: 20px;
}
@include media-breakpoint-down(lg) {
.content-listing .row>div {
margin-bottom: 20px;
}
}
// **** IMPORTANT ****
// This component imports multiple instances of action-card component, so all the other styles are coming from 02-components/01-action-card/action-card.scss
/* END action-group.scss */
<section class="py-5 content-listing">
<div class="container">
<div class="row">
{{#each cards as |action|}}
<div class="col-lg-3 col-md-4 col-sm-12">
{{render '@action-card' action merge=true}}
</div>
{{/each}}
</div>
</div>
</section>