Thinkport

Header

Header-Komponente

Beispiel für die Header-Komponente mit allen wichtigen Props.

Codebeispiel

<Header
  id="custom-header"
  title="Lorem ipsum dolor sit"
  subtitle="Amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat."
  tagline="Lorem ipsum"
  image={{ src: '~/assets/images/default.png', alt: 'Lorem ipsum' }}
  callToAction={{ text: 'Lorem ipsum', href: '/kontakt' }}
  links={[
    { text: 'Lorem', href: '/' },
    {
      text: 'Ipsum',
      links: [
        { text: 'Dolor sit amet', href: '/leistungen/cloud-consulting' },
        { text: 'Consetetur sadipscing', href: '/leistungen/data-engineering' },
        { text: 'Elitr, sed diam', href: '/leistungen/ai-ml' }
      ]
    }
  ]}
  actions={[{ text: 'Lorem ipsum', href: '/demo' }]}
  isSticky={true}
  isDark={false}
  isFullWidth={true}
  showToggleTheme={true}
  showRssFeed={true}
  position="center"
/>

Parameter

Bezeichner	Typ	Beschreibung	Default
id	string	ID des Headers	header
title	string	Titel im Header	-
subtitle	string	Untertitel im Header	-
tagline	string	Kurze Tagline über dem Titel	-
image	object	Bildobjekt mit src und alt	{}
callToAction	object	Call-to-Action Button mit Text und Link	{}
links	array	Navigationslinks	[]
actions	array	Zusätzliche Aktionen/Buttons	[]
isSticky	boolean	Ob der Header sticky ist	false
isDark	boolean	Dunkles Farbschema	false
isFullWidth	boolean	Volle Breite	false
showToggleTheme	boolean	Theme-Umschalter anzeigen	false
showRssFeed	boolean	RSS-Feed-Icon anzeigen	false
position	string	Positionierung des Inhalts	center

Fragments

Bezeichner	Beschreibung	Default
default	Standardinhalt des Headers

Wiki-Dokumentation Quellcode