APA Component Library

Card Links Collection 

<div class="bg-primary aspect-square overflow-hidden">
    <div class="py-10 px-5 md:py-15 md:px-10">

        <h5 class="text-white text-left h5 ">
            Unser Service für Ihr Projekt

        </h5>

        <div>
            <ol class="font-bold text-white">

                <li class="relative py-2 flex items-center w-full after:absolute after:bottom-0 after:left-0 after:w-full after:h-px after:bg-white after:opacity-20 last:after:hidden">
                    <span class="shrink-0 mr-2">
                        1.
                    </span>

                    <a href="/" class="flex items-center justify-between w-full text-white">
                        <span>
                            Jobs & Ausbildung
                        </span>

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

                    </a>

                </li>

                <li class="relative py-2 flex items-center w-full after:absolute after:bottom-0 after:left-0 after:w-full after:h-px after:bg-white after:opacity-20 last:after:hidden">
                    <span class="shrink-0 mr-2">
                        2.
                    </span>

                    <span>
                        Homeoffice
                    </span>

                </li>

                <li class="relative py-2 flex items-center w-full after:absolute after:bottom-0 after:left-0 after:w-full after:h-px after:bg-white after:opacity-20 last:after:hidden">
                    <span class="shrink-0 mr-2">
                        3.
                    </span>

                    <a href="/" class="flex items-center justify-between w-full text-white">
                        <span>
                            Jobs & Ausbildun
                        </span>

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

                    </a>

                </li>

            </ol>
        </div>

    </div>
</div>
 
{% set title = title %}
{% set links = links %}

<div class="bg-primary aspect-square overflow-hidden">
    <div class="py-10 px-5 md:py-15 md:px-10">
        {% render "@headline" with {
            headline: title,
            tag: 'h5',
            size: 'h5',
            classes: 'text-white'
        } %}
        {% if links %}
            <div>
                <ol class="font-bold text-white">
                    {% for item in links %}
                        <li class="relative py-2 flex items-center w-full after:absolute after:bottom-0 after:left-0 after:w-full after:h-px after:bg-white after:opacity-20 last:after:hidden">
                        <span class="shrink-0 mr-2">
                            {{ loop.index }}.
                        </span>

                            {% if item.link %}
                                <a href="{{ item.link }}" class="flex items-center justify-between w-full text-white">
                                <span>
                                    {{ item.title }}
                                </span>

                                    {% render "@icon" with {
                                        name: 'arrow',
                                        size: 'sm'
                                    } %}
                                </a>
                            {% else %}
                                <span>
                                {{ item.title }}
                            </span>
                            {% endif %}
                        </li>
                    {% endfor %}
                </ol>
            </div>
        {% endif %}
    </div>
</div>
 
{
  "title": "Unser Service für Ihr Projekt",
  "links": [
    {
      "title": "Jobs & Ausbildung",
      "link": "/"
    },
    {
      "title": "Homeoffice"
    },
    {
      "title": "Jobs & Ausbildun",
      "link": "/"
    }
  ]
}

No notes defined.