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. Unlike the other group components, each internal card component here is full-width, creating a vertical stack of components. A variation supporting a corresponding image is also available.
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 events-listing-sec">
<div class="container">
<div class="inner-sec-headings">
<h2 class="blue fw-bold h4">Upcoming Events</h2>
<a class="view-all-link" href="#">View All Events<i class="fas fa-arrow-right" aria-hidden="true"></i></a>
</div>
<div class="event-horizontal-image">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12 g-0">
<div class="events-listing-img">
<img class="clip-mask-top-right" src="../../college-dls/college/images/Event-Listing-1.png" alt="Event Listing">
<div class="date-absolute">
<p class="months">APR - MAY</p>
<p class="months-date">29-3</p>
<p class="year">2021</p>
</div>
</div>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-8 col-sm-12">
<div class="events-listing-content">
<a class="event-link-overlay" href="#" aria-label="Event Overlay"> </a>
<h3 class="h5">Lorem ipsum dolor sit amet</h3>
<p>6-8 PM, Location Name, Main Campus</p>
<div class="event-icon-container">
<div class="event-icon">
<i class="fas fa-arrow-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="event-horizontal-image">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12 g-0">
<div class="events-listing-img">
<img class="clip-mask-top-right" src="../../college-dls/college/images/Event-Listing-1.png" alt="Event Listing">
<div class="date-absolute">
<p class="months">APR - MAY</p>
<p class="months-date">29-3</p>
<p class="year">2021</p>
</div>
</div>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-8 col-sm-12">
<div class="events-listing-content">
<a class="event-link-overlay" href="#" aria-label="Event Overlay"> </a>
<h3 class="h5">Lorem ipsum dolor sit amet</h3>
<p>6-8 PM, Location Name, Main Campus</p>
<div class="event-icon-container">
<div class="event-icon">
<i class="fas fa-arrow-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="event-horizontal-image">
<div class="container">
<div class="row align-items-center blue-bg">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12 g-0">
<div class="events-listing-img">
<img class="clip-mask-top-right" src="../../college-dls/college/images/Event-Listing-1.png" alt="Event Listing">
<div class="date-absolute">
<p class="months">APR - MAY</p>
<p class="months-date">29-3</p>
<p class="year">2021</p>
</div>
</div>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-8 col-sm-12">
<div class="events-listing-content">
<a class="event-link-overlay" href="#" aria-label="Event Overlay"> </a>
<h3 class="h5">Lorem ipsum dolor sit amet</h3>
<p>6-8 PM, Location Name, Main Campus</p>
<div class="event-icon-container">
<div class="event-icon">
<i class="fas fa-arrow-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="event-horizontal-image">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-12 g-0">
<div class="events-listing-img">
<img class="clip-mask-top-right" src="../../college-dls/college/images/Event-Listing-1.png" alt="Event Listing">
<div class="date-absolute">
<p class="months">APR - MAY</p>
<p class="months-date">29-3</p>
<p class="year">2021</p>
</div>
</div>
</div>
<div class="col-xxl-8 col-xl-8 col-lg-8 col-md-8 col-sm-12">
<div class="events-listing-content">
<a class="event-link-overlay" href="#" aria-label="Event Overlay"> </a>
<h3 class="h5">Lorem ipsum dolor sit amet</h3>
<p>6-8 PM, Location Name, Main Campus</p>
<div class="event-icon-container">
<div class="event-icon">
<i class="fas fa-arrow-right" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
/* components/03-sections/05-content-group/03-event-list/event-list.scss */
/* BEGIN event-list.scss */
.events-listing-content .h5:hover {
color: $blue;
}
.events-listing-content a:hover {
background:#dbdee350;
}
.events-listing-sec .event-horizontal-image,
.events-listing-sec .event-horizontal {
border: none;
padding-bottom: 0px;
margin-bottom: 0px;
}
.event-horizontal-image .row, .event-horizontal .row {
position: relative;
}
.event-horizontal-image .row>div, .event-horizontal .row>div {
position: initial;
}
.events-listing-sec .event-horizontal .events-listing-content {
padding-left: 0px;
}
.event-horizontal-image .row {
margin-bottom: 30px;
padding-bottom: 30px;
border-bottom: 1px solid $grey;
}
.event-horizontal .row{
border-bottom: 1px solid $grey;
}
.white-card-content-listing {
background-color: $grey;
padding-top: 56px;
padding-bottom: 56px;
}
.events-listing-content {
padding-left: 35px;
padding-right: 35px;
padding-top: 35px;
padding-bottom: 35px;
}
.right-arrow-link.top-right {
position: absolute;
top: 0;
right: 0;
}
.events-listing-img .date-absolute {
position: absolute;
top: 0;
padding: 15px;
background-color: $blue;
width: 30%;
}
.events-listing-img .date-absolute p span {
display: block;
text-align: center;
color: $white;
}
.events-listing-img .date-absolute .months {
font-size: 12px;
font-weight: 300;
text-transform: uppercase;
}
.events-listing-img .date-absolute .year {
font-size: 12px;
font-weight: 300;
}
.events-listing-img .date-absolute .months-date {
font-size: 22px;
line-height: 1.5;
}
.events-listing-img {
position: relative;
}
.events-listing-img .date-absolute p {
margin-bottom: 0px;
color: $white;
text-align: center;
}
.events-listing-content h5 {
margin-bottom: 35px;
font-size: 28px;
color: $orange-a11y;
font-weight: 700;
}
.research-upcoming-events .event-horizontal-image:last-child {
border: none;
}
.event-horizontal .row {
position: relative;
}
.event-horizontal .row>div {
position: initial;
}
.scholarship-text-wrapper .heading-paragraph-design {
max-width: 940px;
margin-bottom: 69px;
}
.scholarship-text-wrapper .heading-paragraph-design h3 {
font-size: 38px;
color: $blue;
font-weight: 700;
}
.scholarship-text-wrapper .heading-paragraph-design h5 {
color: $orange-a11y;
font-size: 28px;
font-weight: 600;
}
.single-title-wrapper h1 {
color: $white;
font-size: 50px;
font-weight: 400;
}
.events-listing-content p {
font-size: 18px;
}
.blue-bg{
.events-listing-content p, .event-text-design p.months, .event-text-design p.year {
color: $white;
}
}
.event-text-design .months {
letter-spacing: 2px;
font-size: 18px;
display: block;
color: $blue;
text-transform: uppercase;
margin-bottom: 0px;
text-align: center;
}
.events-listing-content .right-arrow {
position: absolute;
top: 0;
right: 0;
}
.event-text-design .months-date {
font-size: 50px;
display: block;
line-height: normal;
color: $orange-a11y;
font-weight: 700;
margin-bottom: 0px;
line-height: 1.5;
text-align: center;
}
.event-text-design .year {
font-size: 18px;
display: block;
color: $blue;
text-align: center;
}
.resources-list {
padding-left: 18px;
}
.border-bottom-1px-orange {
border-bottom: 1px solid $orange-b;
}
.resources-list>li {
margin-bottom: 15px;
}
@include media-breakpoint-down(md) {
.events-listing-img>img {
width: 100%;
}
.events-listing-content h5 {
margin-bottom: 15px;
}
.events-listing-content {
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
}
@include media-breakpoint-down(lg) {
.scholarship-text-wrapper {
padding-top: 45px;
padding-bottom: 10px;
}
}
@include media-breakpoint-down(lg) {
.scholarship-text-wrapper {
padding-top: 45px;
padding-bottom: 10px;
}
.scholarship-type-hdr {
margin-bottom: 15px !important;
}
.scholarship-type-designs {
padding-bottom: 45px;
}
}
/* Dark Mode - Component Styles - Events */
@include color-mode(dark) {
.events-listing-content {
h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
color:$orange;
}
}
.event-text-design {
.months, .year {
color:$grey;
}
.months-date {
color:$orange;
}
}
.event-horizontal .row {
border-bottom: 1px solid $grey-c;
}
}
/* Component Styles - Events END */
/* END event-list.scss */
<section class="py-5 events-listing-sec">
<div class="container">
<div class="inner-sec-headings">
<h2 class="blue fw-bold h4">{{ heading }}</h2>
{{#if link}}
<a class="view-all-link" href="#">{{ link }}<i class="fas fa-arrow-right"
aria-hidden="true"></i></a>
{{/if}}
</div>
{{ render '@event-card--horizontal-image' }}
{{ render '@event-card--horizontal-image' }}
{{ render '@event-card--horizontal-image-blue' }}
{{ render '@event-card--horizontal-image' }}
</div>
</section>