Style Guide

Contact Element 

<div class="contact_element bg-video">
    <img class="img-fluid" src="/images/contact-element.png" alt="bg-img" data-scroll-zoom>
    <video role="video" src="https://media.istockphoto.com/videos/industrial-abstract-pattern-video-id1050190380" alt="Video" autoplay muted loop="" data-scroll-zoom></video>
    <div class="container">
        <div class="contactText-wrap">
            <h2 class="main-title">Do you need more information?</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            <a class="btn btn-link" href="#">Reach out to us</a>
        </div>
    </div>
</div>
 
<div class="contact_element {{ videoSrc ? 'bg-video' : 'bg-img' }}">
  <img class="img-fluid" src="{{imgSrc}}" alt="bg-img" data-scroll-zoom>
  <video  role="video" src="{{videoSrc}}" alt="Video" autoplay muted   loop="" data-scroll-zoom></video>
  <div class="container">
    <div class="contactText-wrap">
      <h2 class="main-title">{{title}}</h2>
      <p>{{desc}}</p>
      <a class="btn btn-link" href="{{btn_link}}">{{btn_text}}</a>
    </div>
  </div>
</div>
 
{
  "bgImg": false,
  "title": "Do you need more information?",
  "desc": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
  "btn_text": "Reach out to us",
  "btn_link": "#",
  "imgSrc": "/images/contact-element.png",
  "videoSrc": "https://media.istockphoto.com/videos/industrial-abstract-pattern-video-id1050190380"
}
  • Content: 
    .contact_element {
  position: relative;
  overflow: hidden;
  &::after {
    content: "";
    background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  &.bg-img {
    video {
      display: none;
      z-index: 1;
    }
  }
  &.bg-video {
    img {
      display: none;
      z-index: 1;
    }
  }
  img,
  video {
    width: 100%;
    height: 430px;
    object-fit: cover;
    @include media-breakpoint-down(md) {
      height: 580px;
    }
  }
  .container {
    max-width: 1060px;
    padding: 0 15px;
  }

  .contactText-wrap {
    max-width: 640px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    padding-right: 20px;
    z-index: 1;
    .main-title {
      font-size: 45px;
      font-family: "PlayfairDisplay-Bold";
      color: $white;
      line-height: 62px;
      margin-bottom: 30px;
      @include media-breakpoint-down(lg) {
        font-size: 30px;
        line-height: 42px;
      }
      .field__label {
        display: none;
      }
    }
    p {
      color: $white;
      padding-bottom: 35px;
    }
    .btn-link {
      max-width: max-content;
      text-align: left;
      white-space: nowrap;
    }
  }
}
  • URL: /components/raw/contact_element/contact_element.scss
  • Filesystem Path: components/03-components/contact_element/contact_element.scss
  • Size: 1.3 KB
  • Handle: @contact_element
  • Preview:
  • Filesystem Path: components/03-components/contact_element/contact_element.twig

There are no notes for this item.