Skip to main content

IndentedText

Heben Sie einzelne Informationen auf Ihrer Webseite optisch mit der IndentedText-Komponente hervor. Die Komponente eignet sich nicht nur für besondere Abschnitte auf der Webseite, sondern auch beispielsweise für Zitate (für verlinkte Zitate kann auch die verwendet werden.).

Konstruktion

Code

<kol-indented-text>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
</kol-indented-text>

Beispiel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.

Verwendung

Die Komponente besitzt keine weiteren Attribute. Der hervorzuhebende Text wird zwischen das öffnende und das schließende Tag geschrieben.

Best practices

  • Verwenden Sie die IndentedText-Komponente, um ergänzende Informationen zu einem Hauptthema optisch hervorzuheben.
  • Vermeiden Sie, wichtige Informationen in der Komponente auszugeben, die eine Aktion der Nutzer:innen erfordern.
  • Vermeiden Sie, viele IndentedText-Komponenten auf einer Einzelseite zu integrieren, da hierdurch die Übersichtlichkeit sinkt.

Anwendungsfälle

Verwenden Sie die IndentedText-Komponente, um Textpassagen oder Informationen optisch hervorzuheben.

[DEPRECATED] Will be removed in v3. Replace with custom HTML and styling.

Slots

SlotDescription
Der Text.

View example

Live-Editor

Beispiele