Dieselben Bausteine, andere Tokens

aurora-aron Token-Demo

Auf dieser Seite stehen fünf Elemente aus dem Element-Katalog — mit denselben Texten, denselben Bildern und denselben Element-Einstellungen. Verändert wurde ausschließlich das Token-Set des Templates.

Was sich unterscheidet

  • Farben — warme Palette statt der Katalog-Farben: Primär ein gebranntes Orange, Sekundär ein dunkles Braun, als dritte Farbe ein Sandgold; dazu ein heller Sandton als Seitenhintergrund.
  • Rundung — ein durchgehender Eckenradius auf Buttons, Karten und Bildern statt der kantigen Katalog-Vorgabe.
  • Überschriftenschrift — eine Serife (Playfair Display) für alle Überschriften.
  • Header- und Footer-Variante — header_2 und footer_1; der Katalog läuft auf header_1 und footer_2.

Direktvergleich

Der Element-Katalog liegt unter https://claude-aron-katalog.at.astner3.dev.futurecms.at/. Die hier gezeigten Elemente finden sich dort auf den Seiten „Medien und Slider“, „Text und Zweispalter“ und „Fakten Features USP“ — am besten beide Seiten nebeneinander öffnen.

Alles, was hier anders aussieht, geht damit auf die Tokens zurück und nicht auf den Inhalt.

Küche aus Altholz mit hellem Arbeitsbereich
Saunabereich in einem Chalet mit Holzverkleidung

    headerSlider — Bühne mit 2 Slides

    Vollbreite Header-/Hero-Bühne

    Die vollbreite Bühne am Seitenanfang: ein Slider aus Bildern, Videos (MP4, YouTube, Vimeo) oder einem 360-Grad-Rundblick, darüber ein Text-Overlay aus Eyebrow, Überschrift, Fließtext und bis zu zwei Buttons. Position und Breite der Textbox sind einstellbar, ebenso die Höhe je Geräteklasse — feste Bildproportion oder volle Bildschirmhöhe.

    Für einen zweispaltigen Content-Slider mit Text neben Bild ist introSlider gedacht, für ein einzelnes Bildband ohne Slider fullwidthImage.

    twoColumnTextImage — 50/50, Bild rechts

    Feste Rollen: links Text, rechts Bild

    Zweispalter mit festen Rollen: die linke Spalte ist immer Text (Überschrift, Fließtext, bis zu zwei Buttons), die rechte immer eine Bild-Galerie. Liegen mehrere Bilder im Galeriefeld, wird daraus automatisch ein Slider.

    Der Klassiker für „Beschreibungstext plus ein Foto“. Sollen beide Spalten frei mit Bild oder Text belegt werden können, ist twoColumnImageWithText das richtige Element.

    features — Icon-Raster mit drei Kacheln

    variant-1

    Kompakte Kacheln aus Symbol, Titel und Kurztext. Das Bildfeld ist auf eine quadratische Box gezwungen und wird normalerweise mit einem SVG-Icon befüllt; in diesem Katalog stehen nur Fotos zur Verfügung, deshalb ist hier die Einstellung „als normales Bild anzeigen“ aktiv.

    Für Kacheln mit großem Foto und Fließtext ist imageWithTextEntries gedacht, für Kennzahlen facts.

    Symbolbild Kuechenzeile aus Altholz
    Leistungen und Ausstattung

    Der typische Einsatz: eine Handvoll Vorteile, jeweils mit Symbol und einem Satz Erklärung.

    Symbolbild moderne Kueche
    USPs mit Symbol

    Icon-Größe, Icon-Farbe und Kachel-Hintergrund sind Einstellungen des Elements, nicht Teil des Inhalts.

    Symbolbild Kuechenblock
    Kurze Aufzählungen

    Für eine einfache Bulletliste reicht @textarea; features lohnt sich, sobald Symbole und ein Raster dazukommen.

    facts — Kennzahlen mit Count-up

    Drei Einträge

    Große Zahlen mit kurzer Beschreibung darunter, die beim Scrollen hochzählen. Gedacht für Firmen- und Erfolgszahlen, Eckdaten oder Meilensteine.

    Der Count-up lässt sich abschalten, das Tausendertrennzeichen ist einstellbar. Für Kacheln mit Foto ist imageWithTextEntries zuständig, für Icon-Vorteile features.

    34
    Elementtypen im Template aurora-aron
    8
    Seiten in diesem Katalog
    3
    Einträge je Repeater-Element

    accordionElem — Akkordeon mit drei Zeilen

    Erste Zeile geöffnet

    Aufklappbare Zeilen mit Titel und WYSIWYG-Inhalt — das Standard-Element für FAQ, Wissenswertes und lange Detailtexte, die nicht sofort sichtbar sein sollen.

    Für FAQ und häufige Fragen, für Detailinformationen, die den Lesefluss stören würden, und für Preis- oder Leistungslisten mit erklärendem Text.

    Ob mehrere Zeilen gleichzeitig offen sein dürfen, ob die erste Zeile beim Laden geöffnet ist, ob das Symbol ein Chevron oder ein Plus ist, sowie Höhe, Farbe und Deckkraft der Trennlinien.

    Reiner Fließtext ohne Aufklappen gehört in @textarea, Icon-Text-Spalten in textColumns, Bild-Text-Blöcke nebeneinander in twoColumnImageWithText.