Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/card-tiles.html#news-card-component
This is a smaller level component and is not designed to be used stand alone. TODO: Create a separate preview template for this component to pop into a col-3 or col-4 width size.
To use a component of this type, please see the corresponding News Group components.
Displays at size.
<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>
/* components/02-components/01-card/04-news-card/news-card.scss */
/* BEGIN news-card.scss */
.news-card {
--notchSize: 3.8rem;
height: 100%;
clip-path: polygon(100% 0,
100% calc(100% - var(--notchSize)),
calc(100% - var(--notchSize)) 100%,
0 100%,
0 0);
-webkit-clip-path: polygon(100% 0,
100% calc(100% - var(--notchSize)),
calc(100% - var(--notchSize)) 100%,
0 100%,
0 0);
&.blue-bg {
.news-card-content p {
color: $white;
}
}
.news-card-img>img {
width: 100%;
height: 200px;
max-height: 18rem;
-o-object-fit: cover;
object-fit: cover;
object-position: center top;
}
.news-card-content {
border-top: 6px solid $orange;
padding: 31px 39px;
p {
font-size: .875rem;
}
.news-date {
margin-bottom: 18px;
}
.published-status {
margin-bottom: 5px;
font-weight: 700;
}
.news-card-link {
font-weight: 700;
line-height: 1.2;
display: block;
margin-bottom: 15px;
font-size: 1.25rem;
color: $orange-a11y;
text-decoration: none;
}
}
}
/* News Card Component */
/*End News Card Component */
@include media-breakpoint-down(lg) {
.news-card {
.row>div {
margin-bottom: 15px;
}
.news-card-content {
padding: 15px 20px;
padding-right: 30px;
.h5>a {
font-size: 1.125rem;
line-height: normal;
}
}
}
}
@include media-breakpoint-down(md) {
.news-card {
.news-card-img>img {
height: auto;
}
}
}
/* Dark Mode - News Card Styles */
@include color-mode(dark) {
.news-card.grey-bg .news-card-content {
p, span, ul li {
color:$blue;
}
}
}
/* Dark Mode - News Card END */
/* END news-card.scss */
<div class="news-card white-bg">
<div class="news-card-img">
<img width="325px" height="168px" src="{{path image}}" alt="Card Image" loading="lazy" />
</div>
<div class="news-card-content">
<p class="news-date">{{ pubdate }}</p>
<a class="news-card-link" href="#">{{ headline }}</a>
<p class="published-status">{{ published }}</p>
<p>{{ text }}</p>
</div>
</div>