<div class="about-product">
    <div class="about-product__copy">
        <h3 class="about-product__label">About Eclipse</h3>
        <div class="about-product__description">
            ECLIPSE is back for a new winter of fun with updated styling to a timeless favorite. We’ve enhanced this classic frame to perform better than ever. The completely redesigned interior foam allows for better breathability, while an updated frame pattern
            carries ECLIPSE into a new year of skiing, snowboarding, snowmobiling and all around mountain fun.
        </div>
        <ul class="about-product__features">
            <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="Photochromic Lens Option" data-modal-description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus tortor non lobortis lobortis. Nulla sollicitudin lectus sit amet purus blandit, eget porta tortor porta.">Photochromic Lens Option</li>
            <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="Polarized Lens Option" data-modal-description="Vivamus in accumsan neque, at fringilla quam. Nam sit amet feugiat massa. Quisque consequat laoreet magna, eget tincidunt est condimentum eu.">Polarized Lens Option</li>
            <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="100% UV Protection" data-modal-description="Sed efficitur odio in mauris molestie pulvinar. Proin ultricies nisi nibh. Duis pharetra nunc eu facilisis luctus. Aenean vitae magna commodo, consequat libero ut, pharetra diam.">100% UV Protection</li>
            <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="Everclear Anti-Fog" data-modal-description="Mauris convallis, elit vel accumsan dictum, diam arcu condimentum justo, a scelerisque enim ipsum vitae dolor. Proin et purus id nisl euismod viverra vel sed quam.">Everclear Anti-Fog</li>
            <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="Permashield Hardcoat" data-modal-description="Vivamus sagittis ultrices mauris ac vulputate. Fusce vehicula congue leo, eu sodales lectus consectetur eget. Pellentesque eget diam ultricies, semper dolor sed, dignissim justo. Nulla vel lacus est. Nulla nec lacus interdum, pharetra massa at, rhoncus metus. Cras condimentum ut sapien non congue.">Permashield Hardcoat</li>
            <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="Dual Lens Construction" data-modal-description="Nullam hendrerit auctor libero, id scelerisque nibh sodales id. Vivamus ut pellentesque velit, sit amet dignissim purus. Nulla et lacus neque. Proin ac vestibulum libero.">Dual Lens Construction</li>
            <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="Dual Strap Adjustment" data-modal-description="Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin convallis vestibulum dui, vitae auctor enim aliquam vel. Maecenas id bibendum risus.">Dual Strap Adjustment</li>
            <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="No Slip Grip" data-modal-description="Nunc lacinia luctus leo eu lobortis. Integer commodo metus ac maximus rutrum. Curabitur dui tellus, auctor ut eleifend semper, accumsan eget leo. Praesent velit urna, iaculis non convallis sed, semper nec erat.">No Slip Grip</li>
            <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="Helmet Compatible" data-modal-description="Nullam sed est tempus, eleifend purus sit amet, vehicula tortor. Maecenas porttitor erat sed nisl cursus vestibulum. Ut nec urna sapien.">Helmet Compatible</li>
            <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="Impact Resistant Frame" data-modal-description="Integer vehicula augue nibh. Aenean blandit vehicula risus sit amet ultrices. Maecenas quis nibh non augue bibendum mattis vel at mauris. Praesent accumsan mi lacus, sed consequat lorem imperdiet sit amet.">Impact Resistant Frame</li>
            <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="High Density Lens Technology" data-modal-description="Maecenas in mollis ipsum. Vivamus quis volutpat leo. Sed vel fringilla lacus. Suspendisse maximus dui eget metus vehicula elementum. Aliquam condimentum, mauris sed convallis interdum, urna purus suscipit dui, vitae hendrerit nulla nisl sed dolor.">High Density Lens Technology</li>
        </ul>
    </div>
    <div class="about-product__media">
        <div class="about-product__video-outer">
            <div class="about-product__video-inner">
                <iframe class="about-product__video" width="640" height="360" src="https://www.youtube.com/embed/Vp7EByFDcPE?showinfo=0&amp;rel=0" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>
