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 news3-card-layout-orange position-relative">
<div class="container">
<div class="news-card">
<div class="inner-sec-headings">
<h3 class="h4">Latest News</h3>
<a class="view-all-link" href="#">
Read All News Stories
<i class="fas fa-arrow-right"></i>
</a>
</div>
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
<div class="news-card white-bg">
<div class="news-card-img">
<img width="325px" height="168px" src="../../college-dls/college/images/News_Blog.png" alt="Card Image" loading="lazy" />
</div>
<div class="news-card-content">
<p class="news-date">June 1, 2021</p>
<a class="news-card-link" href="#">Lorem ipsum dolor sit amet, conse ctetur adip elit</a>
<p class="published-status">Published by ASC Team</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
<div class="news-card blue-bg">
<div class="news-card-img">
<img width="325px" height="168px" src="../../college-dls/college/images/News_Blog-1.png" alt="Card Image" loading="lazy" />
</div>
<div class="news-card-content">
<p class="news-date">June 1, 2021</p>
<a class="news-card-link" href="#">Lorem ipsum dolor sit amet, conse ctetur adip elit</a>
<p class="published-status">Published by ASC Team</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
<div class="news-card white-bg">
<div class="news-card-img">
<img width="325px" height="168px" src="../../college-dls/college/images/News_Blog.png" alt="Card Image" loading="lazy" />
</div>
<div class="news-card-content">
<p class="news-date">June 1, 2021</p>
<a class="news-card-link" href="#">Lorem ipsum dolor sit amet, conse ctetur adip elit</a>
<p class="published-status">Published by ASC Team</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
/* components/03-sections/05-content-group/02-news-group/news-group.scss */
/* BEGIN news-group.scss */
.news-card-list .row>div {
margin-bottom: 20px;
}
.inner-sec-headings {
margin-bottom: 38px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
& h4 {
font-size: 1.75rem;
font-weight: 700;
color: $blue;
}
& .right-arrow-icon {
padding-left: 3px;
& svg {
width: 22px;
}
}
}
@mixin news3-margin-bottom {
margin-bottom: 100px;
@include media-breakpoint-down(lg) {
padding-bottom: 0px;
margin-bottom: 45px;
}
}
@mixin news3-card-layout-after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 69%;
z-index: -1;
}
.news3-card-layout-default, .news3-card-layout-blue, .news3-card-layout-orange, .news3-card-layout-grey {
@include news3-margin-bottom;
}
.news3-card-layout-grey::after {
@include news3-card-layout-after;
background-color: $grey;
}
.news3-card-layout-blue::after {
@include news3-card-layout-after;
background-color: $blue;
}
.news3-card-layout-orange::after {
@include news3-card-layout-after;
background-color: $orange-a11y;
}
.news3-card-layout-default::after {
@include news3-card-layout-after;
background-color: $white;
}
.news3-card-layout-default .news-card.white-bg {
background-color: $white-b;
}
.news3-card-layout-blue .news-card.blue-bg {
background-color: $grey;
.news-card-content p {
color: $blue;
}
}
.news3-card-layout-orange .news-card {
.news-card-content {
border-top: 6px solid $grey-b;
}
}
@include media-breakpoint-down(lg) {
.inner-sec-headings h4 {
font-size: 1.25rem;
margin-bottom: 0px !important;
padding-right: 30px;
}
// .inner-sec-headings h4 {
// padding-right: 0px;
// margin-bottom: 10px !important;
// }
body .inner-sec-headings a {
font-size: 1rem !important;
}
.inner-sec-headings {
margin-bottom: 20px;
}
.inner-sec-headings {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start !important;
-ms-flex-align: start !important;
align-items: flex-start !important;
}
}
/* Dark Mode - Component Styles - News */
@include color-mode(dark) {
.inner-sec-headings .h4 {
color: $orange;
}
.view-all-link {
color: $white;
&:hover {
color:$blue;
}
}
.news-card.white-bg .news-card-content p {
color: $blue;
}
.news3-card-layout-default::after {
background-color: #212529;
}
.news3-card-layout-grey::after {
background-color: $grey-c;
}
}
/* Component Styles - News END */
/* END news-group.scss */
<section class="py-5 news3-card-layout-orange position-relative">
<div class="container">
<div class="news-card">
<div class="inner-sec-headings">
<h3 class="h4">Latest News</h3>
<a class="view-all-link" href="#">
Read All News Stories
<i class="fas fa-arrow-right"></i>
</a>
</div>
<div class="row">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
{{render '@news-card'}}
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
{{render '@news-card--blue'}}
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6 col-sm-12">
{{render '@news-card'}}
</div>
</div>
</div>
</div>
</section>