V6 Clearleft Patterns

Splash Promo 

<div class="Splash-promo">
    <img class="srcset" src="/v6-assets/img/splash300w.jpg" sizes="(min-width: 1220px) 1100px, calc(93.78vw - 25px)" srcset="        /v6-assets/img/splash300w.jpg 300w,
            /v6-assets/img/splash600w.jpg 600w,
            /v6-assets/img/splash1000w.jpg 1000w,
            /v6-assets/img/splash2000w.jpg 2000w,
    " alt="" loading="lazy">

    <div class="Splash-promo__content theme--dark flow">
        <h2 class="Splash-promo__eyebrow eyebrow eyebrow--black">
            Upcoming event
        </h2>

        <header class="flow--2xs">
            <h3 class="h h-4">
                Leading Design
            </h3>
            <h4 class="eyebrow">
                March 2nd – 30th, 2021
            </h4>
        </header>

        <div class="body">
            <p>A month of amazing design leadership activities including a three day conference, weekly talks, masterclasses, mentoring sessions and a host of other events.</p>
        </div>

        <a class="combo-button focus combo-button--green combo-button--large-link" href="#">
            <span class="">Tickets now on sale</span>
            <div>

                <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right  Icon--s">
                    <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                </svg>
            </div>
        </a>
    </div>
</div>
 
<div class="Splash-promo">
  {% if imageList is defined %}
    {% include '@srcset' with {
      imageList: imageList,
      alt: alt
    } %}
  {% endif %}

  <div class="Splash-promo__content theme--dark flow">
    {% if eyebrow is defined and eyebrow %}
      <h2 class="Splash-promo__eyebrow eyebrow eyebrow--black">
        {{ eyebrow }}
      </h2>
    {% endif %}

    <header class="flow--2xs">
      <h3 class="h h-4">
        {{ title }}
      </h3>
      {% if date is defined and date %}
        <h4 class="eyebrow">
          {{ date }}
        </h4>
      {% endif %}
    </header>

    {% if description is defined and description %}
      <div class="body">
        {{ description }}
      </div>
    {% endif %}

    {% if link is defined and link %}
      {% include '@combo-button' with {
        theme: 'green',
        text: linkLabel,
        link: link,
        largeLink: true
      } %}
    {% endif %}
  </div>
</div>
 
{
  "eyebrow": "Upcoming event",
  "title": "Leading Design",
  "date": "March 2nd – 30th, 2021",
  "description": "<p>A month of amazing design leadership activities including a three day conference, weekly talks, masterclasses, mentoring sessions and a host of other events.</p>",
  "link": "#",
  "linkLabel": "Tickets now on sale",
  "imageList": [
    {
      "src": "/v6-assets/img/splash300w.jpg",
      "size": "300w"
    },
    {
      "src": "/v6-assets/img/splash600w.jpg",
      "size": "600w"
    },
    {
      "src": "/v6-assets/img/splash1000w.jpg",
      "size": "1000w"
    },
    {
      "src": "/v6-assets/img/splash2000w.jpg",
      "size": "2000w"
    }
  ]
}
  • Content: 
    .Splash-promo {
  margin-right: var(--negative-gutter);
  margin-left: var(--negative-gutter);

  .srcset {
    max-width: 100vw; /* lil override */
    max-width: 100vw;
    min-height: 220px;
    object-fit: cover;
  }

  &__content {
    padding: var(--space-s-l);
    position: relative;
  }

  @media screen and (min-width: 50rem) {
    position: relative;
    padding-bottom: var(--gutter);
    margin-right: 0;
    margin-left: 0;

    &__content {
      position: absolute;
      max-width: 684px;
      width: 66%;
      right: 0;
      bottom: 0;
      transform: translateY(0rem);
    }

    .srcset {
      max-width: 100%; /* lil override */
      width: 100%;
      min-height: 660px;
      margin-left: 0rem;
    }
  }
}
  • URL: /components/raw/splash-promo/splash-promo.css
  • Filesystem Path: src/templates/components/splash-promo/splash-promo.css
  • Size: 736 Bytes

No notes defined.