Long Quote 

<long-quote>
    <blockquote class="longquote" itemscope itemtype="http://schema.org/Person">
        <span class="longquote__zigzag"></span>
        <p>
            Mit INNOQ Schweiz haben wir einen innovativen Partner gefunden, der uns mit seiner kompetenten Beratung und
            professionellen Umsetzung eine wichtige Stütze unseres Geschäfts ist. Die Mitarbeiter zeichnen sich durch hohe
            Flexibilität und Agilität aus. Gepaart mit fundiertem Fachwissen ist es ihnen möglich, auch in hektischen Situationen
            pragmatische und zielführende Lösungen zu finden.
        </p>
        <cite class="longquote__author" itemprop="name">Heribert Innoq</cite>
        <span class="longquote__role" itemprop="jobTitle">Senior Consultant</span>
    </blockquote>
</long-quote>

<long-quote>
    <blockquote class="longquote" itemscope itemtype="http://schema.org/Person">
        <span class="longquote__zigzag"></span>
        <p>
            Mit INNOQ Schweiz haben wir einen innovativen Partner gefunden, der uns mit seiner kompetenten Beratung und professionellen Umsetzung eine wichtige Stütze unseres Geschäfts ist. Die Mitarbeiter zeichnen sich durch hohe Flexibilität und Agilität aus. Gepaart mit fundiertem Fachwissen ist es ihnen möglich, auch in hektischen Situationen pragmatische und zielführende Lösungen zu finden.
        </p>
        <div class="longquote__avatar avatar avatar--sm">
            <img class="avatar__image" itemprop="photo" src="../../assets/example-content/heribert.jpg" alt="Portrait von Heribert Innoq" />
        </div>
        <cite class="longquote__author" itemprop="name">Heribert Innoq</cite>
        <span class="longquote__role" itemprop="jobTitle">Senior Consultant</span>
    </blockquote>
</long-quote>
 
<long-quote>
    <blockquote class="longquote" itemscope itemtype="http://schema.org/Person">
        <span class="longquote__zigzag"></span>
        <p>
            Mit INNOQ Schweiz haben wir einen innovativen Partner gefunden, der uns mit seiner kompetenten Beratung und
            professionellen Umsetzung eine wichtige Stütze unseres Geschäfts ist. Die Mitarbeiter zeichnen sich durch hohe
            Flexibilität und Agilität aus. Gepaart mit fundiertem Fachwissen ist es ihnen möglich, auch in hektischen Situationen
            pragmatische und zielführende Lösungen zu finden.
        </p>
        <cite class="longquote__author" itemprop="name">Heribert Innoq</cite>
        <span class="longquote__role" itemprop="jobTitle">Senior Consultant</span>
    </blockquote>
</long-quote>

<long-quote>
    <blockquote class="longquote" itemscope itemtype="http://schema.org/Person">
        <span class="longquote__zigzag"></span>
        <p>
            Mit INNOQ Schweiz haben wir einen innovativen Partner gefunden, der uns mit seiner kompetenten Beratung und professionellen Umsetzung eine wichtige Stütze unseres Geschäfts ist. Die Mitarbeiter zeichnen sich durch hohe Flexibilität und Agilität aus. Gepaart mit fundiertem Fachwissen ist es ihnen möglich, auch in hektischen Situationen pragmatische und zielführende Lösungen zu finden.
        </p>
        <div class="longquote__avatar avatar avatar--sm">
            <img class="avatar__image" itemprop="photo" src="{{ path '/assets/example-content/heribert.jpg' }}"  alt="Portrait von Heribert Innoq" />
        </div>
        <cite class="longquote__author" itemprop="name">Heribert Innoq</cite>
        <span class="longquote__role" itemprop="jobTitle">Senior Consultant</span>
    </blockquote>
</long-quote>
 
/* No context defined. */
  • Content: 
    long-quote {
  display: block;
}

long-quote > blockquote,
%longquote,
.longquote {
  padding: 2px 0;
  text-align: center;

  > p {
    @extend %heading-font-heavy;

    display: inline;

    padding: $spacer-xxs;

    font-size: $font-size-sm;
    color: $quote-color;

    background-color: $quote-bg-color;
    box-shadow:
      $spacer-xxs 0 0 $brand-primary,
      -$spacer-xxs 0 0 $brand-primary;
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;

    &:lang(de) {
      &::before {
        content: '„';
      }

      &::after {
        content: '“';
      }
    }

    &:lang(en) {
      &::before {
        content: '“';
      }

      &::after {
        content: '”';
      }
    }
  }
}

%longquote__zigzag,
.longquote__zigzag {
  @extend %zigzag;

  width: 25%;
  margin: 0 auto $spacer-base;
}

%longquote__author,
.longquote__author {
  @extend %heading-font-bold;

  display: block;
  margin-top: $spacer-xs;
  font-size: $font-size-base;
  text-transform: uppercase;
}

%longquote__role,
.longquote__role {
  @extend %body-font-italic;

  font-size: $font-size-base;
}

%longquote__avatar,
.longquote__avatar {
  display: block;
  margin-top: $spacer-xs;
}

@media screen and (min-width: $grid-breakpoint-md) {
  %longquote,
  .longquote {
    > p {
      font-size: $font-size-lg;
    }
  }
}
  • URL: /components/raw/long-quote/_long-quote.scss
  • Filesystem Path: components/04-molecules/quotes/long-quote/_long-quote.scss
  • Size: 1.4 KB

No notes defined.