APA Component Library

Hero: Subpage 

<section class="relative flex min-h-[60vh] md:min-h-[75vh] px-6 md:px-9 xl:px-12">
    <div class="w-full mx-auto grid self-center gap-8 xl:grid-cols-12">
        <div class="relative z-10 xl:col-start-2 xl:col-end-12">

            <h1 class="text-white hyphens-auto text-left h1 ">
                Produkte & Services

            </h1>

            <div class="text-white text-left h4 ">
                für Anlagen- und Produktionsmaschinenbau

            </div>

        </div>

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

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

            </div>

        </div>
    </div>

    <div class="absolute bottom-0 left-0 w-full pointer-events-none bg-gray-700 md:bg-transparent md:bg-gradient-to-b md:from-transparent md:to-gray-700 opacity-80 md:opacity-90 h-full"></div>
</section>
 
<section class="relative flex min-h-[60vh] md:min-h-[75vh] px-6 md:px-9 xl:px-12">
    <div class="w-full mx-auto grid self-center gap-8 xl:grid-cols-12">
        <div class="relative z-10 xl:col-start-2 xl:col-end-12">
            {% render "@headline" with {
                headline: 'Produkte & Services',
                tag: 'h1',
                size: 'h1',
                classes: 'text-white hyphens-auto'
            } %}

            {% render "@headline" with {
                headline: 'für Anlagen- und Produktionsmaschinenbau',
                tag: 'div',
                size: 'h4',
                classes: 'text-white'
            } %}
        </div>

        <div class="absolute top-0 left-0 w-screen h-full">
            {% render "@image" with {
                "src": "/image/placeholder.jpg",
                "alt": "Alternativer Text",
                "classes": "w-full h-full object-cover"
            } %}
        </div>
    </div>

    <div class="absolute bottom-0 left-0 w-full pointer-events-none bg-gray-700 md:bg-transparent md:bg-gradient-to-b md:from-transparent md:to-gray-700 opacity-80 md:opacity-90 h-full"></div>
</section>
 
/* No context defined. */

No notes defined.