51751ABB-5214-4D7F-AB7F-8A7599AC7751 Created with sketchtool.

Quote

100% 
<!-- Default -->
<blockquote class="c-quote">
    <p class="c-quote__text">Sie wollen ausreisen? Das wollen doch Millionen</p>
    <footer class="c-quote__author">Johann Baumann</footer>
</blockquote>


<!-- No Author -->
<blockquote class="c-quote">
    <p class="c-quote__text">Sie wollen ausreisen? Das wollen doch Millionen</p>
</blockquote>


<!-- Default -->
<blockquote class="c-quote">
    <p class="c-quote__text">{{ text }}</p>
    <footer class="c-quote__author">{{ author }}</footer>
</blockquote>

<!-- No Author -->
<blockquote class="c-quote">
    <p class="c-quote__text">{{ text }}</p>
</blockquote>
 
/* Default */
{
  "text": "Sie wollen ausreisen? Das wollen doch Millionen",
  "author": "Johann Baumann"
}


/* No Author */
{
  "text": "Sie wollen ausreisen? Das wollen doch Millionen",
  "author": "Johann Baumann"
}
  • Content: 
    .c-quote {
    border-right: 2px solid $color-yellow;
    margin: rem-calc($spacing-l / 2);
    padding: rem-calc(15);

    @include breakpoint(large) {
        float: left;
        margin-left: rem-calc(-$grid-row-width / 6);
        max-width: rem-calc(380);
    }

    &__author {
        font-weight: bold;
        margin-top: rem-calc($spacing-l);
        text-align: right;
    }

    &__text,
    p.c-quote__text {
        font-size: $font-size-xxl;
        font-style: italic;
        line-height: $font-size-xxl;
        margin-bottom: 0;

        &::before {
            content: open-quote;
        }

        &::after {
            content: close-quote;
        }
    }
}
  • URL: /components/raw/quote/quote.scss
  • Filesystem Path: src/patterns/20-components/quote/quote.scss
  • Size: 684 Bytes

There are no notes for this item.