APA Component Library

Highlight Section: Variants 

<section class="relative py-12 px-6 bg-primary md:py-20 md:pl-9 md:pr-0 lg:py-28 lg:pl-12 mb-8">
    <div class="mx-auto">
        <div class="relative">

            <h2 class="text-stroke text-inverted !mb-4 lg:!mb-0 text-center h1 ">
                Ausgezeichnet

            </h2>

            <h2 class="text-white text-center h1 ">
                Zertifiziert

            </h2>

            <p class="default text-base font-bold text-white text-center mb-10 xl:text-2xl leading-customText">Wir sind nach DIN ISO 9001:2015 zertifiziert.<br />Zertifikat Nr.: FS 529376/1222D </p>

            <div class="flex flex-col items-center text-white">

                <span class="inline-flex items-center w-10 h-10    mb-4 ">
                    <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 29 46">
                        <defs>
                            <clipPath id="b">
                                <rect width="29" height="46" style="fill:none;" />
                            </clipPath>
                        </defs>
                        <g style="clip-path:url(#b); fill:none;">
                            <g id="c">
                                <circle id="d" cx="14" cy="15" r="13" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                <path id="e" d="m7.19,26.78l-2.29,17.21,9.44-5.67,9.44,5.67-2.29-17.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                            </g>
                        </g>
                    </svg>
                </span>

                <p class="default text-base font-bold text-sm text-white text-center leading-customText">Zertifikat DIN ISO 9001:2015 </p>

                <a class="btn cursor-pointer inline-flex items-center opacity-50 text-white text-xs !pb-0 flex-row-reverse justify-end py-4 px-6 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">

                    <span class="shrink-0">
                        PDF . 128MB
                    </span>

                </a>
            </div>
        </div>
    </div>
</section>

<section class="relative py-12 px-6 bg-primary md:py-20 md:pl-9 md:pr-0 lg:py-28 lg:pl-12">
    <div class="relative mx-auto z-20">
        <div class="relative">

            <h2 class="text-stroke text-inverted !mb-4 lg:!mb-0 text-center h1 ">
                be a part

            </h2>

            <h2 class="text-white text-center h1 ">
                of us

            </h2>

            <div class="flex flex-col items-center text-white">

                <a class="btn cursor-pointer inline-flex items-center  bg-primary justify-between text-white py-4 px-6 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">

                    <span class="shrink-0">
                        Jetzt bewerben
                    </span>

                </a>
            </div>
        </div>
    </div>

    <div class="absolute top-0 left-0 w-full h-full">

        <div class="relative h-full w-full ">
            <img class="w-full h-full object-cover mix-blend-multiply" src="/image/placeholder.jpg" alt="Alternativer Text" />

        </div>

    </div>
</section>
 
<section class="relative py-12 px-6 bg-primary md:py-20 md:pl-9 md:pr-0 lg:py-28 lg:pl-12 mb-8">
     <div class="mx-auto">
        <div class="relative">
            {% render "@headline" with {
                headline: 'Ausgezeichnet',
                tag: 'h2',
                size: 'h1',
                alignment: "center",
                classes: "text-stroke text-inverted !mb-4 lg:!mb-0"
            } %}

            {% render "@headline" with {
                headline: 'Zertifiziert',
                tag: 'h2',
                size: 'h1',
                alignment: "center",
                classes: "text-white"
            } %}

            {% render "@text" with {
                text: 'Wir sind nach DIN ISO 9001:2015 zertifiziert.<br/>Zertifikat Nr.: FS 529376/1222D',
                classes: 'font-bold text-white text-center mb-10 xl:text-2xl'
            } %}

            <div class="flex flex-col items-center text-white">
                {% render '@icon' with {
                    name: 'badge',
                    size: 'xl',
                    classes: 'mb-4'
                } %}

                {% render "@text" with {
                    text: 'Zertifikat  DIN ISO 9001:2015',
                    classes: 'font-bold text-sm text-white text-center'
                } %}

                {% render '@button' with {
                    label: "PDF . 128MB",
                    style: 'link',
                    classes: 'opacity-50 text-white text-xs !pb-0'
                } %}
            </div>
        </div>
    </div>
</section>

<section class="relative py-12 px-6 bg-primary md:py-20 md:pl-9 md:pr-0 lg:py-28 lg:pl-12">
     <div class="relative mx-auto z-20">
        <div class="relative">
            {% render "@headline" with {
                headline: 'be a part',
                tag: 'h2',
                size: 'h1',
                alignment: "center",
                classes: "text-stroke text-inverted !mb-4 lg:!mb-0"
            } %}

            {% render "@headline" with {
                headline: 'of us',
                tag: 'h2',
                size: 'h1',
                alignment: "center",
                classes: "text-white"
            } %}

            <div class="flex flex-col items-center text-white">
                {% render '@button' with {
                    label: "Jetzt bewerben",
                } %}
            </div>
        </div>
    </div>

    <div class="absolute top-0 left-0 w-full h-full">
        {% render '@image' with {
            classes: 'w-full h-full object-cover mix-blend-multiply'
        } %}
    </div>
</section>
 
/* No context defined. */

No notes defined.