Footer (Gesprächs-CTA) — UI-Kit-Galerie

Beispiele

Dunkles Band (Original-Muster): große Nav-Links + Gesprächs-CTA, Trennlinie, Rechtliches/Firma/Social

Eigenschaften

Prop	Typ	Default	Builder-Label
tone	string: dark \| gray \| light	"dark"	Ton (Theme liefert die Werte)
nav	array	[]	Große Nav-Links
line1	string	""	Gesprächs-Zeile (leicht)
line2	string	""	Gesprächs-Zeile (fett)
ctaLabel	string	""	CTA-Text-Link (Akzentfarbe)
ctaUrl	string	""	CTA-Ziel
legal	array	[]	Rechtliche Links (gestapelt)
company	string	""	Firmenname (Mitte)
address	string	""	Adresse (Mitte)
social	array	[]	Social-Links (Icon-Name aus ui.icon + Ziel)
copyright	string	""	Copyright-Zeile

* Pflicht-Prop

Genutzte Design-Tokens

border.hairlinecolor.action.primarycolor.action.primary-hovercolor.band.darkcolor.band.dark-mutedcolor.band.dark-textcolor.band.graycolor.band.gray-mutedcolor.band.gray-textcolor.text.defaultcolor.text.mutedfont.family.defaultfont.size.displaylayout.containerleading.baseleading.tightsize.10size.4size.6size.8text.lgtext.mdweight.lightweight.semibold

LLM-Notizen

section.footer-cta

Großer Website-Footer als Band: große Nav-Links + Gesprächs-CTA, Trennlinie, Rechtliches/Firma/Social, Copyright. Ton-neutral (tone), Linien/leise Töne werden per color-mix aus der Band-Textfarbe abgeleitet.

Wann nutzen

Personal-/Marken-Sites mit Gesprächs-Abschluss („Lass uns reden"). Für Portal-/Shop-Footer mit Link-Spalten: section.footer (dort asCard für die eingerückte Karten-Variante).

Wichtige Props

tone (dark typisch), nav (große Links), line1/line2 (Gesprächs-Zeilen leicht/fett), ctaLabel/ctaUrl (Akzent-Textlink), legal, company/address, social = [{icon: linkedin|facebook, href}], copyright.

Beispiel-Node


{
  "definition": "section.footer-cta",
  "props": {
    "tone": "dark",
    "nav": [{"label": "Start", "href": "/"}],
    "line1": "Ein Gespräch als erster Schritt.",
    "line2": "Lass uns reden.",
    "ctaLabel": "Jetzt Termin vereinbaren", "ctaUrl": "/termin/",
    "company": "Acme GmbH", "copyright": "© 2026 Acme GmbH"
  }
}