<h2>Upcoming Events</h2>
<div class="upcoming_events-list">
<div class="events-item">
<div class="event-img">
<img src="/img/silhoutte.jpg" alt="silhoutte profile" />
</div><!-- end event_img -->
<div class="events-details">
<h3><a href="#">Event 1</a></h3>
<p class="events-dates">January 28, 2021</p>
<div class="events-description">
Details of the event which can be pretty long. Details of the event which can be pretty long. Details of the event which can be pretty long.
</div><!-- end events-details -->
</div><!-- end events-detail -->
</div><!-- end events-item -->
<div class="events-item">
<div class="event-img">
<img src="" alt="" />
</div><!-- end event_img -->
<div class="events-details">
<h3><a href="#">Event 2</a></h3>
<p class="events-dates">January 10, 2021</p>
<div class="events-description">
Details of the event which can be pretty long. Details of the event which can be pretty long.
</div><!-- end events-details -->
</div><!-- end events-detail -->
</div><!-- end events-item -->
<div class="events-item">
<div class="event-img">
<img src="/img/silhoutte.jpg" alt="silhoutte profile" />
</div><!-- end event_img -->
<div class="events-details">
<h3><a href="#">Event 3</a></h3>
<p class="events-dates">December 23, 2020</p>
<div class="events-description">
Details of the event which can be pretty long, or short.
</div><!-- end events-details -->
</div><!-- end events-detail -->
</div><!-- end events-item -->
</div><!-- end upcoming_events-list -->
{% block upcoming_events_title %}
<h2>{{ title }}</h2>
{% endblock upcoming_events_title %}
<div class="upcoming_events-list">
{% block events_listing %}
{% for events_listing in events_listings %}
<div class="events-item">
<div class="event-img">
{% include "@images--img" with {
img: events_listing.img,
imgAlt: events_listing.imgAlt
} %}
</div><!-- end event_img -->
<div class="events-details">
<h3><a href="{{ events_listing.url }}">{{ events_listing.title }}</a></h3>
<p class="events-dates">{{ events_listing.date }}</p>
<div class="events-description">
{{ events_listing.details }}
</div><!-- end events-details -->
</div><!-- end events-detail -->
</div><!-- end events-item -->
{% endfor %}
{% endblock events_listing %}
</div><!-- end upcoming_events-list -->
{# <div class="upcoming_events-list">
{% block upcoming_events_title %}
<h2>{{ title }}</h2>
{% endblock upcoming_events_title %}
{% block events_listing %}
{% for events_listing in events_listings %}
<div class="events-item">
<div class="event-img">
{% include "@images--img" with {
img: events_listing.img,
imgAlt: events_listing.imgAlt
} %}
</div><!-- end event_img -->
<div class="events-details">
<h3><a href="{{ events_listing.url }}">{{ events_listing.title }}</a></h3>
<p class="events_dates">{{ events_listing.date }}</p>
<div class="events-description">
{{ events_listing.details }}
</div><!-- end events-details -->
</div><!-- end events-detail -->
</div><!-- end events-item -->
{% endfor %}
{% endblock events_listing %}
</div><!-- end upcoming_events-list --> #}
{
"title": "Upcoming Events",
"events_listings": {
"1": {
"title": "Event 1",
"url": "#",
"date": "January 28, 2021",
"details": "Details of the event which can be pretty long. Details of the event which can be pretty long. Details of the event which can be pretty long.",
"img": "/img/silhoutte.jpg",
"imgAlt": "silhoutte profile"
},
"2": {
"title": "Event 2",
"url": "#",
"date": "January 10, 2021",
"details": "Details of the event which can be pretty long. Details of the event which can be pretty long."
},
"3": {
"title": "Event 3",
"url": "#",
"date": "December 23, 2020",
"details": "Details of the event which can be pretty long, or short.",
"img": "/img/silhoutte.jpg",
"imgAlt": "silhoutte profile"
}
}
}
.upcoming_events-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
.form--inline {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-end;
margin: 0 0 $spacer 0;
.form-item {
margin-bottom: 0;
input[type=submit] {
max-height: 50px;
margin: $spacer 0 0 0;
}
}
}
.events-item {
padding: $spacer;
display: flex;
flex-direction: column;
align-items: center;
width: 300px;
background-color: #ffffff;
background-color: var(--white, #ffffff);
border-top: 3px solid #ffda40;
border-top: 3px solid var(--accent_color, #ffda40);
border-right: 1px solid rgba(0, 0, 0, 0.125);
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
border-left: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 5px;
-webkit-box-shadow: 0 5px 15px #F0F0F0;
-moz-box-shadow: 0 5px 15px #F0F0F0;
box-shadow: 0 5px 15px #F0F0F0;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
position: relative;
word-wrap: break-word;
background-clip: border-box;
@include media-breakpoint-up(md) {
margin: $spacer;
}
.preview-img {
max-width: unset;
padding-right: unset;
padding-left: unset;
}
.event-img {
order: 1;
img {
max-width: 200px;
}
}
.events-details {
margin: $spacer 0 0 0;
order: 2;
width: 100%;
h3 {
font-size: 1.5rem;
color: $base_font;
color: var(--base_font, $base_font);
.color-scheme-dark & {
color: $white;
color: var(--white, $white);
}
a {
color: $base_font;
color: var(--base_font, $base_font);
border-bottom: 2px solid $base_font;
border-bottom: 2px solid var(--base_font, $base_font);
.color-scheme-dark & {
color: $white;
color: var(--white, $white);
border-bottom: 2px solid $white;
border-bottom: 2px solid var(--white, $white);
}
&:hover,
&:focus {
border-bottom: unset;
}
}
}
.events-dates {
line-height: 1.5;
font-style: italic;
}
}
}
}
Display upcoming events component for the main content area.