V6 Clearleft Patterns

Past Events Promo 

<div class="Past-events-promo">

    <div class="Past-events-promo__content theme--dark flow">
        <h1 class="h h-4">
            <span class="block">15+ years.</span>
            <span class="block">45,000+ attendees.</span>
            <span class="block">500+ speakers.</span>
            <span class="block">150+ workshops.</span>
        </h1>

    </div>
</div>
 
{% set hasDescriptionLines = description is defined
  and description.lines is defined
%}
{% set hasImage = image is defined and image.src is defined %}
{% set hasLink = link is defined and link.url is defined %}

<div class="Past-events-promo">
  {% if hasImage %}
    <figure class="Past-events-promo__image">
      <img src="{{ image.src }}" alt="{{ image.alt }}" />
    </figure>
  {% endif %}

  <div class="Past-events-promo__content theme--dark flow">
    <h1 class="h h-4">
      {% if hasDescriptionLines %}
        {% for line in description.lines %}
          <span class="block">{{ line }}</span>
        {% endfor %}
      {% else %}
        {{ description.text }}
      {% endif %}
    </h1>

    {% if hasLink %}
      {% include '@twi' with {
        icon: 'arrow-right',
        text: link.text,
        link: link.url,
        classes: 'text-green'
      } %}
    {% endif %}
  </div>
</div>
 
{
  "description": {
    "lines": [
      "15+ years.",
      "45,000+ attendees.",
      "500+ speakers.",
      "150+ workshops."
    ]
  }
}
  • Content: 
    .Past-events-promo {
  &__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-s-l);
    overflow: hidden;
  }

  img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  @media screen and (min-width: 50rem) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
  • URL: /components/raw/past-events-promo/past-events-promo.css
  • Filesystem Path: src/templates/components/past-events-promo/past-events-promo.css
  • Size: 343 Bytes

No notes defined.