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-3 py-md-5 event-list-sec upcoming-events-sec">
<div class="container">
<div class="deadline-card-list">
<div class="inner-sec-headings">
<h3 class="h4">Upcoming Events</h3>
<a class="view-all-link" href="#">View All Events <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-6 col-sm-12">
<div class="deadline-card grey-bg">
<p class="card-month">APR - MAY</p>
<h2 class="card-date">29-3</h2>
<p class="card-year">2021</p>
<a href="#" class="deadline-card-link">Lorem ipsum dolor sit amet</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel. </p>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-12">
<div class="deadline-card blue-bg">
<p class="card-month">APR - MAY</p>
<h2 class="card-date">29-3</h2>
<p class="card-year">2021</p>
<a href="#" class="deadline-card-link">Lorem ipsum dolor sit amet</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel. </p>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-12">
<div class="deadline-card grey-bg">
<p class="card-month">APR - MAY</p>
<h2 class="card-date">29-3</h2>
<p class="card-year">2021</p>
<a href="#" class="deadline-card-link">Lorem ipsum dolor sit amet</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel. </p>
</div>
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-12">
<div class="deadline-card grey-bg">
<p class="card-month">APR - MAY</p>
<h2 class="card-date">29-3</h2>
<p class="card-year">2021</p>
<a href="#" class="deadline-card-link">Lorem ipsum dolor sit amet</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Susp endisse vel. </p>
</div>
</div>
</div>
</div>
</div>
</section>
/* components/03-sections/05-content-group/04-event-group/event-group.scss */
/* BEGIN event-group.scss */
.deadline-card-list .row>div {
margin-bottom: 20px;
}
// .event-list-sec {
// padding-top: 63px;
// padding-bottom: 111px;
// }
// @include media-breakpoint-down(md) {
// .event-list-sec {
// padding-top: 45px;
// padding-bottom: 45px;
// }
// }
@include media-breakpoint-down(lg) {
.deadline-card-list .row>div {
margin-bottom: 20px;
}
}
/* END event-group.scss */
<section class="py-3 py-md-5 event-list-sec upcoming-events-sec">
<div class="container">
<div class="deadline-card-list">
<div class="inner-sec-headings">
<h3 class="h4">Upcoming Events</h3>
<a class="view-all-link" href="#">View All Events <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-6 col-sm-12">
{{ render '@event-card'}}
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-12">
{{ render '@event-card--blue'}}
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-12">
{{ render '@event-card'}}
</div>
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-12">
{{ render '@event-card'}}
</div>
</div>
</div>
</div>
</section>