V6 Clearleft Patterns

Event Promo 

<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.