@use 'sprucecss/scss/spruce' as *;
.events-block {
padding-block: spacer-clamp('xl', 'xxl');
&__inner {
display: flex;
flex-direction: column;
gap: spacer('l');
}
&__header {
align-items: end;
display: flex;
flex-wrap: wrap;
gap: spacer('m');
justify-content: space-between;
}
&__featured {
background-color: color('surface');
border: config('border-width-base', $display) solid color('border');
border-radius: radius('lg');
display: grid;
overflow: hidden;
@include breakpoint('md') {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}
&__image {
block-size: 100%;
inline-size: 100%;
min-block-size: 16rem;
object-fit: cover;
}
&__details {
align-content: center;
display: grid;
gap: spacer('s');
justify-items: start;
padding: spacer-clamp('m', 'l');
> * {
margin: 0;
}
}
&__title {
font-size: font-size('h3');
}
&__meta {
color: color('muted');
font-weight: 600;
}
&__countdown {
background: none;
border: 0;
padding: 0;
.countdown__timer {
justify-content: flex-start;
}
.countdown__unit {
min-inline-size: 4rem;
padding: spacer('xs');
text-align: center;
}
.countdown__value {
font-size: font-size('h4');
}
}
&__actions {
display: flex;
flex-wrap: wrap;
gap: spacer('xs');
}
&__list {
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
}
<section class="events-block" aria-labelledby="events-title">
<div class="container">
<div class="events-block__inner">
<div class="events-block__header">
<header class="block-heading block-heading--start">
<p class="block-heading__eyebrow">Events</p>
<h2 class="block-heading__title" id="events-title">Meet us in person and online</h2>
</header>
<a class="btn btn--secondary btn--sm" href="#">All events</a>
</div>
<article class="events-block__featured" aria-labelledby="events-featured-title">
<img class="events-block__image" src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?auto=format&fit=crop&w=1000&q=70" alt="" width="1000" height="667" loading="lazy">
<div class="events-block__details">
<span class="badge badge--primary">Conference</span>
<h3 class="events-block__title" id="events-featured-title">Spruce Summit 2026</h3>
<p class="events-block__meta"><time datetime="2026-11-20T09:00">Nov 20</time> · Lisbon & online · 09:00–18:00</p>
<p>A day of talks and workshops about design systems, CSS and accessible interfaces. 400 seats, free livestream.</p>
<div class="countdown events-block__countdown" data-countdown data-countdown-days="47">
<p class="countdown__timer" role="timer" aria-live="off" aria-label="Time until Spruce Summit 2026" data-countdown-timer>
<span class="countdown__unit"><span class="countdown__value" data-unit="days">47</span><span class="countdown__label">Days</span></span>
<span class="countdown__unit"><span class="countdown__value" data-unit="hours">00</span><span class="countdown__label">Hours</span></span>
<span class="countdown__unit"><span class="countdown__value" data-unit="minutes">00</span><span class="countdown__label">Min</span></span>
<span class="countdown__unit"><span class="countdown__value" data-unit="seconds">00</span><span class="countdown__label">Sec</span></span>
</p>
<p class="sr-only" data-countdown-text></p>
</div>
<div class="events-block__actions">
<a class="btn btn--primary" href="#">Get a free ticket</a>
<a class="btn btn--ghost-primary" href="#">Add to calendar</a>
</div>
</div>
</article>
<div class="event-cards events-block__list">
<article class="event-card">
<img class="event-card__image" src="https://images.unsplash.com/photo-1515187029135-18ee286d815b?auto=format&fit=crop&w=640&q=70" alt="" width="640" height="360" loading="lazy">
<div class="event-card__body">
<time class="event-card__date" datetime="2026-10-14T18:00"><span class="event-card__day">14</span><span class="event-card__month">Oct</span></time>
<div class="event-card__content">
<span class="badge badge--primary">Meetup</span>
<h3 class="event-card__title"><a class="event-card__link" href="#">Design Systems Meetup</a></h3>
<p class="event-card__meta">Berlin · 18:00</p>
</div>
</div>
</article>
<article class="event-card">
<img class="event-card__image" src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=640&q=70" alt="" width="640" height="360" loading="lazy">
<div class="event-card__body">
<time class="event-card__date" datetime="2026-10-29T10:00"><span class="event-card__day">29</span><span class="event-card__month">Oct</span></time>
<div class="event-card__content">
<span class="badge badge--primary">Workshop</span>
<h3 class="event-card__title"><a class="event-card__link" href="#">Sass for Component Libraries</a></h3>
<p class="event-card__meta">Online · 10:00 CET</p>
</div>
</div>
</article>
<article class="event-card">
<img class="event-card__image" src="https://images.unsplash.com/photo-1531403009284-440f080d1e12?auto=format&fit=crop&w=640&q=70" alt="" width="640" height="360" loading="lazy">
<div class="event-card__body">
<time class="event-card__date" datetime="2026-11-05T16:00"><span class="event-card__day">05</span><span class="event-card__month">Nov</span></time>
<div class="event-card__content">
<span class="badge badge--primary">Webinar</span>
<h3 class="event-card__title"><a class="event-card__link" href="#">Accessible Forms in Practice</a></h3>
<p class="event-card__meta">Online · 16:00 CET</p>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
