<div class="js-component relative z-0 container component-spacer-margin">
<div class="max-w-[950px] mx-auto border-l-4 border-alpha pl-13">
<div class="w-10 h-10 lg:w-14 lg:h-14 bg-brand-gradient-4 rounded-full flex items-center justify-center mb-6 lg:mb-8">
<div class="w-5 h-5 lg:w-7 lg:h-7">
<svg class="fill-current w-full h-full text-bravo" aria-hidden="true">
<use href="/front-end/sprite.svg?v=1.2#icon-quote"></use>
</svg>
</div>
</div>
<h2 class="text-1xl lg:text-3xl text-bravo text-left font-heading font-extrabold italic leading-tight whitespace-pre-line">Mauris ultricies arcu rhoncus, venenatis nibh non, malesuada nisl. Nam varius finibus lectus at molestie.</h2>
<span class="block font-bold text-lg lg:text-xl mt-6 lg:mt-8 text-left whitespace-pre-line text-grey-700">Proin venenatis</span>
<span class="block text-base text-grey-600 mt-2 text-left whitespace-pre-line">Lorem ipsum dolor</span>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin">
<div class="max-w-[950px] mx-auto {{componentModifier}} border-l-4 border-alpha pl-13">
{% if showIcon %}
<div class="{{ quoteIconContainer }} bg-brand-gradient-4 rounded-full flex items-center justify-center mb-6 lg:mb-8">
<div class="{{ quoteIcon }}">
{% render "@icon", { name: "icon-quote", modifier: "fill-current w-full h-full text-bravo", ariaHidden: true } %}
</div>
</div>
{% endif %}
{% if quote %}
<h2 class="{{ textSize }} text-bravo text-left font-heading font-extrabold italic leading-tight whitespace-pre-line">{{ quote }}</h2>
{% endif %}
{% if heading %}
<span class="block font-bold text-lg lg:text-xl mt-6 lg:mt-8 text-left whitespace-pre-line text-grey-700">{{ heading }}</span>
{% endif %}
{% if subHeading %}
<span class="block text-base text-grey-600 mt-2 text-left whitespace-pre-line">{{ subHeading }}</span>
{% endif %}
</div>
</div>
{
"siteName": "Gigaclear Pattern Library",
"quote": "Mauris ultricies arcu rhoncus, venenatis nibh non, malesuada nisl. Nam varius finibus lectus at molestie.",
"heading": "Proin venenatis",
"subHeading": "Lorem ipsum dolor",
"textSize": "text-1xl lg:text-3xl",
"quoteIconContainer": "w-10 h-10 lg:w-14 lg:h-14",
"quoteIcon": "w-5 h-5 lg:w-7 lg:h-7",
"showIcon": true
}
No notes defined.