# Long Quote

Ready

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

`

    <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. */

`
File:

- 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

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

No notes defined.