<div class="js-component relative container component-spacer-margin">
    <div class="w-full max-w-screen-md mx-auto ">
        <div class="space-y-6 px-4">
            <div class="relative">
                <div class="absolute -top-4 -left-5 md:-left-7 z-0">
                    <svg class="fill-current w-14 h-9 text-grey-100 transition-colors ease-in-out">
                        <use href="/front-end/sprite.svg#icon-quote"></use>
                    </svg>
                </div>

                <h2 class="relative z-10 text-1xl md:text-4xl text-bravo-900 font-heading font-medium leading-tight whitespace-pre-line ">"It wouldn’t be an overstatement to say that our slow broadband speed was killing our business"</h2>

                <div class="absolute -bottom-5 -right-7 z-0">
                    <svg class="fill-current w-14 h-9 text-grey-100 transition-colors ease-in-out">
                        <use href="/front-end/sprite.svg#icon-quote"></use>
                    </svg>
                </div>
            </div>
            <div class="relative z-10">

                <span class="font-bold text-xl whitespace-pre-line">Paul Ferrito</span>

                <span class="text-base whitespace-pre-line"> - Drain Technology</span>

            </div>
        </div>

    </div>
</div>
<div class="js-component relative container component-spacer-margin">
    <div class="w-full max-w-screen-md mx-auto {{componentModifier}}">
        <div class="space-y-6 px-4">  
            <div class="relative">
                <div class="absolute -top-4 -left-5 md:-left-7 z-0">
                    {% render "@icon", { name: "icon-quote", modifier: 'fill-current w-14 h-9 text-grey-100 transition-colors ease-in-out' } %}
                </div>
                {% if quote %}
                    <h2 class="relative z-10 text-1xl md:text-4xl text-bravo-900 font-heading font-medium leading-tight whitespace-pre-line ">"{{ quote }}"</h2>
                {% endif %}
                <div class="absolute -bottom-5 -right-7 z-0">
                    {% render "@icon", { name: "icon-quote", modifier: 'fill-current w-14 h-9 text-grey-100 transition-colors ease-in-out' } %}
                </div>
            </div>
            <div class="relative z-10">
                {% if heading %}
                    <span class="font-bold text-xl whitespace-pre-line">{{ heading }}</span>
                {% endif %}
                {% if subHeading %}
                    <span class="text-base whitespace-pre-line"> - {{ subHeading }}</span>
                {% endif %}
            </div>
        </div>
        
    </div>
</div>
{
  "siteName": "BIR Pattern Library",
  "quote": "It wouldn’t be an overstatement to say that our slow broadband speed was killing our business",
  "heading": "Paul Ferrito",
  "subHeading": "Drain Technology"
}
  • Handle: @quote-component
  • Preview:
  • Filesystem Path: fractal\components\02-umbraco-repeatable-components\quote-component\quote-component.nunjucks
  • References (1): @icon

No notes defined.