<div class="js-component relative z-0 container component-spacer-margin">
<div class="w-full max-w-screen-md mx-auto ">
<div class="w-24 h-24 bg-alpha rounded-full flex items-center justify-center ml-auto mr-auto mb-6">
<div class="w-10 h-10">
<svg class="fill-current w-full h-full text-white" aria-hidden="true">
<use href="/front-end/sprite.svg#icon-quote"></use>
</svg>
</div>
</div>
<h2 class="text-lg md:text-4xl text-alpha text-center font-heading font-bold 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-xl mt-4 text-center whitespace-pre-line">Proin venenatis</span>
<span class="block text-base mt-2 text-center whitespace-pre-line">Lorem ipsum dolor</span>
</div>
</div>
<div class="js-component relative z-0 container component-spacer-margin">
<div class="w-full max-w-screen-md mx-auto {{componentModifier}}">
<div class="w-24 h-24 bg-alpha rounded-full flex items-center justify-center ml-auto mr-auto mb-6">
<div class="w-10 h-10">
{% render "@icon", { name: "icon-quote", modifier: "fill-current w-full h-full text-white", ariaHidden: true } %}
</div>
</div>
{% if quote %}
<h2 class="text-lg md:text-4xl text-alpha text-center font-heading font-bold leading-tight whitespace-pre-line">{{ quote }}</h2>
{% endif %}
{% if heading %}
<span class="block font-bold text-xl mt-4 text-center whitespace-pre-line">{{ heading }}</span>
{% endif %}
{% if subHeading %}
<span class="block text-base mt-2 text-center whitespace-pre-line">{{ subHeading }}</span>
{% endif %}
</div>
</div>
{
"siteName": "MentorKit 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"
}
No notes defined.