APA Component Library

Text Image Section 

<section class="relative py-12 px-6 md:py-20 md:pl-9 md:pr-0 lg:pl-12">
    <div class="mx-auto">
        <div class="relative z-10 grid grid-cols-1 gap-y-8 md:items-center md:grid-cols-12 md:gap-x-12">
            <div class="order-2 w-full md:pt-6 md:col-start-1 md:col-end-6 md:order-1 xl:col-start-2">

                <h2 class="!mb-8 text-left h3 ">
                    einfach<br />installiert

                </h2>

                <p class="default text-base  leading-customText">Jede POWER BLOXX Einheit ist ein Schlüsselfertiges System und wird vollständig montiert und betriebsbereit ausgeliefert, was eine zügige Installation und eine Reduzierung der Komplexität ermöglicht.<br />Die Systeme verlangen lediglich nach minimaler Wartung und bieten eine Garantie von bis zu 20 Jahren. </p>

            </div>

            <div class="order-1 w-screen ml-[calc(50%-50vw)] md:order-2 md:w-auto md:ml-0 md:col-start-6 md:col-end-13">

                <div class="relative h-full w-full ">
                    <img class="" src="/image/placeholder.jpg" alt="" />

                </div>

            </div>
        </div>
    </div>
</section>
 
<section class="relative py-12 px-6 md:py-20 md:pl-9 md:pr-0 lg:pl-12">
    <div class="mx-auto">
        <div class="relative z-10 grid grid-cols-1 gap-y-8 md:items-center md:grid-cols-12 md:gap-x-12">
            <div class="order-2 w-full md:pt-6 md:col-start-1 md:col-end-6 md:order-1 xl:col-start-2">
                {% render "@headline" with {
                    headline: 'einfach<br/>installiert',
                    tag: 'h2',
                    size: 'h3',
                    classes: '!mb-8',
                } %}

                {% render "@text" with {
                    text: 'Jede POWER BLOXX Einheit ist ein Schlüsselfertiges System und wird vollständig montiert und betriebsbereit ausgeliefert, was eine zügige Installation und eine Reduzierung der Komplexität ermöglicht.<br/>Die Systeme verlangen lediglich nach minimaler Wartung und bieten eine Garantie von bis zu 20 Jahren.',
                } %}

            </div>

            <div class="order-1 w-screen ml-[calc(50%-50vw)] md:order-2 md:w-auto md:ml-0 md:col-start-6 md:col-end-13">
                {% include '@image' with {
                    src: '/image/placeholder.jpg',
                } %}
            </div>
        </div>
    </div>
</section>
 
/* No context defined. */

No notes defined.