Product List 

<div class="product-list">
    <h3>Country name or category</h3>
    <div class="product-list__inner">
        <div class="product-list__product-wrapper">
            <div class="product-list__product">
                <div class="product-list__image">
                    <h4>Dysport®</h4>
                    <div>
                    </div>
                </div>
                <div class="product-list__details-container">
                    <div class="product-list__info-wrapper">
                        <div class="product-list__description">Clostridium Botulinum toxin type A Haemagglutinin complex</div>
                        <div class="product-list__description">Powder for solution for injection</div>
                        <div class="product-list__links ">

                            <a href="#1" class="cta cta--link">
  <span class="cta__label">Watch instructional video
      <svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
      </svg>
  </span>
</a>

                            <a href="#modal-video-12" data-modal-open class="cta cta--link">
        <span class="cta__label">
            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <g fill="none" fill-rule="evenodd">
                <circle fill="#006FEE" fill-rule="nonzero" cx="40" cy="40" r="40"/>
                <path fill="#FFF" d="M33.8761 28L30 30.9955l2.0052 6.7713-.0116 5.5057L30 50.0043 33.8761 53 49 42.719v-4.438z"/>
                </g>
            </svg>
        </span>
    </a>

                            <div id="modal-video-12" class="modal-hider  timeline-pod__popup">
                                <video width="100%" height="100%" controls>
            <source src="#1" type="video/mp4">
        </video>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="product-list__product-wrapper">
            <div class="product-list__product">
                <div class="product-list__image">
                    <h4>Decapeptyl®</h4>
                    <div>
                        <img src="https://picsum.photos/100/80/?random" />
                    </div>
                </div>
                <div class="product-list__details-container">
                    <div class="product-list__info-wrapper">
                        <div class="product-list__description">Triptorelin (I.N.N).</div>
                        <div class="product-list__description">Powder and solvent for prolonged release suspension for injection</div>
                        <div class="product-list__links ">

                            <a href="#3" class="cta cta--link">
  <span class="cta__label">Visit Decapeptyl site
      <svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
      </svg>
  </span>
</a>

                            <a href="#4" class="cta cta--link">
  <span class="cta__label">Go to Min Medecine
      <svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
      </svg>
  </span>
</a>

                            <a href="#4" class="cta cta--link">
  <span class="cta__label">Go to Min Medecine
      <svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
      </svg>
  </span>
</a>

                        </div>
                    </div>
                    <div class="product-list__info-wrapper">
                        <div class="product-list__description">3mg</div>
                        <div class="product-list__links  ie-flex-fix ">

                            <a href="" class="cta cta--link" target="_blank">
        <span class="cta__label">
            Download patient leaflet
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <g fill-rule="evenodd">
                <path d="M9.238 0v8.527L7.04 7.856 5.913 9.363l3.497 5.31h1.669l3.497-5.31-1.128-1.507-2.21.676V0z"/>
                <path d="M18 11.094v7H2v-7H0v8l1 1h18l1-1v-8z"/>
                </g>
            </svg>
        </span>
    </a>

                            <a href="" class="cta cta--link" target="_blank">
        <span class="cta__label">
            Download characteristics
            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <g fill-rule="evenodd">
                <path d="M9.238 0v8.527L7.04 7.856 5.913 9.363l3.497 5.31h1.669l3.497-5.31-1.128-1.507-2.21.676V0z"/>
                <path d="M18 11.094v7H2v-7H0v8l1 1h18l1-1v-8z"/>
                </g>
            </svg>
        </span>
    </a>

                        </div>
                    </div>
                    <div class="product-list__info-wrapper">
                        <div class="product-list__description">11mg</div>
                        <div class="product-list__links  ie-flex-fix ">

                            <a href="#3" class="cta cta--link">
  <span class="cta__label">Visit Decapeptyl site
      <svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
      </svg>
  </span>
</a>

                            <a href="#4" class="cta cta--link">
  <span class="cta__label">Go to Min Medecine
      <svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
      </svg>
  </span>
</a>

                        </div>
                    </div>
                    <div class="product-list__info-wrapper">
                        <div class="product-list__description">22mg</div>
                        <div class="product-list__links  ie-flex-fix ">

                            <a href="#3" class="cta cta--link">
  <span class="cta__label">Visit Decapeptyl site
      <svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
      </svg>
  </span>
