APA Component Library

Card: Variants 

<div class="md:grid md:grid-cols-2 md:gap-9 lg:grid-cols-3">

    <a class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 aspect-square  transition-all hover:brightness-90 active:scale-95">
        <div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
        </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" src="/image/placeholder.jpg" alt="" />

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

            </div>
        </div>

        <div class="relative z-10 mt-auto">
            <div class="text-white font-bold text-xl mb-2 xl:mb-4">
                Energize your career. Charged with career benefits.
            </div>

            <div>

                <div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
                    Jobs & Ausbildung
                </div>
            </div>
        </div>

        <div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">

            <div class="p-4 bg-primary grid place-content-center ml-auto">

                <span class="inline-flex items-center w-6 h-6  [&_*]:!stroke-white   ">
                    <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5">
                        <path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                    </svg>
                </span>

            </div>
        </div>

        <div class="absolute bottom-0 left-0 w-full  pointer-events-none bg-gradient-to-b from-transparent to-gray-700 opacity-50 f-full md:h-3/4"></div>
    </a>

    <a class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-700 aspect-square flex flex-col justify-between  transition-all hover:brightness-90 active:scale-95">
        <div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
        </div>

        <div class="relative h-[55%]">

            <div class="relative h-[80%] w-full ">
                <img class="mx-auto h-full" src="/image/product.png" alt="" />

            </div>
        </div>

        <div class="relative z-10 mt-auto">
            <div class="text-white font-bold text-xl mb-2 xl:mb-4">
                Maßgeschneiderte Maschinenbau-Lösungen
            </div>

            <div>

                <div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
                    Jobs & Ausbildung
                </div>

                <div class="inline-block text-xs py-1 px-2 bg-white text-current b-0 ">
                    Vollzeit
                </div>
            </div>
        </div>

        <div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">

            <div class="p-4 bg-primary grid place-content-center ml-auto">

                <span class="inline-flex items-center w-6 h-6  [&_*]:!stroke-white   ">
                    <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5">
                        <path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                    </svg>
                </span>

            </div>
        </div>

    </a>

    <a class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 bg-gray-600  transition-all hover:brightness-90 active:scale-95">
        <div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
        </div>

        <div class="relative z-10 mt-auto">
            <div class="text-white font-bold text-xl mb-2 xl:mb-4">
                Die verschiedenen Montageprozesse unterliegen einer 100% Kontrolle und nur iO geprüfte Bauteile werden markiert.
            </div>

            <div>

                <div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white b-0 ">
                    Montageautomation
                </div>
            </div>
        </div>

        <div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">

            <div class="p-4 bg-primary grid place-content-center ml-auto">

                <span class="inline-flex items-center w-6 h-6  [&_*]:!stroke-white   ">
                    <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5">
                        <path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                    </svg>
                </span>

            </div>
        </div>

    </a>

    <a class="relative overflow-hidden pt-6 px-6 pb-14 w-full h-full flex flex-col md:pt-8 md:px-8 xl:pt-8 xl:px-8 aspect-auto  transition-all hover:brightness-90 active:scale-95">
        <div class="self-start z-10 mb-4 md:flex md:flex-wrap md:gap-3">
        </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" src="/image/placeholder.jpg" alt="" />

                <div class="absolute bottom-0 left-0 w-full pointer-events-none h-full bg-gray-600 opacity-80 h-full"></div>

            </div>
        </div>

        <div class="relative z-10 ">
            <div class="text-white font-bold text-xl mb-2 xl:mb-4">
                1998
            </div>

            <div class="text-white font-normal text-base leading-customText mb-5 xl:mb-10">
                Gegründet als Ingenieurbüro zur Konstruktion von Handhabungsvorrichtungen insbesondere zur Fernhantierung mit Sitz in der Goldbergstrasse, Alzenau.
            </div>

            <div>

                <div class="inline-block text-xs py-1 px-2 bg-gray-700 text-white b-0 ">
                    Produkte & Services
                </div>
            </div>
        </div>

        <div class="absolute bottom-0 left-0 pl-6 w-full flex justify-between z-10 md:pl-8 xl:pl-10">

            <div class="p-4 bg-primary grid place-content-center ml-auto">

                <span class="inline-flex items-center w-6 h-6  [&_*]:!stroke-white   ">
                    <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.5 16.5">
                        <path id="b" d="m.75,15.75L15.75.75m0,0H4.5m11.25,0v11.25" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                    </svg>
                </span>

            </div>
        </div>

        <div class="absolute bottom-0 left-0 w-full  pointer-events-none bg-gray-600 opacity-50 h-full"></div>
    </a>
</div>
 
<div class="md:grid md:grid-cols-2 md:gap-9 lg:grid-cols-3">
    {% include '@card' with {
        title: "Energize your career. Charged with career benefits.",
        style: 'media-full',
        tags: [
            {
                title: 'Jobs & Ausbildung'
            }
        ],
        overlay: 'overlay-gradient',
        link: '/'
    } %}

    {% include '@card' with {
        title: "Maßgeschneiderte Maschinenbau-Lösungen",
        tags: [
            {
                title: 'Jobs & Ausbildung'
            },
            {
                title: 'Vollzeit'
            }
        ],
        style: 'media-freehand',
        link: '/'
    } %}

    {% include '@card' with {
        title: "Die verschiedenen Montageprozesse unterliegen einer 100% Kontrolle und nur iO geprüfte Bauteile werden markiert.",
        style: 'default',
        tags: [
            {
                title: 'Montageautomation'
            }
        ],
        tagPosition: 'bottom',
        alignContent: 'bottom',
        link: '/'
    } %}

    {% include '@card' with {
        title: "1998",
        description: "Gegründet als Ingenieurbüro zur Konstruktion von Handhabungsvorrichtungen insbesondere zur Fernhantierung mit Sitz in der Goldbergstrasse, Alzenau.",
        alignContent: 'top',
        overlay: 'overlay-default',
        style: 'media-normal'
    } %}
</div>
 
{
  "title": "Energize your career. Charged with career benefits.",
  "alignContent": "bottom",
  "style": "media-full",
  "tags": [
    {
      "title": "Produkte & Services"
    }
  ],
  "tagPosition": "bottom",
  "link": "/"
}

No notes defined.