<div class="about-product">
  <div class="about-product__copy">
    <h3 class="about-product__label">{{title}}</h3>
    <div class="about-product__description">
      {{{description}}}
    </div>
    <ul class="about-product__features">
      {{#each features}}
      <li class="about-product__feature-item js-modal-open-link" data-modal-id="about-product" data-modal-title="{{label}}" data-modal-description="{{description}}">{{label}}</li>
      {{/each}}
    </ul>
  </div>
  <div class="about-product__media">
    {{#if mediaTitle}}
    <p class="about-product__media-title">{{mediaTitle}}</p>
    {{/if}}
    {{#if video}}
    <div class="about-product__video-outer">
      <div class="about-product__video-inner">
        <iframe class="about-product__video" width="640" height="360" src="{{video}}?showinfo=0&amp;rel=0" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
    {{else if image}}
    <div class="about-product__image-wrapper">
      <img class="about-product__image" src="/assets/images/{{image}}" alt="{{productName}}">
    </div>
    {{/if}}
  </div>
</div>
{
  "pageCss": [
    "products"
  ],
  "modifier": "product-video",
  "title": "About Eclipse",
  "productName": "Eclipse",
  "image": null,
  "mediaTitle": null,
  "description": "ECLIPSE is back for a new winter of fun with updated styling to a timeless favorite. We’ve enhanced this classic frame to perform better than ever. The completely redesigned interior foam allows for better breathability, while an updated frame pattern carries ECLIPSE into a new year of skiing, snowboarding, snowmobiling and all around mountain fun.",
  "features": [
    {
      "label": "Photochromic Lens Option",
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus tortor non lobortis lobortis. Nulla sollicitudin lectus sit amet purus blandit, eget porta tortor porta."
    },
    {
      "label": "Polarized Lens Option",
      "description": "Vivamus in accumsan neque, at fringilla quam. Nam sit amet feugiat massa. Quisque consequat laoreet magna, eget tincidunt est condimentum eu."
    },
    {
      "label": "100% UV Protection",
      "description": "Sed efficitur odio in mauris molestie pulvinar. Proin ultricies nisi nibh. Duis pharetra nunc eu facilisis luctus. Aenean vitae magna commodo, consequat libero ut, pharetra diam."
    },
    {
      "label": "Everclear Anti-Fog",
      "description": "Mauris convallis, elit vel accumsan dictum, diam arcu condimentum justo, a scelerisque enim ipsum vitae dolor. Proin et purus id nisl euismod viverra vel sed quam."
    },
    {
      "label": "Permashield Hardcoat",
      "description": "Vivamus sagittis ultrices mauris ac vulputate. Fusce vehicula congue leo, eu sodales lectus consectetur eget. Pellentesque eget diam ultricies, semper dolor sed, dignissim justo. Nulla vel lacus est. Nulla nec lacus interdum, pharetra massa at, rhoncus metus. Cras condimentum ut sapien non congue."
    },
    {
      "label": "Dual Lens Construction",
      "description": "Nullam hendrerit auctor libero, id scelerisque nibh sodales id. Vivamus ut pellentesque velit, sit amet dignissim purus. Nulla et lacus neque. Proin ac vestibulum libero."
    },
    {
      "label": "Dual Strap Adjustment",
      "description": "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin convallis vestibulum dui, vitae auctor enim aliquam vel. Maecenas id bibendum risus."
    },
    {
      "label": "No Slip Grip",
      "description": "Nunc lacinia luctus leo eu lobortis. Integer commodo metus ac maximus rutrum. Curabitur dui tellus, auctor ut eleifend semper, accumsan eget leo. Praesent velit urna, iaculis non convallis sed, semper nec erat."
    },
    {
      "label": "Helmet Compatible",
      "description": "Nullam sed est tempus, eleifend purus sit amet, vehicula tortor. Maecenas porttitor erat sed nisl cursus vestibulum. Ut nec urna sapien."
    },
    {
      "label": "Impact Resistant Frame",
      "description": "Integer vehicula augue nibh. Aenean blandit vehicula risus sit amet ultrices. Maecenas quis nibh non augue bibendum mattis vel at mauris. Praesent accumsan mi lacus, sed consequat lorem imperdiet sit amet."
    },
    {
      "label": "High Density Lens Technology",
      "description": "Maecenas in mollis ipsum. Vivamus quis volutpat leo. Sed vel fringilla lacus. Suspendisse maximus dui eget metus vehicula elementum. Aliquam condimentum, mauris sed convallis interdum, urna purus suscipit dui, vitae hendrerit nulla nisl sed dolor."
    }
  ],
  "pageModals": [
    {
      "component": "default-modal",
      "context": {
        "id": "about-product",
        "title": "Photochromic Lens Option",
        "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus tortor non lobortis lobortis. Nulla sollicitudin lectus sit amet purus blandit, eget porta tortor porta.",
        "classes": [
          "modal--mobile-overlay",
          "modal--about-product"
        ]
      }
    }
  ],
  "video": "https://www.youtube.com/embed/Vp7EByFDcPE"
}
  • Content:
    .modal.modal--about-product {
      .modal__inner {
        max-width: 680px;
      }
    }
    
    .about-product {
      padding: 15px 10px 30px;
      background: url('../images/#{$about-product-background-filename}');
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-xl) {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        padding: 40px;
      }
    }
    
    .about-product__copy {
      @include breakpoint($breakpoint-xl) {
        width: 45%;
        padding-right: 5px;
      }
    }
    
    .about-product__media {
      @include breakpoint($breakpoint-xl) {
        @include clearfix;
        width: 50%;
      }
    }
    
    .about-product__label {
      margin-top: 5px;
      font-size: 2.4rem;
      font-weight: bold;
      line-height: 2.8rem;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-xl) {
        margin-top: 0;
      }
    }
    
    .about-product__features {
      margin-bottom: 20px;
      padding-left: 13px;
    
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
      }
    }
    
    .about-product__feature-item {
      margin: 5px 0;
      font-weight: bold;
      line-height: 2.0rem;
      cursor: pointer;
    
      @include breakpoint($breakpoint-md) {
        width: 50%;
    
        &:nth-child(odd) {
          width: 48%;
          padding-right: 2%;
        }
      }
    }
    
    .about-product__media-title {
      margin-top: 5px;
      font-size: 1.9rem;
      font-weight: bold;
      line-height: 2.8rem;
      text-align: center;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        font-size: 2.4rem;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-top: 0;
      }
    }
    
    .about-product__image-wrapper {
      max-width: 550px;
      margin: 0 auto;
    
      @include breakpoint($breakpoint-md) {
        width: 100%;
        max-width: 700px;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin: 0;
        float: right;
      }
    }
    
    .about-product__video-outer {
      max-width: 550px;
      margin: 0 auto;
    
      @include breakpoint($breakpoint-md) {
        width: 100%;
        max-width: 700px;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin: 0;
        float: right;
      }
    }
    
    .about-product__video-inner {
      position: relative;
      height: 0;
      padding-bottom: 56.25%;
      overflow: hidden;
    }
    
    .about-product__video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }
    
  • URL: /components/raw/about-product/about-product.scss
  • Filesystem Path: src/components/02-components/about-product/about-product.scss
  • Size: 2.3 KB

There are no notes for this item.