PDJ Brandbox

event-snippet 

<article class="event-snippet">
    <div class="event-snippet__header">
        <div class="event-header__visual">
            <a href="#" class="event-snippet__image">
                <picture class="visual">
                    <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.webp" type="image/webp">
                    <source media="(max-width: 899px)" data-sizes="auto" data-srcset="/graphics/video-poster-mobile.jpg">
                    <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.webp" type="image/webp">
                    <source media="(min-width: 900px)" data-sizes="auto" data-srcset="/graphics/video-poster.jpg">
                    <img data-sizes="auto" data-src="/graphics/video-poster-mobile.jpg" class="lazyload" alt="">
                </picture>

            </a>
        </div>
    </div>
    <div class="event-snippet__content">
        <h4 class="event-snippet__heading heading"><a href="#" class="link link--default">
                <span class="link__label">This a link</span>
            </a>
        </h4>
        <span class="event-snippet__date">May 24, 2024</span>

        <div class="event-snippet__description">
            This is a description lorem ipsum dolor sit amet
        </div>

        <div class="event-snippet__actions actions actions--start">
            <div class="actions__item">

                <a href="#" target="_blank" class="action action--normal action--on-light" data-modal="event-1">
                    <span class="action__label">Subscribe</span>
                    <span class="action__bg"></span>
                </a>

            </div>
        </div>
    </div>

    <section class="overlay-modal" data-modal="event-1">
        <div class="overlay-modal__overlay">
            <span class="overlay-modal__bg overlay-modal__trigger--close"></span>

            <div class="overlay-modal__inner">
                <span class="overlay-modal__close overlay-modal__trigger--close"><span class="icon-cross">
                        <span class="icon-cross__inner"></span>
                    </span>
                </span>

                <div class="overlay-modal__content">
                    <h3 class="heading heading--4">
                        <span class="form-title"></span>
                    </h3>
                    <br>

                    <form id="form-atccare" class="form-container" novalidate>
                        <div class="overlay-modal__form">
                            <div class="input-field">
                                <div class="input-field__inner">
                                    <input class="input-field__info" type="text" name="firstname" value="" required>
                                    <span class="input-field__placeholder">Name</span>
                                </div>
                            </div>
                            <br>
                            <div class="input-field">
                                <div class="input-field__inner">
                                    <input class="input-field__info" type="text" name="surname" value="" required>
                                    <span class="input-field__placeholder">Surname</span>
                                </div>
                            </div>
                            <br>
                            <div class="input-field">
                                <div class="input-field__inner">
                                    <input class="input-field__info" type="text" name="email" value="" required>
                                    <span class="input-field__placeholder">E-mail address</span>
                                </div>
                            </div>

                            <div class="overlay-modal__note">
                                <div class="checkbox">
                                    <label class="checkbox__inner">
                                        <input class="input-field__info" type="checkbox" name="agree" value="agree" id="agree" required>
                                        <span class="checkbox__spoof">
                                            <span class="checkbox__icon">
                                                <svg class="icon-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12">
                                                    <path fill="currentColor" d="M5.961 12L0 6.039l2.4-2.4L5.961 7.2 13.084 0l2.4 2.477L5.96 12z" />
                                                </svg>

                                            </span>
                                        </span>
                                        <span class="checkbox__label">
                                            <label for="agree"> I agree to the <a href="#" target="_blank">terms of use</a>.</label>
                                        </span>
                                    </label>
                                </div>
                            </div>

                            <div id="error-atccare" class="hidden">
                                This is an error
                            </div>

                            <div class="overlay-modal__action">
                                <button type="submit" href="#" class="action action--normal action--on-light">
                                    <span class="action__label">Subscribe</span>
                                    <span class="action__bg"></span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
</article>
 
<article class="event-snippet">
  <div class="event-snippet__header">
    <div class="event-header__visual">
      <a href="#" class="event-snippet__image">
        {{render '@visual' visual merge=true }}
      </a>
    </div>
  </div>
  <div class="event-snippet__content">
    <h4 class="event-snippet__heading heading">{{render '@link' heading merge=true }}</h4>
    <span class="event-snippet__date">{{ date }}</span>

    <div class="event-snippet__description">
      {{ description }}
    </div>

    <div class="event-snippet__actions actions actions--start">
      <div class="actions__item">
        {{ render '@action' action merge=true }}
      </div>
    </div>
  </div>

    <section class="overlay-modal" data-modal="{{ action.modal }}">
      <div class="overlay-modal__overlay">
          <span class="overlay-modal__bg overlay-modal__trigger--close"></span>

          <div class="overlay-modal__inner">
          <span class="overlay-modal__close overlay-modal__trigger--close">{{> @icon-cross }}</span>

          <div class="overlay-modal__content">
              <h3 class="heading heading--4">
                  <span class="form-title">{{ heading.label }}</span>
              </h3>
              <br>

              <form id="form-atccare" class="form-container" novalidate>
                  <div class="overlay-modal__form">
                      <div class="input-field">
                          <div class="input-field__inner">
                              <input class="input-field__info" type="text" name="firstname" value="" required>
                              <span class="input-field__placeholder">Name</span>
                          </div>
                      </div>
                      <br>
                      <div class="input-field">
                          <div class="input-field__inner">
                              <input class="input-field__info" type="text" name="surname" value="" required>
                              <span class="input-field__placeholder">Surname</span>
                          </div>
                      </div>
                      <br>
                      <div class="input-field">
                          <div class="input-field__inner">
                              <input class="input-field__info" type="text" name="email" value="" required>
                              <span class="input-field__placeholder">E-mail address</span>
                          </div>
                      </div>

                      <div class="overlay-modal__note">
                          <div class="checkbox">
                              <label class="checkbox__inner">
                                  <input class="input-field__info" type="checkbox" name="agree" value="agree" id="agree" required>
                                  <span class="checkbox__spoof">
                                      <span class="checkbox__icon">
                                          {{render '@icon-check' }}
                                      </span>
                                  </span>
                                  <span class="checkbox__label">
                                      <label for="agree"> I agree to the <a href="#" target="_blank">terms of use</a>.</label>
                                  </span>
                              </label>
                          </div>
                      </div>

                      <div id="error-atccare" class="hidden">
                          This is an error
                      </div>

                      <div class="overlay-modal__action">
                          <button type="submit" href="#" class="action action--normal action--on-light">
                              <span class="action__label">{{ action.label }}</span>
                              <span class="action__bg"></span>
                          </button>
                      </div>
                  </div>
              </form>
          </div>
          </div>
      </div>
  </section>
</article>
 
heading: Event name
date: 01/01/1979
description: This is a description lorem ipsum dolor sit amet
action:
  href: '#'
  label: Subscribe
  modal: event-1
  • Content: 
    .event-snippet {
  display: flex;
  flex-flow: column;
  width: 100%;

  &__visual {
    img, a {
      display: block;
      width: 100%;
    }
  }

  &__image {
    position: relative;
    &:before {
      content: '';
      display: block;
      height: 0;
      padding-top: 56.26%;
      width: 100%;
    }
  }

  &__content {
    margin-top: var(--gap--4);
  }

  &__date {
    color: var(--color--neutrals-5);
  }

  &__date,
  &__description {
    font-size: .85714286em;
    width: 85%;
  }

  &__actions {
    margin-top: var(--gap--4);
  }
}
  • URL: /components/raw/event-snippet/event-snippet.scss
  • Filesystem Path: ../src/03_molecules/event-snippet/event-snippet.scss
  • Size: 553 Bytes

No notes defined.