Style Guide

Video Element 

<div class="video-wrap bg-white">
    <div class="container">
        <div class="title-warp">
            <h2 class="title"> BlueBox Investment Strategy</h2>
            <h1 class="main-title">This is the video</h1>
            <p class="descWrap">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>
        </div>
        <div class="video-wraper">

            <iframe width="100%" src="https://www.youtube.com/embed/IUN664s7N-c" title="video" frameborder="0" allowfullscreen></iframe>

        </div>
    </div>
</div>
 
<div class="video-wrap {{ bgGrey ? 'bg-grey' : 'bg-white' }}">
  <div class="container">
    <div class="title-warp">
      <h2 class="title"> {{subTitle}}</h2>
      <h1 class="main-title">{{mainTitle}}</h1>
      <p class="descWrap">{{desc}}</p>
    </div>
    <div class="video-wraper">

      <iframe width="100%" src="{{videoSrc}}" title="video" frameborder="0" allowfullscreen></iframe>

    </div>
  </div>
</div>
 
{
  "subTitle": "BlueBox Investment Strategy",
  "mainTitle": "This is the video",
  "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.",
  "videoSrc": "https://www.youtube.com/embed/IUN664s7N-c",
  "bgGrey": false
}
  • Content: 
    .video-wrap {
  padding: 100px 0;
  @include media-breakpoint-down(lg) {
    padding: 80px 0;
  }
  .container {
    max-width: 1060px;
    padding: 0 15px;
  }
  .title-warp {
    .title {
      font-size: 17px;
      font-family: "OpenSans_light";
      line-height: 23px;
      color: #120f29;
    }
    .main-title {
      font-size: 60px;
      font-family: "PlayfairDisplay-Bold";
      color: #120f29;
      margin-bottom: 0;
      @include media-breakpoint-down(lg) {
        font-size: 40px;
      }
    }
    .descWrap {
      max-width: 665px;
      padding-top: 40px;
      line-height: 29px;
      margin-bottom: 0;
      @include media-breakpoint-down(lg) {
        padding-top: 25px;
      }
    }
  }
  .video-wraper {
    margin-top: 65px;
    @include media-breakpoint-down(lg) {
      margin-top: 40px;
    }
    @include media-breakpoint-down(md) {
      margin-left: -30px;
      margin-right: -30px;
    }
    iframe {
      max-width: 100%;
      height: 580px;
      @include media-breakpoint-down(lg) {
        height: 380px;
      }
      @include media-breakpoint-down(md) {
        height: 230px;
      }
    }
  }
}
  • URL: /components/raw/video_element/video_element.scss
  • Filesystem Path: components/03-components/video_element/video_element.scss
  • Size: 1.1 KB
  • Handle: @video_element
  • Preview:
  • Filesystem Path: components/03-components/video_element/video_element.twig

There are no notes for this item.