England Football

Quotation Block 

<div class="quotation-block">
    <q class="quotation-block--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</q>
    <p class="quotation-block--source">Gareth Southgate // England Manager</p>
</div>

No notes defined.

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

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

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

    &::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;
      }
    }
  }

  &--source {
    @include text-l;

    color: $color-interface-light;
  }
}

[data-brand='mens'],
[data-brand='womens'] {
  .quotation-block {
    &--quote {
      @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 {
    &--quote {
      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: 1.8 KB 
<div class="quotation-block">
  <q class="quotation-block--quote">{{copy}}</q>
  <p class="quotation-block--source">{{source}}</p>
</div>