<blockquote class="quote">
    <svg class="icon quote__icon" focusable="false">
        <use xlink:href="#icon-quote"></use>
    </svg>
    <div class="quote__content">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt ducimus quod harum error possimus iure distinctio quos amet excepturi
    </div>
    <div class="quote__reference">Loremus Ipsumus</div>
</blockquote>
<blockquote class="quote">
    {{> @icon id="quote" additionalClasses="quote__icon"}}
    <div class="quote__content">
        {{quote}}
    </div>
    <div class="quote__reference">{{ reference }}</div>
</blockquote>
{
  "quote": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt ducimus quod harum error possimus iure distinctio quos amet excepturi",
  "reference": "Loremus Ipsumus"
}
  • Content:
    .quote {
        color: $color-black;
        text-align: center;
    
        @include dark-theme {
            color: $color-white;
        }
    }
    
    .quote__icon {
        fill: $color-turquoise;
        width: size(8);
        height: size(8);
    
        @include color-theme {
            fill: $arg-theme-color;
        }
    
        @include dark-theme {
            fill: $color-white;
        }
    
        @include breakpoint($m) {
            width: size(15);
            height: size(15);
        }
    }
    
    .quote__content {
        font-size: size(3);
        line-height: size(4);
        margin-bottom: size(4);
    
        @include breakpoint($m) {
            font-size: size(5);
            line-height: size(6);
            margin-bottom: size(4);
        }
    }
    
    .quote__reference {
        font-style: normal;
        font-size: size(2.5);
        line-height: size(3.5);
    }
    
  • URL: /components/raw/quote/quote.scss
  • Filesystem Path: src/components/quote/quote.scss
  • Size: 751 Bytes

No notes defined.