Interne Staging-Ansicht

Komponenten-Katalog

Live-Vorschau der generischen Inhaltsblöcke plus Parameter in Alltagssprache (Masterplan §11.2). Zusammengesetzte Seitenkomponenten (z. B. Stellenanzeige, Magazin-Filter, Referenzkarten) sind hier bewusst nicht enthalten – sie nutzen diese Blöcke intern. Beispiele dienen der Orientierung für Aria-Anweisungen – z. B. „Grid im Service-Stil mit 2 Spalten“.

SmartHeading (alle Blöcke)

headline: In allen Blöcken: Roboto-Bold-Text; *Wörter in Sternchen* → On My Way (ein zusammenhängender Satz für Screenreader).
subline: Wo unterstützt (hero, grid, split_content, accordion, image_gallery, feed_teaser): Eyebrow mit Magenta-Strich und Uppercase-Tracking.

Hero (`hero`)

Kopfbereich einer Seite. Pro Seite genau ein Hero ohne Vorschau-Modus – dort liegt das einzige H1.

Konfiguration (Content-Felder)

headline: Hauptüberschrift (mind. 5 Zeichen). Wörter in *Sternchen* werden in On My Way hervorgehoben.
rotatingHeadlineTerms: Optional (2–8 Begriffe): CSS-Rotator unter der Headline, ohne Client-JavaScript; bei prefers-reduced-motion bleibt der erste Begriff stehen.
subline: Optional: Eyebrow über der Headline (Großbuchstaben mit Magenta-Strich).
text: Optional: Einleitungstext unter der Überschrift (**fett** wie in Split Content). Jede Zeile wird ein eigener Absatz.
variant: Darstellung: split (Text + Bild), cover (Vollbild mit Verlauf-Overlay), centered, minimal.
actions: Optional: bis zu zwei Buttons mit text, url, variant (primary | secondary) und optionalem trackingId für Analytics.
image / imageAlt: Optional: Pfad relativ zu src/assets/content/; imageAlt ist bei gesetztem Bild erforderlich (mind. 5 Zeichen).

Vollausprägung optionaler Felder · variant: split

ISENTO

Gemeinsam mit Technologie Mehrwert schaffen.

Beispiel für die Split-Variante mit Einleitungstext und priorisierten Call-to-Actions.

Beratung anfragen Mehr erfahren

variant: cover

Über isento

Wir sind isento

Wir bieten umfassende Expertise für Deinen Erfolg: Beratung, maßgeschneiderte Lösungen und effizientes Management.

Mit uns hast Du den Rücken frei, um Dich voll und ganz auf Dein Kerngeschäft zu konzentrieren.

variant: centered

Hero: mittig ausgerichtet

rotatingHeadlineTerms · variant: centered

Dein IT-Partner fürKünstliche Intelligenz, Softwareentwicklung, Softwaretest

Unsere Leistungen Karriere bei isento

variant: minimal

Hero: minimal

Grid (`grid`)

Universelles Raster für Leistungen, Kennzahlen, Siegel, Referenzen oder nummerierte Abläufe (z. B. Bewerbungs- und Kontaktprozess). Karten mit linkUrl sind vollständig klickbar und zeigen einen sichtbaren Hover-Zustand.

Konfiguration (Content-Felder)

headline / subline: Optionale Sektionsüberschrift; subline wird als Eyebrow ausgegeben, wenn eine headline vorhanden ist.
columns: Spaltenanzahl: 2, 3, 4, 5 oder 6.
variant: standard, compact (Logos/Siegel), showcase (Bild + Badge), metric (Kennzahl), service (Button unten bündig).
cardLayout: Bildanordnung: vertical (Bild oben, Standard) oder horizontal (Bild seitlich; für showcase).
surface: Optional: zeigt die gesamte Sektion auf einer dezent hellen Fläche.
items[]: Mindestens eine Kachel.
items.title / description: Titel und optionaler Fließtext; description wie contentLeft (Zeilen = Absätze, **fett**).
items.icon: Optional: Original-Icon-Name (manager | presentation | computer | checked1 | stats | smart | phone1 | teamspeak | user_check | handshake …). Icon und Titel stehen in einer Zeile, Akzentfarbe, ohne blauen Kreis.
items.image / imageAlt: Optional: Pfad relativ zu src/assets/content/ für showcase (imageAlt mind. 5 Zeichen).
items.monogram: Optional: bis zu drei Zeichen als Bildersatz, wenn kein image gesetzt ist.
items.badge: Optional: kleines Label auf showcase-Karten.
items.linkUrl / buttonText / trackingId: Optional: Link oder Service-Button pro Karte; trackingId für GTM.
items.fullWidth: Optional: Karte über alle Spalten (typisch letzte Service-Karte).
items.meta: Optional: kleine Zusatzzeile über dem Titel, z. B. ein Datum (Blog-Karten).
items.filterKey: Optional: wird als data-filter am Listeneintrag ausgegeben, damit ein Filter (z. B. Magazin-Kategorien) die Karte ein- und ausblenden kann.
id: Optional: HTML-id der Liste, z. B. als Ziel für den Magazin-Kategoriefilter und „Weitere Beiträge anzeigen“ auf `/unternehmen/magazin/` (Grid + `BlogFilter`).

