Vier Varianten eines Erklär-Elements mit Rahmen, Headline, Text,
optionalem Link und optionalem Bild. Jede Variante wird in zwei Rahmen-Ausführungen
gezeigt: Outline (1px schwarz auf weiß) und Grauflächig (#f3f3f3).
Schrift, Farben und Abstände stammen aus dem echten FOCUS Design
(NeueDIN, tailwind.config.js), Texte und Bilder von der
Seite Welcome Partner. Die Texte sind bewusst
unterschiedlich lang — so wird sichtbar, dass Kacheln gleich hoch
bleiben und die Buttons trotzdem auf einer Linie liegen.
Bild, Headline, Text, Button. Der direkte Ersatz für die aktuellen 3er- und 4er-Reihen auf der Welcome-Partner-Seite.
Headline, Text, Button im Rahmen. Für reine Textabschnitte — entspricht inhaltlich dem Kalkhoff-Element service_item. Hier mit vier Elementen und sehr unterschiedlich langen Texten.
Bild links, Text rechts. Für ein bis zwei Elemente pro Reihe und für längere Erklärungen. Auf dem Smartphone rutscht das Bild automatisch nach oben.
Headline, kurzer Text, Textlink mit Pfeil statt Button. Für dichte 4er-Reihen mit kurzen Hinweisen — ersetzt den Abschnitt „Relevante Informationen auf unserer Website“.
Zum Prüfen der Anforderung „sieht gut aus, wenn mehrere gleiche Elemente neben- oder untereinander stehen“: drei Elemente mit und ohne Bild, mit sehr unterschiedlich langen Texten — Kachelhöhe und Button-Linie bleiben gleich.
)
)
)
)
)
)
)