<blockquote class="quote">
<div>
<svg class="icon quote__icon" focusable="false">
<use xlink:href="#icon-quote"></use>
</svg>
</div>
<div>
<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>
</div>
</blockquote>
<blockquote class="quote">
<div>
{{> @icon id="quote" additionalClasses="quote__icon"}}
</div>
<div>
<div class="quote__content">
{{quote}}
</div>
<div class="quote__reference">{{ reference }}</div>
</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",
"themeDark": true,
"theme": "turquoise"
}
.quote {
color: $color-black;
text-align: center;
display: block;
column-gap: size(4);
@include dark-theme {
color: $color-white;
}
@include breakpoint($m) {
display: flex;
}
}
.quote__icon {
fill: $color-turquoise;
width: size(8);
height: size(8);
margin-top: -12px;
@include color-theme {
fill: $arg-theme-color;
}
@include dark-theme {
fill: $color-white;
}
@include breakpoint($m) {
width: size(9);
height: size(9);
}
}
.quote__content {
text-align: left;
font-size: size(3);
line-height: size(4);
margin-bottom: size(4);
}
.quote__reference {
text-align: left;
font-style: normal;
font-size: size(2.5);
line-height: size(4);
}
No notes defined.