APA Component Library

Highlight 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="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">
                <a class="text-white" href="#">

                    <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>

                </a>

                <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="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">
                <a class="text-white" href="#">
                    {% render '@icon' with {
                        name: 'badge',
                        size: 'xl',
                        classes: 'mb-4'
                    } %}
                </a>

                {% 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>
 
/* No context defined. */

No notes defined.