</a>

                            <a href="#4" class="cta cta--link">
  <span class="cta__label">Go to Min Medecine
      <svg data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M14.54 7.63l-1.5 1.13.67 2.21H5.18v2h8.53l-.67 2.2 1.5 1.13 5.32-3.5v-1.67l-5.32-3.5z"/>
      </svg>
  </span>
</a>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
  • Content: 
    /* @product-list */
.product-list {
    width: 100%;
    position: relative;
    max-width: 1024px;
    margin: 0 auto;
    padding: 0;

  h3 {
    // @include poly-margin-y--large;
    
    @media screen and (min-width: $medium-screen) {
      @include poly-padding--small;
      @include poly-margin-x--small;
      margin-top: 0;
      margin-bottom: 0;
    }

  }

  &__inner {
    @media screen and (min-width: $medium-screen) {
      @include poly-margin-x;
    }
  }

  &__product-wrapper {
    @include poly-margin-bottom;

    @media screen and (min-width: $medium-screen) {
      @include poly-padding--small;
    }

    background-color: white;
  }

  &__product {
    border-top: 1px solid black;
    

    @media screen and (min-width: $medium-screen) {
      display: flex;
      flex-flow: row nowrap;
      flex: 1;
    }
    
    @include poly-padding-y--small;
  }

  &__image {
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    margin-bottom: 1em;
    

    // @media screen and (max-width: #{$medium-screen - 1 }) {
    //   @include poly-padding-top--small;
    //   grid-column: 1 / span 2;
    // }

    @media screen and (min-width: $medium-screen) {
      width: 200px;
      display: block;
      @include poly-padding-right--small;
      // grid-row: 1 / span 2;
    }
    
    h4 {
      font: 900 14px/26px 'Biryani', sans-serif;
      margin-bottom: 8px;
    }

    div {
      max-height: 120px;
      width: 120px;
      overflow: hidden;

      @media screen and (min-width: $medium-screen) {
        width: 120px;
        height: 120px;
        max-height: 120px;
      }
      
      img {
        max-height: 100%;
      }
    }
  }

  &__details-container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  &__info-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-bottom: 1px solid black;


    &:last-child {
      border-bottom: none;
    }

    @media screen and (min-width: $medium-screen) {
      flex-flow: row nowrap;
      border-bottom: 1px solid black;
      min-height: 90px;

      &:last-child {
        border-bottom: 1px solid black;
      }
    }
  
    @include poly-padding-bottom--small;
    @include poly-margin-bottom--small;

    > div {
      

      @media screen and (max-width: #{$medium-screen - 1 }) {
        @include poly-padding-y--small;
      }

      @media screen and (min-width: $medium-screen) {
        @include poly-padding-x;
      }

      &.product-list__description {
        font-size: 14px;
        letter-spacing: 1px;
        line-height: 20px;
        font-weight: 200;
        flex-basis: 34%;
      }

      &.product-list__links {
        flex-basis: 32%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;

        @media screen and (max-width: #{$medium-screen - 1 }) {
          padding-top: 0;
        }
      }
      
      &:first-child {
        padding-left: 0;

        @media screen and (max-width: #{$medium-screen - 1 }) {
          padding-top: 0;
        }
      }

      &:last-child {
        padding-right: 0;
        text-align: right;

        @media screen and (min-width: $medium-screen) {
          border-left: 1px solid black;
        }

        a {
          padding-right: 0;

          &:last-child {
            padding-bottom: 0;
          }
        }
      }
    }
  }
}
_:-ms-fullscreen, :root .ie-flex-fix {
  flex-basis: 25% !important;
}
  • URL: /components/raw/product-list/_product-list.scss
  • Filesystem Path: src/components/_support-blocks/product-list/_product-list.scss
  • Size: 3.5 KB
  • Content: 
    /* product-list */
import realshadow from 'realshadow-fork';

function realShadow () {
  let windowWidth = $(window).outerWidth()

  if ( windowWidth > 767 ) {  
    realshadow(document.getElementsByClassName('product-list__product-wrapper'), {
      type: 'default',
      color: '150,150,150',
      length: 5,
      opacity: 0.05
    })
  }
}

$(document).ready(function () {
  let $productList = $('.product-list')

  if ($productList.length > 1) {

    $productList.each( function (index) {
      
      if (index > 0) {
        $(this).css('padding-top', '0')
      }
    })
  }

  realShadow ();

})

$(window).resize(function () {
  realShadow ();
})
  • URL: /components/raw/product-list/product-list.js
  • Filesystem Path: src/components/_support-blocks/product-list/product-list.js
  • Size: 658 Bytes