APA Component Library

Job Listing 

<a href="/" class="relative flex bg-gray-600 py-6 px-4 md:items-center lg:py-4 lg:px-4 grid grid-cols-1 md:grid-cols-[50%_24%_20%_56px] transition-all hover:brightness-95 active:scale-[0.99]">
    <div class="md:mr-6">

        <p class="default text-base text-white font-normal text-lg bottom-0 ml-2 leading-customText">Mechaniker </p>

    </div>
    <div class="flex flex-wrap gap-2 items-center mb-8 md:mb-0">

        <div class="shrink-0">

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

        <div class="shrink-0">

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

    </div>

    <div class="text-white flex items-center justify-end mr-8">

        <span class="inline-flex items-center w-4 h-4    mr-4 ">
            <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.37 23.37">
                <path id="b" d="m5.31.75v2.73M18.06.75v2.73M.75,19.88V6.22c0-1.51,1.22-2.73,2.73-2.73h16.4c1.51,0,2.73,1.22,2.73,2.73v13.67m-21.87,0c0,1.51,1.22,2.73,2.73,2.73h16.4c1.51,0,2.73-1.22,2.73-2.73m-21.87,0v-9.11c0-1.51,1.22-2.73,2.73-2.73h16.4c1.51,0,2.73,1.22,2.73,2.73v9.11" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
            </svg>
        </span>

        <p class="default text-base text-sm text-white w-[100px] leading-customText">01.01.2024 </p>

    </div>

    <div class="absolute bottom-0 right-0 md:relative md:bottom-auto md:right-auto md:text-right md:flex md:justify-end">

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

            <span class="inline-flex items-center w-4 h-4     ">
                <?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>

        </button>
    </div>
</a>
 
{% set title = title %}
{% set tags = tags %}
{% set date = date %}
{% set link = link %}
{% set afterText = afterText %}

<a href="{{ link }}" class="relative flex bg-gray-600 py-6 px-4 md:items-center lg:py-4 lg:px-4 grid grid-cols-1 md:grid-cols-[50%_24%_20%_56px] transition-all hover:brightness-95 active:scale-[0.99]">
    <div class="md:mr-6">
        {% render "@text" with {
            text: title,
            afterText: afterText,
            classes: 'text-white font-normal text-lg bottom-0 ml-2',
        } %}
    </div>
    <div class="flex flex-wrap gap-2 items-center mb-8 md:mb-0">
        {% for item in tags %}
            <div class="shrink-0">
                {% render "@tag" with {
                    title: item.title,
                } %}
            </div>
        {% endfor %}
    </div>

    <div class="text-white flex items-center justify-end mr-8">
        {% render "@icon" with {
            name: 'calender',
            classes: 'mr-4'
        } %}

        {% render "@text" with {
            text: date,
            classes: 'text-sm text-white w-[100px]',
        } %}
    </div>

    <div class="absolute bottom-0 right-0 md:relative md:bottom-auto md:right-auto md:text-right md:flex md:justify-end">
        {% include '@button' with {
            label: "",
            style: 'primary',
            classes: 'ml-auto',
            size: 'even',
            tag: 'button',
            link: true,
            linkHref: link,
            icon: {
                name: 'arrow'
            }
        } %}
    </div>
</a>
 
{
  "title": "Mechaniker",
  "date": "01.01.2024",
  "tags": [
    {
      "title": "Voll- oder Teilzeit"
    },
    {
      "title": "Homeoffice"
    }
  ],
  "link": "/"
}

No notes defined.