Vollausprägung optionaler Felder · variant: standard · columns: 3

BEISPIEL

Grid: Leistungen im Standard-Stil

Projects & Coaching

Von der Planung bis zur Umsetzung.
Software Engineering

Wartbare Software, gemeinsam entwickelt.
Softwaretest & QA

Qualität bewusst gestalten.

variant: standard · columns: 4 · Icons (z. B. Ablauf)

1. Kontakt

Erstkontakt per E-Mail oder Telefon.
2. Rückmeldung

Rückmeldung am nächsten Werktag.
3. Erstgespräch

Detailgespräch und Beratung.
4. Angebot

Individuelles, unverbindliches Angebot.

variant: standard · columns: 5 · surface

Projects & Coaching
Software Engineering
Test & QA
Requirements Engineering
Robotic & AI

variant: compact · columns: 6

variant: showcase · cardLayout: vertical · columns: 2

variant: showcase · cardLayout: horizontal · columns: 2

variant: metric · columns: 3

30×

schneller analysieren
100%

Teamfokus
0 KB

Client-JS in diesem Block

variant: service · columns: 2 · items.fullWidth

Split Content (`split_content`)

Zwei-Spalten-Layout oder zentrierter Fließtext.

Konfiguration (Content-Felder)

headline / subline: Sektionsüberschrift; subline optional als Eyebrow.
variant: media_split (Text + Medium) oder centered (nur Text: schmaler Block mittig, Inhalt linksbündig).
layout: Bei media_split: 50_50, 60_40 oder 40_60 (Text- zu Medienanteil).
mediaPosition: left oder right – wo Bild bzw. zweite Spalte steht.
contentLeft: Pflicht: Fließtext; jede Zeile wird ein Absatz, Zeilen mit "- " werden zu einer Aufzählung, **fett** wird hervorgehoben, [Text](url) zu einem Link (z. B. mailto:, tel:), ## Zwischenüberschrift erzeugt eine H3.
mediaRight: Optional: kind image (src, alt), kind map (src, title) oder kind content (text). Kann entfallen (nur Text).
actions: Optional: bis zu zwei Buttons wie im Hero (text, url, variant, trackingId).

variant: media_split · layout: 50_50 · mediaPosition: right · mediaRight: image

Split Content: 50/50 mit Bild

Ausgewogenes Raster mit Bild in der zweiten Spalte.

variant: media_split · layout: 60_40 · mediaPosition: right · mediaRight: content

Split Content: 60/40

Breitere Textspalte, schmalerer Medienbereich.

variant: media_split · layout: 40_60 · mediaPosition: left · mediaRight: image

Split Content: Medium links

Bild in der ersten Spalte, Text rechts.

variant: media_split · layout: 50_50 · mediaRight: map

Unser Office in Nürnberg

isento GmbH

Ostendstraße 242

90482 Nürnberg

Vollausprägung optionaler Felder · variant: centered (Markdown, Aktionen)

Isento About

Unsere Leidenschaft · Dein Erfolg

Schmaler Textblock mittig auf der Seite, Inhalt linksbündig.

Das zeichnet uns aus:

Erster Punkt: Beschreibung
Zweiter Punkt

Eine Zwischenüberschrift

Absätze mit Zwischenüberschrift, Fettdruck und Liste.

E-Mail: info@isento.de

Softwareentwicklung

People List (`people_list`)

Kompakte Ansprechpartner-Profile mit kreisförmigem Bild und optionalen Kontaktwegen.

Konfiguration (Content-Felder)

headline: Optional: Sektionsüberschrift. Ohne headline wird ariaLabel (Standard „Ansprechpartner“) als Bereichsname gesetzt, z. B. für die Autorenbox.
ariaLabel / surface: Optional: Bereichsname ohne headline; surface (Standard: hell hinterlegt; false = ohne Fläche) steuert die Hintergrundfläche.
items[].name / role: Name und Rolle (Pflicht).
items[].tag: Optional: Kontext-Label (z. B. Karriere, Kontakt).
items[].image / imageAlt: Pfad relativ zu src/assets/content/ und barrierefreier Alt-Text (mind. 5 Zeichen).
items[].email / phone: Optional: werden als mailto: bzw. tel: verlinkt.
items[].linkedInUrl: Optional: Link zum LinkedIn-Profil.

