TYPO3 Teaser-/Card-Element mit wählbarem Icon,

Icon-/Card-Teaser Inhaltselement

Ein Icon Teaser ist ein einfaches Element, bei dem ein Icon aus einer definierten Liste gewählt werden kann. Die Liste der möglichen Icons wird aus Ordnern erstellt, in denen sich SVG Dateien befinden. Die Orte der zu durchsuchenden Ordner kann über das TCA oder direkt über das „Page TypoScript“ angepasst werden und ist somit individuell pro Seite einstellbar.

TYPO3 Teaser-/Card-Element Liste mit wählbarem Icon,

Icon-/Card-Teaser Listen-Element

Dieses Element gibt es als Inhaltselement und als Listenelement, um viele Icon-Elemente einfach zu erzeugen. Hier als Listenelement mit globaler Klasse “Neigen” und Füllfarbe pro Icon Element.

Icon 02

Hier die Klasse Neigen ...

Icon 03

Es können so viele ...

Icon 04

Effekt Klassen zugefügt werden ...

Icon 05

wie man möchte.

Icon 06

Text kann
mehrzeilig sein

Mit diesem Element können SVG Icons aus frei konfigurierbaren Ordnern gewählt werden. Die Ordner werden als Tabs dargestellt. Es kann ebenfalls eine Füll-Farbe festgelegt werden, sofern das SVG Icon keine Füll-Farbe/n definiert hat. Die SVG-Einbindung erfolgt als Inline-SVG und kann auch FLUID Variablen enthalten, um barrierefreie SVGs über Sprachlabel zu erstellen oder andere Variablen einzusetzen.

// Als Standard wird folgendes Attribut ersetzt:
data-aria-label=""
// Ersetzung, wenn ein Wert via icon_aria_label übergeben wird
aria-label="{icon_aria_label}"
// wenn kein Wert übergeben wird:
aria-hidden="true" focusable="false"
// SVG Code Beispiel:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" ...
     data-aria-label="">
// wird zu:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" ...
     aria-label="Wert aus icon_aria_label">
TYPO3 Backend Ansicht: Vorschau des Icon Teaser Inhaltselements

Backend Vorschau "Icon Teaser"

TYPO3 Backend Ansicht: Vorschau des Icon Liste Teaser Inhaltselements

Backend Vorschau "Icon Teaser Liste" Inhaltselement

TYPO3 Backend Ansicht: Icon Auswahl und Optionen des Inhaltselements

Icon Auswahl und Optionen

TYPO3 Backend Ansicht: Icon Styling Optionen des Inhaltselements

Icon Styling Optionen

TYPO3 Backend Ansicht: Barrierefreiheit des Inhaltselements

Optionaler Text für Barrierefreiheit

TYPO3 Backend Ansicht Maintainer Hilfe des Inhaltselements

Hilfe für Maintainer. Diese Hilfe wird nur angezeigt, sofern ein Backend-Benutzer mit Maintainer Rechten angemeldet ist.