<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;
    
        &::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: 908 Bytes
  • 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.