APA Component Library

Search Element 

<div class="[&_input]:bg-gray-100 bg-gray-100 py-2 pr-12 flex items-center relative">

    <input type="text" placeholder="Bitte Suchbegriff eingeben" id="search" class="w-full py-3 px-6 text-black placeholder:text-black" />

    <span class="absolute top-1/2 -translate-y-1/2 right-4">

        <span class="block items-center w-8 h-8  stroke-primary   ">
            <svg class="w-10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Ebene_1" x="0px" y="0px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
                <style type="text/css">
                    .red-svg {
                        fill: none;
                        stroke-width: 12px;
                        stroke-linecap: round;
                        stroke-linejoin: round;
                        stroke-miterlimit: 10;
                    }
                </style>
                <g>
                    <path class="red-svg" d="M56.09669,177.27364c-18.35368,0-33.37032-15.01665-33.37032-33.37033" />
                    <path class="red-svg" d="M177.27364,143.90331c0,18.35368-15.01665,33.37033-33.37033,33.37033" />
                    <path class="red-svg" d="M143.90331,22.72637c18.35368,0,33.37033,15.01664,33.37033,33.37032" />
                    <path class="red-svg" d="M22.72637,56.09669c0-18.35368,15.01664-33.37032,33.37032-33.37032" />
                    <circle class="red-svg" cx="98.2375" cy="94.95036" r="34.59236" />
                    <line class="red-svg" x1="123.56695" y1="118.49943" x2="147.69177" y2="142.62425" />
                </g>
            </svg>
        </span>

    </span>
</div>
 
<div class="[&_input]:bg-gray-100 bg-gray-100 py-2 pr-12 flex items-center relative">
    {% render "@input" with {
        name: 'search',
        label: 'Bitte Suchbegriff eingeben'
    } %}

    <span class="absolute top-1/2 -translate-y-1/2 right-4">
		{% render "@icon" with {
			name: "search-square-red",
			size: "lg",
            strokeColor: "stroke-primary",
			notFlex: true
		} %}
    </span>
</div>
 
/* No context defined. */

No notes defined.