<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>
    <super-quote>
        <blockquote class="superquote" itemscope itemtype="http://schema.org/Person">
            <span class="superquote__zigzag"></span>
            <p>
                Wertschöpfung findet statt, wenn unsere Änderung oder das neue Feature
                in unserem Produktionssystem genutzt wird.
            </p>
            <cite class="superquote__author" itemprop="name">Heribert Innoq</cite><span class="superquote__role" itemprop="jobTitle">Senior Consultant</span>
        </blockquote>
    </super-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>
    <super-quote>
        <blockquote class="superquote" itemscope itemtype="http://schema.org/Person">
            <span class="superquote__zigzag"></span>
            <p>
                Wertschöpfung findet statt, wenn unsere Änderung oder das neue Feature
                in unserem Produktionssystem genutzt wird.
            </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="superquote__author" itemprop="name">Heribert Innoq</cite><span class="superquote__role" itemprop="jobTitle">Senior Consultant</span>
        </blockquote>
    </super-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>
    <super-quote>
        <blockquote class="superquote" itemscope itemtype="http://schema.org/Person">
            <span class="superquote__zigzag"></span>
            <p>Wertschöpfung findet statt, wenn unsere Änderung oder das neue Feature in unserem Produktionssystem genutzt wird.</p>
            <cite class="superquote__author" itemprop="name">Heribert Innoq</cite>
            <span class="superquote__role" itemprop="jobTitle">Senior Consultant</span>
        </blockquote>
    </super-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>
    <super-quote>
        <blockquote class="superquote" itemscope itemtype="http://schema.org/Person">
            <span class="superquote__zigzag"></span>
            <p>Wertschöpfung findet statt, wenn unsere Änderung oder das neue Feature in unserem Produktionssystem genutzt wird.</p>
            <div class="longquote__avatar avatar avatar--sm">
                <img class="avatar__image" itemprop="photo" src={context.app.uri("assets/example-content/heribert.jpg")} alt="Portrait von Heribert Innoq" />
            </div>
            <cite class="superquote__author" itemprop="name">Heribert Innoq</cite>
            <span class="superquote__role" itemprop="jobTitle">Senior Consultant</span>
        </blockquote>
    </super-quote>
</div>
/* No context defined. */
  • Content:
    super-quote > blockquote,
    .superquote {
      @extend %longquote;
    
      > p {
        font-size: $font-size-sm;
      }
    }
    
    .superquote__zigzag {
      @extend %longquote__zigzag;
    }
    
    .superquote__author {
      @extend %longquote__author;
    }
    
    .superquote__role {
      @extend %longquote__role;
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .superquote {
        @extend %longquote;
    
        > p {
          font-size: $font-size-xl;
        }
      }
    }
    
  • URL: /components/raw/super-quote/_super-quote.scss
  • Filesystem Path: components/04-molecules/article&blog-post-elements/quotes/super-quote/_super-quote.scss
  • Size: 417 Bytes
  • Handle: @super-quote
  • Preview:
  • Filesystem Path: components/04-molecules/article&blog-post-elements/quotes/super-quote/super-quote.html

No notes defined.