<article class="Event-promo">
<div class="Event-promo__content theme--dark flow--2xs" style=" background-color: #2B2F63; color: #ffffff;">
<header class="Event-promo__header">
<h2 class="Event-promo__status">
Coming soon
</h2>
<img src="/v6-assets/img/leading-design.svg" alt="" />
<h1 class="h h-5">
Event name
</h1>
</header>
<p>
2 – 3 November 2022
</p>
<p>
Barbican Centre, London
</p>
<a href="#" class="Twi Twi--link focus" style="color: #23D8A0;">
<svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right ">
<use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
</svg>
<span>Buy tickets</span></a>
</div>
<figure>
<img src="https://www.fillmurray.com/800/450" alt="" loading="lazy" />
</figure>
</article>
{% set style = '' %}
{% set linkStyle = '' %}
{% if backgroundColour is defined and backgroundColour is not empty %}
{% set style = style ~ ' background-color: ' ~ backgroundColour ~ ';' %}
{% endif %}
{% if textColour is defined and textColour is not empty %}
{% set style = style ~ ' color: ' ~ textColour ~ ';' %}
{% endif %}
{% if accentColour is defined and accentColour is not empty %}
{% set linkStyle = 'color: ' ~ accentColour ~ ';' %}
{% endif %}
<article class="Event-promo">
<div class="Event-promo__content theme--dark flow--2xs" style="{{ style }}">
<header class="Event-promo__header">
{% if status is defined and status is not empty %}
<h2 class="Event-promo__status">
{{ status }}
</h2>
{% endif %}
{% if logo is defined and logo %}
<img src="{{ logo.src }}" alt="{{ logo.alt }}" />
{% endif %}
<h1 class="h h-5">
{{ title }}
</h1>
</header>
<p>
{{ date }}
</p>
<p>
{{ location }}
</p>
{% include '@twi' with {
link: link.url,
text: link.text,
icon: 'arrow-right',
classes: linkStyle ? null : 'text-green',
style: linkStyle
} only %}
</div>
<figure>
{% if image is defined and image.src is defined %}
<img src="{{ image.src }}" alt="{{ image.alt }}" loading="lazy" />
{% endif %}
</figure>
</article>
{
"title": "Event name",
"status": "Coming soon",
"link": {
"text": "Buy tickets",
"url": "#"
},
"date": "2 – 3 November 2022",
"location": "Barbican Centre, London",
"image": {
"src": "https://www.fillmurray.com/800/450",
"alt": ""
},
"logo": {
"src": "/v6-assets/img/leading-design.svg",
"alt": ""
},
"backgroundColour": "#2B2F63",
"textColour": "#ffffff",
"accentColour": "#23D8A0"
}
.Event-promo {
&__content {
text-align: center;
position: relative;
padding: var(--space-xl-2xl) var(--space-m-l);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
&__header {
margin: 0 0 var(--space-s);
img {
margin: 0 auto var(--space-xs);
}
}
&__status {
position: absolute;
top: var(--space-3xs);
left: 0;
color: var(--white);
background: var(--red);
padding: var(--space-3xs);
font-size: var(--step--1);
}
figure img {
object-fit: cover;
width: 100%;
height: 100%;
aspect-ratio: 16 / 9;
}
}
@media screen and (min-width: 50rem) {
.Event-promo {
display: grid;
grid-template-columns: 1fr 1fr;
figure img {
aspect-ratio: 1 / 1;
}
}
}
No notes defined.