England Football

Quotation Block 

<section class="quotation-block">
    <div class="quotation-block__inner">
        <q class="quotation-block--quote"><span class="text">It&#x27;s impossible to please everybody all of the time, but you just have to believe that you&#x27;re making decisions for the right reasons</span></q>
        <p class="quotation-block--source">Gareth Southgate // England Manager</p>
    </div>
</section>

No notes defined.

{
  "quote": "It&#x27;s impossible to please everybody all of the time, but you just have to believe that you&#x27;re making decisions for the right reasons",
  "source": "Gareth Southgate // England Manager"
}
  • Content: 
    .quotation-block {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  row-gap: 3.2rem;

  &__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 3.2rem;
  }

  &--source {
    @include text-l;

    color: $color-interface-light;
  }

  &--quote {
    @extend .heading-3;

    color: var(--brand-primary);
    text-align: center;
    display: inline-block;
    align-items: center;

    span.text {
      &::after {
        background: var(--branded-end-qoute-icon) no-repeat center;
        content: '';
        height: 1rem;
        width: 1rem;
        display: inline-block;
        position: relative;
        top: -6px;
        background-size: contain;

        @media screen and (min-width: $mq-medium) {
          top: -9px;
          height: 1.8rem;
          width: 1.5rem;
        }
      }
      &::before {
        background: var(--branded-begin-qoute-icon) no-repeat center;
        content: '';
        height: 1rem;
        width: 1rem;
        display: inline-block;
        position: relative;
        top: -8px;
        background-size: contain;

        @media screen and (min-width: $mq-medium) {
          top: -14px;
          height: 1.8rem;
          width: 1.5rem;
        }
      }
    }
  }

  &.efl-branding {
    padding: 6.8rem 2.8rem;
    background-color: $grey-light;
    .quotation-block {
      &__inner {
        row-gap: 0;
        width: 100%;
        max-width: 88.6rem;
      }

      &--quote {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: $blue;
        font: $efl-p-3;
        &::after {
          content: '';
          display: block;
          border-bottom: 0.2rem solid $red;
          height: auto;
          width: 4.5rem;
          margin: 0.8rem 0;
        }
      }

      &--source {
        font: $efl-p-1;
        color: $color-interface-light;
        text-align: center;
        width: 100%;
      }
    }
  }

  &.section-bg {
    .quotation-block {
      &--quote {
        max-width: 52.7rem;
        color: $white;
        span.text {
          &::before {
            background-image: url('./assets/images/begin-qoute-white.svg');
          }
          &::after {
            background-image: url('./assets/images/end-qoute-white.svg');
          }
        }
      }

      &--source {
        max-width: 52.7rem;
        color: $light-blue;
      }

      &__inner {
        align-items: start;
      }
    }

    background-color: $blue-accent3;
    background-image: url('./assets/images/efl-quotation-block.svg');
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: auto;
    position: relative;
  }

  @media screen and (max-width: $mq-medium) {
    &.section-bg {
      background-image: url('./assets/images/efl-quotation-block-crop.svg');
      background-size: 100% auto;
      padding-bottom: 13.9rem;
    }
  }
}

/* stylelint-disable no-descending-specificity */
[data-brand='mens'],
[data-brand='womens'] {
  .quotation-block:not(.efl-branding) {
    &--quote {
      span.text {
        @media screen and (max-width: $mq-medium) {
          line-height: 46px;
        }
        &::after {
          top: -22px;

          @media screen and (min-width: $mq-medium) {
            top: -40px;
          }
        }
        &::before {
          top: -21px;

          @media screen and (min-width: $mq-medium) {
            top: -38px;
          }
        }
      }
    }
  }
}
[data-brand='englandfootball'] {
  .quotation-block:not(.efl-branding) {
    &--quote {
      span.text {
        font-size: 34px;
        line-height: 40px;

        @media screen and (min-width: $mq-medium) {
          line-height: 50px;
        }
      }
    }
    &--source {
      font-size: 20px;
      line-height: 32px;
      font-family: $text-font-ef;
    }
  }
}
  • URL: /components/raw/quotation-block/quotation-block.scss
  • Filesystem Path: src/library/components/text/quotation-block/quotation-block.scss
  • Size: 3.9 KB 
<section class="quotation-block{{#if modifier}} {{modifier}}{{/if}}{{#if section-bg}} section-bg{{/if}}">
  <div class="quotation-block__inner">
    <q class="quotation-block--quote"><span class="text">{{{quote}}}</span></q>
    {{#if source}}<p class="quotation-block--source">{{source}}</p>{{/if}}
  </div>
</section>