Cta Block 

<div class="cta-block">
    <div class="cta-block__wrapper">
        <div class="cta-block__inner">
            <img src="/img/newsletter-icon.png" alt="an image no text" class="cta-block__image margin--right">
            <div class="cta-block__text">
                <h3 class="heading heading--small">Newsletter</h3>
                <p>Keep up to date with all Ipsen news and updates by subscribing to our newsletter</p>
            </div>
            <a href="" class="cta cta--secondary cta--has-shadow ">
            <span class="cta__label">Subscribe
              <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>
  • Content: 
    /* @cta-block */

.cta-block {
  @include poly-padding;

  background-color: $soft-blue;
  
  @include themify($themes) {
    background-color: themed('ctaBlock') !important;
  }

  .heading, p {
    color: white;
  }

  &.white {
    background-color: white !important;
    .heading, p {

      @include themify($themes) {
        color: themed('ctaBlockText') !important;
      }
    } 
  }

  &__wrapper {
    display: flex;
    min-height: 145px;
    &--empty {
      display: none;
    }
  }

  &__inner {
    @include poly-padding--small;

    width: 100%;
    max-width: $container-width;
    display: flex;
    align-items: center;
    margin: 0 auto;

    .cta-block__image {
      width: 50px;

      &.margin--left {
        @include poly-margin-left--large;
      }
    }

    @media screen and (max-width: $medium-screen) {
      flex-direction: column;
      padding-bottom: 20px;
    }
  }

  &__text {
    @include poly-padding-x--large;

    margin-right: auto;
    max-width: 600px;

    @media screen and (max-width: $medium-screen) {
      margin: $base-spacing 0;
      text-align: center;
      padding: 0;
    }
  }

  .cta--left {
    @media screen and (max-width: $medium-screen) {
      @include poly-margin-bottom--large;
    }
  }

  &__btn__wrapper {
    display: block;
    width: 100%;
    text-align: center;
  }
}
  • URL: /components/raw/cta-block/_cta-block.scss
  • Filesystem Path: src/components/_support-blocks/cta-block/_cta-block.scss
  • Size: 1.3 KB
  • Content: 
    $(document).ready(function () {
  if ($('.cta-block .cta.cta-same-width').length) {
    var widest = 0;
    $('.cta-block .cta.cta-same-width').each(function() {
      if ($(this).outerWidth() > widest) {
        widest = $(this).outerWidth();
      }
    });
    $('.cta-block .cta.cta-same-width').each(function() {
      $(this).css('width', widest + 'px');
    });
  }
})
  • URL: /components/raw/cta-block/cta-block.js
  • Filesystem Path: src/components/_support-blocks/cta-block/cta-block.js
  • Size: 375 Bytes