Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/card-tiles.html#deadline-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 Event Group components.
<div class="event-horizontal">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-12">
<div class="event-text-design">
<p class="months">APR - MAY</p>
<p class="months-date">29-3</p>
<p class="year">2021</p>
</div>
</div>
<div class="col-xl-9 col-lg-9 col-md-9 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>
/* components/02-components/01-card/02-event-card/event-card.scss */
/* BEGIN event-card.scss */
.deadline-card {
--notchSize: 3.8rem;
border-top: 6px solid $orange;
height: 100%;
padding: 40px 38px 60px;
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);
p {
margin-bottom: 0px;
font-size: 16px;
}
.card-month {
letter-spacing: 2px;
text-transform: uppercase;
}
.card-date {
font-size: 55px;
font-weight: 400;
line-height: 1.2;
margin-bottom: 3px;
margin-top: 3px;
font-family: "kulturista-web", serif;
color: $orange-a11y;
}
.card-year {
letter-spacing: 2px;
}
.deadline-card-link {
line-height: 1.1;
margin-top: 25px;
margin-bottom: 25px;
display: block;
font-weight: 700;
font-size: 21px;
text-decoration: none;
}
.deadline-card-link:hover, .deadline-card-link:focus {
color: $orange-a11y !important;
background-color: $grey;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
&.blue-bg {
p {
color: $white;
}
.deadline-card-link {
color: $white;
}
}
&.grey-bg {
p {
color: $blue;
}
.deadline-card-link {
color: $blue;
}
}
}
/* Deadline Card Component */
/* --horizontal styles */
.event-horizontal, .event-horizontal-image {
.event-link-overlay {
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 99;
text-decoration: none;
}
.event-link-overlay:hover+.color-orange {
color: #0c2340;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
}
a.event-link-overlay:focus {
background-color: transparent;
}
@include media-breakpoint-down(lg) {
.deadline-card-component-div {
padding-top: 30px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 40px;
}
.card-date {
font-size: 35px;
}
}
.event-icon-container {
display: flex;
justify-content: flex-end;
align-items: flex-end;
position: absolute;
width: 0px;
height: 0px;
font-size: 1.125rem;
top:0;
right:0;
color:white;
border-top: 65px solid #d3430d;
border-left: 70px solid transparent;
}
.event-icon {
padding: 10px 12px 30px 10px;
}
/* END event-card.scss */
<div class="event-horizontal">
<div class="container">
<div class="row align-items-center">
<div class="col-xxl-3 col-xl-3 col-lg-3 col-md-3 col-sm-12">
<div class="event-text-design">
<p class="months">{{ month }}</p>
<p class="months-date">{{ date }}</p>
<p class="year">{{ year }}</p>
</div>
</div>
<div class="col-xl-9 col-lg-9 col-md-9 col-sm-12">
<div class="events-listing-content">
<a class="event-link-overlay" href="#" aria-label="Event Overlay"> </a>
<h3 class="h5">{{ headline }}</h3>
<p>{{ subheading }}</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>