> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dreizack-medien.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Icon Textbox

<Frame>
  <img src="https://mintcdn.com/dzm/HZJ7yfrW4YO0gXyz/images/image-10.png?fit=max&auto=format&n=HZJ7yfrW4YO0gXyz&q=85&s=14e4a0f00ceba6032a41ce7c13825ba1" alt="Image" width="1250" height="738" data-path="images/image-10.png" />
</Frame>

# Allgemeine Beschreibung

Die Icon Textbox ist ein einfaches Designelement mit einem prominenten Icon, Text und optionaler Verlinkung. Mit der Icon Textbox kannst du auf Inhalt aufmerksam machen, Schritt für Schritt Anleitungen schreiben, oder auch Angebote platzieren

# Einsatzmöglichkeiten (Inspiration)

* Zeig wie einfach dein Produkt ist mit Schrittanleitungen
* Stelle Angebote prominent dar
* Warnmeldungen
* Infoboxen
* ...

# Featureübersicht:

* Wahl zwischen Buchstabe/Zahl oder Icon
* Optionale Verlinkung

***

# Settings:

## Textinhalt

<Frame>
  <img src="https://mintcdn.com/dzm/ufGCPuo3Nn1X-GwK/images/image-170.png?fit=max&auto=format&n=ufGCPuo3Nn1X-GwK&q=85&s=33ee5bb713bf29dd363f0c1995c0e1d5" alt="Image" width="1192" height="976" data-path="images/image-170.png" />
</Frame>

***

**Überschrift:** Legt die Überschrift fest

**Inhalt:** Legt den Textinhalt fest

***

## Icon

<Frame>
  <img src="https://mintcdn.com/dzm/HZJ7yfrW4YO0gXyz/images/image-11.png?fit=max&auto=format&n=HZJ7yfrW4YO0gXyz&q=85&s=78f9ef08d9230f90e9a50420e0686bd6" alt="Image" width="1558" height="1358" data-path="images/image-11.png" />
</Frame>

***

**Darstellungsform:** Wähle zwischen

* Icon: stellt ein Icon im Kreis über dem Text dar
* Zahl/Buchstabe: Stellt eine ausgewählte Zahl oder einen Buchstaben dar

***

## Darstellung

<Frame>
  <img src="https://mintcdn.com/dzm/ufGCPuo3Nn1X-GwK/images/image-171.png?fit=max&auto=format&n=ufGCPuo3Nn1X-GwK&q=85&s=0696c4e7e44cbd2fec644fcecf4f0008" alt="Image" width="1182" height="478" data-path="images/image-171.png" />
</Frame>

***

**Icon Farbe:** Legt die Farbe des Icons fest

**Boxschatten verwenden:** Verleiht der Box einen dezenten Schatten, der dem Element mehr räumliche Tiefe verleiht.

***

## Button

<Frame>
  <img src="https://mintcdn.com/dzm/ufGCPuo3Nn1X-GwK/images/image-172.png?fit=max&auto=format&n=ufGCPuo3Nn1X-GwK&q=85&s=669338084f0c332ae327b44e4a861570" alt="Image" width="1188" height="1502" data-path="images/image-172.png" />
</Frame>

***

**Button verwenden**: Auswahl, ob ein Button dargestellt werden soll oder nicht

**Buttonlink:** URL auf die der Button bei Klick leiten soll. Für Verlinkung auf andere Seiten muss die vollständige URL angelegt werden. Für Verlinkungen auf der eigenen Domain reicht der relative Pfad. Damit der Link innerhalb der aktuellen Seite zu einem Bereich scrollt, muss der Bereich eine ID haben, dann kannst du mit #mein-id automatisch dort hin scrollen lassen per Klick. Siehe Allgemeine Dokumentation für das Anlegen von IDs in OPC Portlets

```plain theme={null}
Verlinkung auf Drittseite:
https://dreizack-medien.de/meine-kategorie/mein-produkt 

Verlinkung innerhalb der eigenen Domain:
/meine-kategorie/mein-produkt

Verlinkung zu Container:
#meine-id
/meine-kategorie/mein-produkt#meine-id
```

**Button Text:** Text, der auf dem Button steht

**Button Type:** Wie soll der Button dargestellt werden

* Full: vollflächig mit Farbe
* Outlined: weiß mit farbigem Rand
* Plain Text: nur Text wird farbig angezeigt, ähnlich wie ein Link

**Button Farbe:** Farbe des Buttons. Je nach Type färbt sich die Fläche (Full), der Rahmen (Outlined) oder die Schriftfarbe (Plain Text). Die Farbauswahl richtet sich nach Templateeinstellung und passt sich so nahtlos deinem Design an.

**Button Breite:** Auswahl wie der Button in der Breite dargestellt wird:

* Content Width: So breit wie der Text darin
* Full Width: Über die gesamte Breite des Containers

**Button Ausrichtungen:** Hier kannst du für jede Bildschirmgröße auswählen wie sich der Button verhalten soll, ob er links-, rechtsbündig oder zentriert dargestellt werden soll. Das ist sinnvoll zu durchdenken, denn auf mobilen Ansichten, insbesondere wenn dein Gridlayout umbricht, kann die Buttonposition im Verhältnis darunter leiden.

**Link in neuen Tab öffnen:** Bei Klick auf den Link wird ein neuer Tab geöffnet.

**Icon vor oder nach dem Text:** Hat hier aktuell leider keine Funktion und wird in einer der kommenden Versionen entfernt

***

***