Icon-Boxen
Raster aus Karten mit Icon
Wie die Bild-Boxen, nur mit einem Icon statt eines Bildes – für Vorteile, Leistungsmerkmale und Service-Listen. Das Icon wählen Sie je Box aus der Icon-Bibliothek; Größe, Form, Farbe und Stellung gelten für alle Boxen des Elements.
Vier Ansichten: Karten, Karten als Scrollband und als Slider, Liste. Kacheln gibt es hier nicht – eine Kachel ist Text auf einem Bild. Eine dunkle Box mit Icon entsteht aus Karten mit Hintergrundfarbe (Rezept unten).
Ansicht „Karten“, Icon über dem Text
So sieht es aus: Icon über Überschrift und Text, im Raster. Wofür: Vorteile, Leistungsmerkmale.
Einstellungen: unter „Icons“ Größe XL, Form „rund“, Farbe Weiß auf Hintergrund Hauptfarbe 1. Rund oder eckig wirkt nur mit Hintergrund.
„Stellung des Icons: links neben dem Text“
So sieht es aus: eine ruhige Leiste – Icon links, Text rechts, ohne Kasten. Ab 576 px Breite, auf schmalen Telefonen steht das Icon darüber.
Einstellungen: Stellung „links neben dem Text“, Icon-Form „ohne Form“, Hintergrund und Schatten der Boxen „ohne“, Textfluss linksbündig.
„Stellung des Icons: auf der oberen Kante“
So sieht es aus: das Icon ragt zur Hälfte aus der Box. Wirkt am besten mit runder Form und Hintergrund.
Einstellungen: Stellung „auf der oberen Kante der Box“, Form „rund“, Hintergrund Hauptfarbe 2, Schatten der Boxen „mittel“.
Ansicht „Karten als Scrollband“
Eine Reihe zum Wischen, ein Stück der nächsten Box schaut herein. „Boxen nebeneinander“ gibt an, wie viele zu sehen sind – hier 1, 2 und 3.
Ansicht „Karten als Slider“
So viele Boxen, wie nebeneinander stehen; Pfeile und Punkte blättern eine ganze Seite weiter. Passen alle Boxen hinein, verschwindet die Steuerung.
Ansicht „Liste“
So sieht es aus: Zeilen mit dem Icon links, Text daneben; bei „ganze Box verlinken“ ein Pfeil am Zeilenende. Wofür: Service-Seiten, Link- und Download-Listen.
Einstellungen: „Boxen nebeneinander“ 1 oder 2 (hier 2 ab Desktop), Link-Darstellung „ganze Box verlinken“.
Rezept „dunkle Box mit Icon“
Was früher eine Icon-Kachel war: Karten mit dunklem Hintergrund. Einstellungen: Hintergrund der Boxen „Dunkelgrau“, Textfarbe „Weiß“, Farbe der Überschriften und Icon-Farbe „Hauptfarbe 2“, Icon ohne Form.