<div>
    <p>
        Sed id exercitation labore pariatur occaecat ea in deserunt et aliqua duis
        sed id labore nisi in dolore culpa ut qui laboris esse magna nostrud dolore
        dolore ullamco deserunt cupidatat duis nostrud eiusmod in aliquip id duis
        reprehenderit sed excepteur cillum mollit in ut excepteur occaecat in duis
        ut aliquip fugiat proident excepteur ex adipisicing elit id dolore cillum
        reprehenderit id aute nisi veniam exercitation.
    </p>
    <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>
    <p>
        Lorem ipsum fugiat ea veniam ullamco proident culpa in non officia voluptate
        ut sed nisi cillum tempor officia aute in non nostrud velit nulla eiusmod
        dolor officia commodo aute voluptate.<br />In consequat dolor id aliqua
        veniam aute ea ea do aliquip quis dolore in enim ex ut enim dolore nulla sed
        incididunt magna nulla adipisicing laboris ullamco enim anim duis proident
        fugiat esse culpa ex esse aliquip sint exercitation id ut dolore aliquip
        elit dolor sint anim sit esse et in quis cillum est nostrud adipisicing
        occaecat velit cupidatat veniam sint culpa irure dolore nisi ut.
    </p>
    <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/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>
</div>
<div>
    <p>
        Sed id exercitation labore pariatur occaecat ea in deserunt et aliqua duis sed id labore nisi in dolore culpa ut qui laboris esse magna nostrud dolore dolore ullamco deserunt cupidatat duis nostrud eiusmod in aliquip id duis reprehenderit sed excepteur cillum mollit in ut excepteur occaecat in duis ut aliquip fugiat proident excepteur ex adipisicing elit id dolore cillum reprehenderit id aute nisi veniam exercitation.
    </p>
    <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>
    <p>
        Lorem ipsum fugiat ea veniam ullamco proident culpa in non officia voluptate ut sed nisi cillum tempor officia aute in non nostrud velit nulla eiusmod dolor officia commodo aute voluptate.<br/>
        In consequat dolor id aliqua veniam aute ea ea do aliquip quis dolore in enim ex ut enim dolore nulla sed incididunt magna nulla adipisicing laboris ullamco enim anim duis proident fugiat esse culpa ex esse aliquip sint exercitation id ut dolore aliquip elit dolor sint anim sit esse et in quis cillum est nostrud adipisicing occaecat velit cupidatat veniam sint culpa irure dolore nisi ut.
    </p>
    <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={context.app.uri("assets/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>
</div>
/* No context defined for this component. */
  • Content:
    long-quote > blockquote,
    %longquote,
    .longquote {
      margin-bottom: $content-spacer-header;
      text-align: center;
    
      > p {
        @extend %heading-font-heavy;
        line-height: $longquote-line-height-small;
        color: $brand-interaction;
        font-size: $longquote-font-size-small;
    
        &:lang(de) {
          &::before {
            content: '„';
          }
    
          &::after {
            content: '“';
          }
        }
    
        &:lang(en) {
          &::before {
            content: '“';
          }
    
          &::after {
            content: '”';
          }
        }
      }
    }
    
    %longquote__zigzag,
    .longquote__zigzag {
      @extend %zigzag;
    
      display: block;
      margin: 0 auto $spacer-base;
      width: 80%;
    }
    
    %longquote__author,
    .longquote__author {
      @extend %author-name;
      display: block;
    }
    
    %longquote__role,
    .longquote__role {
      @extend %author-role;
    }
    
    %longquote__avatar,
    .longquote__avatar {
      margin-bottom: $spacer-xs;
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      %longquote,
      .longquote {
        > p {
          line-height: $longquote-line-height;
          font-size: $longquote-font-size;
        }
      }
    }
    
  • URL: /components/raw/long-quote/_long-quote.scss
  • Filesystem Path: components/02-molecules/article&blog-post-elements/quotes/long-quote/_long-quote.scss
  • Size: 1.1 KB
  • Handle: @long-quote
  • Preview:
  • Filesystem Path: components/02-molecules/article&blog-post-elements/quotes/long-quote/long-quote.html

There are no notes for this item.