Vollausprägung optionaler Felder · surface (Standard)

People List: Ansprechpartnerinnen

Kontakt

Miriam Barthelmes

Customer Relationship Management

miriam.barthelmes@isento.de +49 (0) 911 – 21 77 38 70

Sales

TJ Graebe

Sales

jobs@isento.de +49 (0) 911 – 21 77 38 78 LinkedIn-Profil

surface: false · ohne headline (Autorenbox)

Miriam Barthelmes

Customer Relationship Management

Accordion (`accordion`)

Aufklappbare Bereiche auf Basis von details/summary; pro Block ist immer nur ein Eintrag geöffnet (kleines Client-Script). FAQ oder Leistungsliste wie auf /unternehmen/.

Konfiguration (Content-Felder)

headline: Sektionsüberschrift.
subline: Optional: Eyebrow über der Accordion-Überschrift.
items[]: Einträge mit title, content (Markdown wie split_content.contentLeft), optional linkUrl, buttonText und trackingId.

Vollausprägung optionaler Felder (subline, Markdown, Button)

ISENTO LEISTUNGEN

Dein IT Dienstleister · Für Dein Projekt

Requirements Engineering

Optimier Deine Geschäftsprozesse mit unserem erstklassigen Anforderungsmanagement

Warum Anforderungen wichtig sind

Kurzbeschreibung als Beispieltext für die Galerie.

Mehr Erfahren

Individuelle Softwareentwicklung

Zweiter Eintrag – standardmäßig eingeklappt.

Bildraster (`image_gallery`)

Mehrere Bilder nebeneinander als statisches Raster (z. B. statt eines Karussells). Kein JavaScript, keine Bildunterschriften; auf Mobilgeräten eine Spalte, auf Tablets zwei.

Konfiguration (Content-Felder)

headline / subline: Optional: Sektionsüberschrift mit Eyebrow. Ohne headline wird ariaLabel als Bereichsname gesetzt.
ariaLabel: Optional: Bereichsname für Screenreader, wenn keine headline vorhanden ist (Standard „Bildergalerie“).
columns: Spaltenanzahl auf großen Bildschirmen: 2, 3 (Standard) oder 4.
items[]: Mindestens ein Bild mit image (Pfad relativ zu src/assets/content/) und alt (mind. 5 Zeichen).

Vollausprägung optionaler Felder · columns: 3

BEISPIEL

Bildraster: Einblicke

columns: 2

columns: 4

Abschluss- oder Mid-Page-Call-to-Action; Inhalt in Container-Breite wie Grid-Blöcke, zentriert.

Konfiguration (Content-Felder)

headline: Überschrift; *Sternchen* für On-My-Way-Highlights.
text: Optional: kurzer Begleittext.
buttonText / buttonUrl: Pflicht: Label und Ziel-URL des Buttons.
trackingId: Optional: Analytics-Kennung für den Klick.
variant: accent (Magenta-Akzent), surface (dezent hell), contrast (dunkler Hintergrund, Magenta-Button und *On-My-Way*-Teile).

Vollausprägung optionaler Felder · variant: accent

variant: surface

variant: contrast

Feed Teaser (`feed_teaser`)

Automatische Teaser aus einer Collection: blog (neueste Beiträge zuerst, Karten mit Bild, Datum, Kategorie und Auszug), jobs (aktuelle Stellenanzeigen, neueste zuerst, Karten mit Stellen-Hero und Titel) oder references (Case Studies als dreispaltiges Showcase wie Blog-Feeds).

Konfiguration (Content-Felder)

headline / subline: Optionale Sektionsüberschrift; subline wird als Eyebrow ausgegeben. Kann entfallen, wenn z. B. ein vorgelagerter split_content die Überschrift liefert.
collection: Datenquelle: blog, jobs oder references.
filterTag: Optional, nur bei blog: nur Beiträge dieser Kategorie (z. B. Robotik & KI).
filterCategory: Optional, nur bei references: nur Referenzen dieser Kategorie (z. B. Software).
limit: Optional: Anzahl Karten (1–12). Ohne Angabe zeigt blog und references 3 Karten, jobs alle Stellen.
id: Optional: HTML-id des Blocks als Sprungziel, z. B. stellen für Links auf #stellen.
buttonText / buttonUrl: Optional: Button unter den Karten, z. B. zur Magazin-Übersicht.