<div class="alert alert-danger" role="alert">
    <h5><i class="fas fa-times-circle"></i>&nbsp;Fehler</h5>
    <p>
        Der Shortcode <code>[tspv2_info_card_element]</code> wurde möglicherweise falsch verwendet. Die folgenden Attribute sind verwendbar:
    </p>

    <ul>
        <li>Das Attribut <code>mode</code> kann optional verwendet werden, um den Darstellungsmodus festzulegen. Es gibt an, wie die Karten dargestellt werden. Der Default-Wert ist "stack".</li>
        </ul>
    <p>
        Die Karten haben folgende Attribute:     
    </p>
    <ul>
        <li>Das Attribut <code>bg_color</code> kann optional verwendet werden, um die Hintergrundfarbe jeder Karte festzulegen. Der Default-Wert ist "#FFFFFF".</li>
        <li>Das Attribut <code>img_src</code> kann optional verwendet werden, um das Hintergrundbild jeder Karte festzulegen.</li>
        <li>Das Attribut <code>card_alignment</code> legt die Ausrichtung des Textes in der Karte fest. Es bestimmt, wie der Text innerhalb der Karte ausgerichtet wird, wie z.B. linksbündig, zentriert oder rechtsbündig. Der Default-Wert ist "center".</li>
    </ul>

    <div class="beispiel m-5">
        <p>Beispiel:</p>
        <xmp style="white-space: initial ">
            [tspv2_info_card_element mode="stack"]
        </xmp>
        <xmp style="white-space: initial ">
            <div class="infoCard" bg_color="#8ed1fc" card_alignment="left">Card Content 1</div>
        </xmp>
        <xmp style="white-space: initial ">
            <div class="infoCard" bg_color="#8ed1fc" card_alignment="right">Card Content 2</div>
        </xmp>
        <xmp style="white-space: initial ">
            <div class="infoCard" bg_color="#8ed1fc" card_alignment="center">Card Content 3</div>
        </xmp>
        <xmp style="white-space: initial ">
            [/tspv2_info_card_element]
        </xmp>
    </div>
</div>