# Super Quote

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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>

    <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>

`
`

    <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>

    <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="{{ path '/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>

`
`

    /* No context defined. */

`
File:

- 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/quotes/super-quote/_super-quote.scss
- Size: 417 Bytes

- Handle: @super-quote
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/quotes/super-quote/super-quote.html

No notes defined.