<article class="Event-promo">
    <div class="Event-promo__content theme--dark flow--2xs" style="">
        <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 text-green focus" style="">
            <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right text-green">
                <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": ""
  }
}
  • Content:
    .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;
        }
      }
    }
    
  • URL: /components/raw/event-promo/event-promo.css
  • Filesystem Path: src/templates/components/event-promo/event-promo.css
  • Size: 813 Bytes

No notes defined.