APA Component Library

Icon Text Block 

<div class="relative">
    <div class="flex items-center mb-4">

        <span class="inline-flex items-center w-6 h-6    mr-4 shrink-0 ">
            <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50.25 46.5">
                <path id="b" d="m45.75,14.53c2.25.75,3.77,2.87,3.75,5.24v10.72c.03,2.84-2.12,5.22-4.95,5.48-.85.07-1.7.13-2.55.18v7.73l-7.5-7.5c-3.39,0-6.74-.14-10.05-.41-.72-.06-1.42-.26-2.06-.6m23.36-20.84c-.39-.12-.79-.2-1.19-.24-6.7-.56-13.43-.56-20.12,0-2.82.26-4.97,2.65-4.94,5.48v10.72c0,2.03,1.1,3.91,2.89,4.88m23.36-20.84v-4.68c.06-4.05-2.89-7.51-6.9-8.09C28.49.42,18.01.42,7.65,1.75,3.64,2.33.69,5.79.75,9.84v15.57c-.06,4.05,2.89,7.51,6.9,8.09,1.44.19,2.89.35,4.35.49v11.77l10.39-10.39" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
            </svg>
        </span>

        <h5 class="!mb-0 text-left h5 ">
            Projektabwicklung von Anfang bis Schluss

        </h5>

    </div>

    <p class="default text-sm  leading-customText">Wir übernehmen im Rahmen einer Projektbearbeitung alle technischen und kaufmännischen Aufgaben, von der Entwicklung einer Herstellstrategie über die Erarbeitung eines Pflichtenheftes bis zur Begleitung der Realisierung und Abnahme der Inbetriebnahme, in enger Abstimmung mit unserem Kunden! </p>

</div>
 
{% set icon = icon %}
{% set fillColor = fillColor %}
{% set title = title %}
{% set color = color %}
{% set text = text %}
{% set iconSize = iconSize|default("md") %}


<div class="relative">
    <div class="flex items-center mb-4">
        {% include '@icon' with {
            name: icon,
            strokeColor: color,
            fillColor: fillColor,
            size: iconSize,
            color: color,
            classes: 'mr-4 shrink-0'
        } %}

        {% include '@headline' with {
            headline: title,
            tag: "h5",
            size: "h5",
            alignment: "left",
            color: color,
            classes: '!mb-0'
        } %}
    </div>

    {% include '@text' with {
        text: text,
        size: "sm",
        color: color
    } %}
</div>
 
{
  "icon": "speech-bubble",
  "title": "Projektabwicklung von Anfang bis Schluss",
  "text": "Wir übernehmen im Rahmen einer Projektbearbeitung alle technischen und kaufmännischen Aufgaben, von der Entwicklung einer Herstellstrategie über die Erarbeitung eines Pflichtenheftes bis zur Begleitung der Realisierung und Abnahme der Inbetriebnahme, in enger Abstimmung mit unserem Kunden!"
}

No notes defined.