Insight UI - Konfigurationen

AccordionConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Eindeutige Tag-ID für die Identifizierung des Elements im JavaScript.	None	True
items	list[AccordionItemConfig ]	Liste der einzelnen Abschnitte.	[]	False
exclusive	bool	Bei True kann immer nur ein Abschnitt gleichzeitig geöffnet sein.	True	False

AccordionConfig( tag_id="faq-accordion", items=[ AccordionItemConfig(title="What is Django?", content="Django is..."), AccordionItemConfig(title="What is HTMX?", content="HTMX is..."), ], exclusive=True, )

AccordionItemConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
title	str	Titel des Abschnitts.	None	True
content	str	Inhalt des Abschnitts.	None	True
open	bool	Ob der Abschnitt anfangs geöffnet ist.	False	False

AccordionItemConfig(title="What is Django?", content="Django is...")

AlertConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Optionale, eindeutige Tag-ID für die Identifizierung des Elements im JavaScript.	""	False
message	str	Angezeigte Nachricht im Alert.	""	False
type	AlertType AlertType Semantic types for alerts and notifications. `info` `success` `warning` `error` Typen Dokumentation →	Art des Alerts.	info	False
dismissible	bool	Zeigt einen Button zum Schließen des Alerts am Ende des Alert-Containers an.	True	False

AlertConfig( message="Your changes have been saved successfully!", type="success", dismissible=True, )

AppCardConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
title	str	Titel der Karte.	None	True
content	str	Kartenbeschreibung.	None	True
request_url	str	Die URL, die aufgerufen werden soll, wenn auf den Titel geklickt wird.	""	False
image	ImageConfig	Kartenbild (oben quadratisch dargestellt).	None	False
tags	list[BadgeConfig ]	Liste der badge Konfigurationen für Tags.	[]	False
actions	list[ButtonConfig ]	Liste der Buttons.	[]	False

AppCardConfig( title="Analytics Dashboard", content="Real-time metrics and insights.", request_url="/apps/analytics/", image=ImageConfig(url="img/analytics.png", alt="Analytics"), tags=[BadgeConfig(label="New", type="success"), BadgeConfig(label="Featured", type="primary")], actions=[ButtonConfig(label="Open", request_url="/apps/analytics/", type="primary")], )

ArticleConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
content	str	Der Textinhalt des Artikels (kann HTML enthalten).	None	True
max_columns	int	Maximale Anzahl von Spalten (1–4). Auf schmalen Bildschirmen werden weniger Spalten angezeigt.	2	False
column_gap	str	Der Abstand zwischen den Spalten (CSS-Einheit).	"2rem"	False
title	str	Ein optionaler Titel über dem Artikel.	""	False
fixed	bool	Deaktiviert das responsive Verhalten und verwendet immer „max_columns“.	False	False

ArticleConfig( title="About Us", content="<p>Our company was founded in...</p>", max_columns=3, column_gap="2rem", )

BadgeConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
label	str	Beschriftung der Plakette.	None	True
icon	IconConfig	Ein optionales Icon, das vor dem Text angezeigt wird.	None	False
icon_end	bool	True if the icon should be shown after the label, otherwise the icon is shown in front of the label.	False	False
type	BadgeType BadgeType Extended color palette for badges, includes 'disabled' state. `primary` `secondary` `neutral` `info` `success` `warning` `danger` `disabled` Typen Dokumentation →	Defines the color of the badge.	primary	False
size	Size Size Standard size scale used for spacing, icons, and component dimensions. `xs` `s` `m` `l` `xl` Typen Dokumentation →	Defines the size of the badge.	m	False
tooltip	str	Optionaler Tooltip-Text, welcher beim Darüberfahren mit der Maus angezeigt wird.	""	False

BadgeConfig("New Feature", IconConfig("sparkles", "s"))

BrandMarkConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
primary_text	str	Erster Teil der Wortmarke (Primäre Textfarbe).	""	False
secondary_text	str	Zweiter Teil der Wortmarke (Primärfarbe).	""	False
logo	LogoConfig	Logo-Konfiguration.	None	False
logo_position	InlinePosition InlinePosition Inline positions respecting text direction (RTL-aware). `start` `end` Typen Dokumentation →	Position des Logos: entweder „Start“ oder „Ende“.	start	False
css_class	str	Optionale CSS-Klassen für das Hauptelement.	""	False

BrandMarkConfig( primary_text="Insight", secondary_text="UI", logo=LogoConfig( url="img/logo.svg", url_dark="img/logo-dark.svg", alt="Company Logo", height="2rem", ), )

BreadcrumbItemConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
text	str	Beschriftung des Links.	None	True
request_url	str	Die URL, die beim Klicken auf den Link aufgerufen werden soll.	""	False
icon	IconConfig	Optionales Symbol (in der Regel für das Startelement).	None	False

BreadcrumbItemConfig(text="Home", request_url="/", icon=IconConfig("home"))

BreadcrumbsConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
items	list[BreadcrumbItemConfig ]	Liste der Elemente der Breadcrumb-Navigation.	[]	False
htmx	HtmxConfig	Optionale HTMX-Konfiguration für die AJAX-Navigation.	None	False

BreadcrumbsConfig( items=[ BreadcrumbItemConfig(text="Home", request_url="/", icon=IconConfig("home")), BreadcrumbItemConfig(text="Products", request_url="/products/"), BreadcrumbItemConfig(text="Laptops"), ], )

BulletPointItemConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
title	str	Titel des Elements.	None	True
description	str	Zusätzliche Beschreibung des Schritts unter dem Titel.	""	False
request_url	str	Die URL, die beim Klicken auf den jeweiligen Eintrag aufgerufen werden soll.	""	False
completed	bool	Zeigt statt des Punktes einen Haken an.	False	False
current	bool	Hebt den Titel farblich hervor.	False	False

BulletPointItemConfig(title="Setup", description="Initial configuration", completed=True)

BulletPointListConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
items	list[BulletPointItemConfig ]	Liste der Bulletpoints.	[]	False
htmx	HtmxConfig	Optionale HTMX-Konfiguration für die AJAX-Navigation.	None	False

BulletPointListConfig( items=[ BulletPointItemConfig(title="Setup", description="Initial configuration", completed=True), BulletPointItemConfig(title="Configure", description="Add settings", current=True), BulletPointItemConfig(title="Deploy", description="Push to production"), ], )

ButtonConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
label	str	The text on the button or for Screenreader if the button shows only an icon.	None	True
tag_id	str	Eindeutige ID für das Targeting mit JavaScript/CSS.	""	False
request_url	str	URL for navigation (renders as ). Do not use together with htmx_config; use htmx_config.request_url instead for HTMX requests.	""	False
on_click	str	The name of the JavaScript method to be called when clicking on the button.	""	False
icon	IconConfig	Icon config for an optional icon.	None	False
icon_end	bool	True if the icon should be shown after the label, otherwise the icon is shown in front of the label.	False	False
icon_only	bool	True if only the icon should be shown. In this case the label will be used for Screenreader.	False	False
type	ButtonType ButtonType Extended color palette for buttons, includes 'link' variant. `primary` `secondary` `neutral` `info` `success` `warning` `danger` `link` Typen Dokumentation →	Defines the color of the button (primary, secondary, danger, etc.).	primary	False
size	Size Size Standard size scale used for spacing, icons, and component dimensions. `xs` `s` `m` `l` `xl` Typen Dokumentation →	Defines the size of the button.	m	False
outline	bool	True to use the outline design of the button.	False	False
subtle	bool	True to use the subtle design of the button.	False	False
round	bool	True for full rounded corners.	False	False
tooltip	str	Optional text for a tooltip shown on hover.	""	False
htmx_config	HtmxConfig	Configuration for asynchronous requests.	None	False
hidden	bool	True to render the button with CSS 'hidden' class for JS-controlled visibility.	False	False
disabled	bool	True to disable the button.	False	False
disabled_reason	str	Explanation why the button is disabled, shown as tooltip when hovering. Set to empty string to explicitly skip.	None	False
button_type	HtmlButtonType HtmlButtonType Native HTML button type attribute values. `button` `submit` `reset` Typen Dokumentation →	HTML-Typ-Attribut: „button“, „submit“ oder „reset“.	button	False
extra_classes	str	Zusätzliche CSS-Klassen, welche dem Button-Element hinzugefügt werden sollen.	""	False
data_attrs	list[DataAttrConfig ]	List of custom data attributes to add to the button element.	[]	False
external	bool	True to open link in new tab (adds target='_blank' and rel='noopener'). Only applies when request_url is set.	False	False
aria_attrs	list[DataAttrConfig ]	List of ARIA attributes to add to the button element.	[]	False
hx_attrs	list[DataAttrConfig ]	List of HTMX attributes to add to the button element.	[]	False

ButtonConfig( tag_id="my-button", label="Click Me!", request_url="", on_click="calculateSomething()", icon=IconConfig("rocket-launch", "m"), icon_end=True, icon_only=False, type="primary", size="xl", outline=False, subtle=False, round=False, tooltip="Click to calculate something", htmx_config=HtmxConfig(...), hidden=False, button_type="submit", extra_classes="w-full", data_attrs=[DataAttrConfig(name="testid", value="submit-btn")], )

CardCarouselConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
carousel_items	list[CardConfig ]	Liste der anzuzeigenden Elemente.	[]	False
autoplay	bool	Die Seiten werden alle 5 Sekunden automatisch weitergeschaltet.	False	False
show_dots	bool	Paginierungspunkte anzeigen.	True	False
show_index	bool	Aktuelle/Gesamt-Seitennummer anzeigen.	False	False
items_per_slide	int	Anzahl der pro Seite angezeigten Elemente.	1	False

CardCarouselConfig( carousel_items=[ CarouselItemConfig(title="Item 1", content="Description 1"), CarouselItemConfig(title="Item 2", content="Description 2"), ], autoplay=True, show_dots=True, items_per_slide=3, )

CardConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
title	str	Titel der Karte.	None	True
content	str	Hauptinhalt der Karte.	None	True
subtitle	str	Optionaler Untertitel.	""	False
image	ImageConfig	Optionales Bild der Karte.	None	False
actions	list[ButtonConfig ]	Liste der Buttons.	[]	False

CardConfig( title="Welcome", subtitle="Getting Started", content="Learn how to use our platform.", actions=[ ButtonConfig(label="Learn More", request_url="/docs/", type="primary"), ], )

CarouselItemConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
title	str	Titel des Elements.	""	False
content	str	Inhalt/Beschreibung des Elements.	""	False
image	ImageConfig	Optionale Bildkonfiguration.	None	False
request_url	str	Optionale Link-URL.	""	False

CarouselItemConfig(title="Item 1", content="Description 1")

ChartConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Eindeutige ID für das Diagrammelement.	None	True
dataset	ChartDatasetConfig	Diagrammdaten und Konfiguration.	ChartDatasetConfig(title='', x_axis_legend=[], series=[], data=[])	False
chart_height	int	Höhe des Diagramms in 'rem'.	24	False
aria_label	str	Barrierefreies Label, das den Zweck des Diagramms beschreibt.	""	False
show_decal	bool	Muster für farbenblinde Nutzer anzeigen.	True	False

ChartConfig( tag_id="sales-chart", dataset=ChartDatasetConfig( title="Monthly Sales", x_axis_legend=["Jan", "Feb", "Mar"], series=["Product A", "Product B"], data=[[100, 150, 200], [80, 120, 160]], ), chart_height=24, aria_label="Bar chart showing monthly sales for Product A and B", )

ChartDatasetConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
title	str	Titel des Diagramms.	""	False
x_axis_legend	list[str]	Bezeichnungen für die Kategorien der X-Achse.	[]	False
series	list[str]	Reihenbezeichnungen (für die Legende).	[]	False
data	list[list[int \| float]]	Daten für jede Reihe (Liste von Listen).	[]	False

ChartDatasetConfig( title="Weekly Sales", x_axis_legend=["Mon", "Tue", "Wed", "Thu", "Fri"], series=["Online", "In-Store"], data=[ [120, 150, 180, 130, 200], # Online [80, 90, 110, 100, 120], # In-Store ], )

ChatConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
request_url	str	URL zum Senden von Chat-Nachrichten per HTMX-POST.	None	True

ChatConfig(request_url=reverse("chat_api"))

CheckboxConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Optionale, eindeutige Tag-ID für die Identifizierung des Elements im JavaScript.	None	False
name	str	Wird für eine <form> benötigt, als Name des Request-Parameters.	None	False
label	str	Ein beschreibender Text, welcher über dem Eingabefeld angezeigt wird.	None	False
disabled	bool	True, wenn das Feld deaktiviert sein soll.	False	False
disabled_reason	str	Erklärung, warum das Eingabefeld deaktiviert ist; wird beim drüberfahren mit der Maus als Tooltip angezeigt. Mit einem leeren String, kann bewusst kein Tooltip angezeigt und die Warnmeldung deaktiviert werden.	None	False
required	bool	True, wenn das Feld ausgefüllt werden muss.	False	False
value	str	Der Wert der Checkbox (Dabei handelt es sich nicht um den Zustand, siehe dafür 'checked').	""	False
checked	bool	True, wenn die Checkbox ausgewählt sein soll.	False	False

CheckboxConfig( tag_id="accept-terms", name="accept_terms", value="accepted", label="I accept the terms and conditions", )

CheckboxGroupConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
name	str	Wird für eine <form> benötigt, als Name des Request-Parameters.	None	True
label	str	Ein beschreibender Text, welcher über den Checkbox-Elementen angezeigt wird.	""	False
items	list[CheckboxItemConfig ]	Liste der Checkbox-Elemente.	[]	False
as_row	bool	True, wenn die Checkbox-Elemente nebeneinander angezeigt werden sollen.	True	False
minimum_checked	int	Anzahl der Checkbox-Elemente, die mindestens ausgewählt sein müssen.	0	False
maximum_checked	int	Anzahl der Checkbox-Elemente, die gleichzeitig ausgewählt sein dürfen.	None	False

CheckboxGroupConfig( name="languages", label="Select languages (max 3):", as_row=True, maximum_checked=3, items=[ CheckboxItemConfig(tag_id="en", value="english", label="English"), CheckboxItemConfig(tag_id="de", value="german", label="German"), CheckboxItemConfig(tag_id="fr", value="french", label="French"), ], )

CheckboxItemConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Eindeutige ID für diese Checkbox.	None	True
label	str	Beschriftungstext.	None	True
value	str	Der Wert, welcher bei Aktivierung der Checkbox eingegeben wird.	None	True
disabled	bool	True, wenn die Checkbox deaktiviert sein soll.	False	False
disabled_reason	str	Erklärung, warum das Kontrollkästchen deaktiviert ist; wird beim drüberfahren mit der Maus als Tooltip angezeigt. Mit einem leeren String, kann bewusst kein Tooltip angezeigt und die Warnmeldung deaktiviert werden.	None	False
checked	bool	True, wenn die Checkbox ausgewählt sein soll.	False	False

CheckboxItemConfig(tag_id="en", value="english", label="English")

CornerRibbonConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
text	str	Der im Band angezeigte Text.	None	True
position	CornerPosition CornerPosition Corner positions for ribbons, badges, and overlays. `top-right` `top-left` `bottom-right` `bottom-left` Typen Dokumentation →	Eckposition: 'top-right', 'top-left', 'bottom-right', 'bottom-left'.	top-right	False
color	ColorType ColorType Base color palette for semantic coloring of components. `primary` `secondary` `neutral` `info` `success` `warning` `danger` Typen Dokumentation →	Farbvariante für das Band.	primary	False
foreground_color	ColorType \| str	Optional semantic text color. Empty uses white, or body text for neutral.		False
request_url	str	Optional URL that turns the ribbon into a link.	""	False
aria_label	str	Optional accessible label for the linked ribbon.	""	False

CornerRibbonConfig( text="Beta", position="top-right", color="warning", foreground_color="primary", request_url="/beta", )

DataAttrConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
name	str	Attributname ohne das „data-“ Präfix.	""	False
value	str	Attributwert. Leere Zeichenfolge für Marker-Attribute.	""	False

DataAttrConfig(name="testid", value="submit-btn") DataAttrConfig(name="progress-retry", value="")

DividerConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
direction	str	Ausrichtung (horizontal\|vertical).	"horizontal"	False
spacing	str	Größe der Abstände (xs\|s\|m\|l\|xl).	"m"	False
weight	str	Linienstärke (thin\|medium\|thick).	"thin"	False
style	str	Linienstil (solid\|dashed\|dotted).	"solid"	False
label	str	Optionale Beschriftung, welche in der Mitte angezeigt wird.	""	False

{% load layout_tags %} {% divider direction="horizontal" spacing="m" weight="thin" style="solid" %} {% divider label="or" %}

DropdownConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Eindeutige Tag-ID für die Identifizierung des Elements im JavaScript. Erforderlich zum Öffnen/Schließen des Dropdown-Menüs.	None	True
title	str	Beschriftung des Dropdown-Buttons.	None	True
show_arrow	bool	True zeigt einen Pfeil hinter dem Titel an.	True	False
items	list[DropdownItemConfig ]	Eine Liste der Menüelemente.	[]	False

DropdownConfig( tag_id="user-dropdown", title="Account", show_arrow=True, items=[ DropdownItemConfig(text="Profile", request_url="/profile/", icon=IconConfig(name="user")), DropdownItemConfig(text="Settings", request_url="/settings/", icon=IconConfig(name="cog-8-tooth")), DropdownItemConfig(text="Logout", request_url="/logout/", icon=IconConfig(name="arrow-left-on-rectangle")), ], )

DropdownItemConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
text	str	Beschriftung des Dropdown-Elements.	None	True
request_url	str	Die URL, die beim Klicken auf den jeweiligen Eintrag aufgerufen werden soll.	None	True
icon	IconConfig	Ein optionales Icon, welches vor der Beschriftung angezeigt wird.	None	False
htmx	HtmxConfig	Optionale HTMX-Konfiguration zum dynamischen Laden von Inhalten.	None	False

DropdownItemConfig(text="Profile", request_url="/profile/", icon=IconConfig(name="user")) DropdownItemConfig( text="Dashboard", request_url="/dashboard/", htmx=HtmxConfig(target="#content", push_url=True), )

FilterConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
name	str	Name des Filterfelds.	None	True
label	str	Beschriftung des Filters.	""	False
options	dict[str, str]	Verfügbare Filteroptionen (Dictionary, welches Werte auf Bezeichnungen abbildet).	{}	False
explanation	str	Erläuterungstext für den Tooltip.	""	False
icon	IconConfig	Optionales Icon des Filters.	None	False
selected_option	str	Derzeit ausgewählter Wert.	""	False

FilterConfig( name="status", label="Status", options={"": "All", "active": "Active", "inactive": "Inactive"}, )

FlipCardConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
title	str	Titel der Karte.	None	True
content	str	Inhalt auf der Vorderseite.	None	True
back_title	str	Titel auf der Rückseite.	""	False
back_content	str	Inhalt auf der Rückseite.	""	False
back_actions	list[ButtonConfig ]	Buttons auf der Rückseite.	[]	False
request_url	str	Die URL, die aufgerufen werden soll, wenn auf den Titel geklickt wird.	""	False
image	ImageConfig	Bild der Vorderseite.	None	False
tags	list[BadgeConfig ]	Liste der badge Konfigurationen für Tags.	[]	False
actions	list[ButtonConfig ]	Buttons auf der Vorderseite.	[]	False

FlipCardConfig( title="Product Name", content="Short description on the front.", back_title="Details", back_content="Extended product information and specs.", back_actions=[ButtonConfig(label="Contact", request_url="/contact/", type="outline-primary")], image=ImageConfig(url="img/product.png", alt="Product"), tags=[BadgeConfig(label="Sale", type="danger"), BadgeConfig(label="-20%", type="warning")], actions=[ButtonConfig(label="Buy", request_url="/buy/", type="primary")], )

FooterConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
description	FooterDescriptionConfig	Kurzbeschreibung der Anwendung mit optionalen Bild.	None	False
links	list[NavbarLinkConfig ]	Liste der Hauptnavigationspunkte der Anwendung.	[]	False
contact	FooterContactConfig	Kontaktinformationen, Link zum Impressum, Datenschutz und eine Kontaktmailadresse.	None	False
legal	LegalNoticeConfig	Rechtliche Hinweise mit Angaben zu Urheberrecht, Lizenz und Version.	None	False
version	str	Angabe zur aktuellen Version.	""	False

FooterConfig( description=FooterDescriptionConfig( title="My App", text="A modern web application.", ), links=[ NavbarLinkConfig(text="Home", request_url=reverse("index")), NavbarLinkConfig(text="Docs", request_url="https://docs.example.com"), ], contact=FooterContactConfig( mail_url="[email protected]", imprint="/imprint/", privacy="/privacy/", ), legal=LegalNoticeConfig( year=2026, holder="My Company", ), version="v1.0.0", )

FooterContactConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
mail_url	str	URL einer Kontaktmailadresse.	""	False
imprint	str	Verlinkung zu einem Impressum.	""	False
privacy	str	Verlinkung zu einer Datenschutzerklärung.	""	False

FooterContactConfig( mail_url="[email protected]", imprint="/imprint/", privacy="/privacy/", )

FooterDescriptionConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
title	str	Überschrift der Beschreibung.	""	False
text	str	Kurze Zusammenfassung der Anwendung.	""	False
logo	LogoConfig	Optionales Bild, welches unter dem Text der Beschreibung angezeigt wird.	None	False

FooterDescriptionConfig( title="My App", text="A modern web application.", )

FormConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Eindeutige ID für das Formularelement.	""	False
title	str	Der Titel des Formulars wird oben angezeigt.	""	False
description	str	Eine optionale Beschreibung unterhalb des Titels.	""	False
fields	list[FormFieldConfig ]	Liste der Formularfeldkonfigurationen.	[]	False
show_reset_button	bool	Ob eine Reset-Button angezeigt werden soll.	False	False
submit_label	str	Beschriftung für den „Absenden“ Button.	""	False
reset_label	str	Beschriftung für den „Zurücksetzen“ Button.	""	False
request_url	str	Ziel-URL für die Formularübermittlung.	""	False
method	str	HTTP-Methode für die Formularübermittlung (GET oder POST).	"post"	False
htmx_config	HtmxConfig	HTMX-Konfiguration für die AJAX-Übermittlung.	None	False

FormConfig( tag_id="contact-form", title="Contact Us", description="We'll get back to you within 24 hours.", fields=[ FormFieldConfig(input_type="text", name="name", label="Name", required=True), FormFieldConfig(input_type="email", name="email", label="E-Mail", required=True), FormFieldConfig(input_type="textarea", name="message", label="Message", rows=5), ], show_reset_button=True, htmx_config=HtmxConfig(request_url="/contact_submission", target="#form-response", swap_method="innerHTML"), )

FormFieldConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
input_type	FormFieldType FormFieldType High-level form field types for the form component. `text` `password` `email` `number` `tel` `url` `date` `textarea` `select` Typen Dokumentation →	Art des Formularfelds (Text, E-Mail, Passwort, Textbereich, Auswahlliste).	text	False
tag_id	str	Eindeutige ID für das Feld.	""	False
name	str	Name des Formularfelds.	""	False
label	str	Beschriftungstext.	""	False
placeholder	str	Platzhaltertext.	""	False
value	str	Standardwert	""	False
explanation	str	Erläuterungstext für den Tooltip.	""	False
required	bool	Ob das Feld ein Pflichtfeld ist.	False	False
disabled	bool	Ob das Feld deaktiviert ist.	False	False
options	list[str] \| dict[str, str]	Liste der Optionen für Auswahlfelder.	[]	False
selected_option	str	Derzeit ausgewählter Wert.	""	False
rows	int	Anzahl der Zeilen für Textarea-Felder.	3	False

FormFieldConfig( input_type="email", name="email", label="E-Mail", required=True, )

GenericFilterConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
filters	list[FilterConfig ]	Liste der Filterkonfigurationen.	[]	False
request_url	str	URL für den Formular-Request. Nicht zusammen mit htmx_config verwenden; stattdessen htmx_config.request_url für HTMX-Anfragen verwenden.	""	False
vertical	bool	Wenn „True“, werden die Filter vertikal angeordnet.	False	False
htmx_config	HtmxConfig	HTMX-Konfiguration für AJAX-Anfragen.	None	False

GenericFilterConfig( filters=[ FilterConfig( name="status", label="Status", options={"": "All", "active": "Active", "inactive": "Inactive"}, ), FilterConfig( name="category", label="Category", options={"": "All", "tech": "Technology", "science": "Science"}, ), ], htmx_config=HtmxConfig(target="#results", swap_method="innerHTML"), )

GeoMapConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
initial_coords	list[float]	Startpunkt auf der Karte [Breitengrad (Latitude), Längengrad (Longitude)].	[52.52, 13.405]	False
initial_zoom	int	Anfangszoomstufe.	8	False
map_height	int	Höhe der Karte in 'rem'.	36	False
datasets	list[GeoMapDatasetConfig ]	Liste der anzuzeigenden Datenebenen.	[]	False
aria_label	str	Barrierefreie Beschriftung, die den Zweck der Karte erläutert.	"Interaktive Karte"	False

GeoMapConfig( initial_coords=[52.52, 13.405], initial_zoom=10, aria_label="Standorte unserer Filialen in Deutschland", datasets=[ GeoMapDatasetConfig( name="offices", type="marker", data=[ GeoMapMarkerConfig(title="HQ", lat=52.52, lon=13.405), ], ), ], )

GeoMapDatasetConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
name	str	Name des Datensatzes.	None	True
type	GeoMapMarkerType GeoMapMarkerType Marker types for the geo map component. `marker` `circle` Typen Dokumentation →	Markierungstyp („Marker“ oder „Kreis“).	marker	False
data	list[GeoMapMarkerConfig]	Liste der Marker-Konfigurationen.	[]	False
min	int \| float	Mindestwert für die Skalierung des Kreises.	0	False
max	int \| float	Maximalwert für die Skalierung des Kreises.	100	False

GeoMapDatasetConfig( name="population", type="circle", min=100000, max=5000000, data=[ GeoMapMarkerConfig(title="Berlin", lat=52.52, lon=13.405, value=3769000), GeoMapMarkerConfig(title="Munich", lat=48.135, lon=11.582, value=1488000), ], )

GridConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
cols	int	Anzahl der Spalten (1–6). Wenn nicht festgelegt, wird auto-fit verwendet.	None	False
gap	str	Abstand zwischen den Rasterelementen (xs\|s\|m\|l\|xl).	"m"	False
min	str	Mindestbreite eines Elements für den „auto-fit“ Modus (beliebige CSS-Einheit: px, rem, em usw.).	"250px"	False
fixed	bool	Responsive-Breakpoints deaktivieren (immer die genaue Spaltenanzahl verwenden).	False	False

{% load layout_tags %} {# Auto-fit mode - items wrap based on available space #} {% grid gap="l" %} <div>Item 1</div> <div>Item 2</div> {% endgrid %} {# Auto-fit with custom minimum width #} {% grid min="15rem" gap="m" %} ... {% endgrid %} {# Fixed columns with responsive breakpoints (adapts to container width) #} {% grid cols=3 gap="m" %} ... {% endgrid %} {# Fixed columns without responsive behavior (always 4 columns) #} {% grid cols=4 fixed=True %} ... {% endgrid %}

HBoxConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
gap	str	Abstand zwischen den Kind-Elementen (xs\|s\|m\|l\|xl).	"m"	False
padding	str	Innerer Seitenabstand (xs\|s\|m\|l\|xl). Optional.	None	False
max_width	str	Maximale Breite (xs\|s\|m\|l\|xl\|fit\|full).	"full"	False
full_height	bool	Die verfügbare Höhe des übergeordneten Container ausfüllen.	False	False
h_align	str	Horizontale Ausrichtung (start\|center\|end\|between\|around\|evenly).	"start"	False
v_align	str	Vertikale Ausrichtung (start\|center\|end\|stretch\|baseline).	"stretch"	False
wrap	bool	Flex-Elemente dürfen umbrechen.	False	False

{% load layout_tags %} {% hbox gap="s" v_align="center" h_align="between" %} <span>Left</span> <span>Right</span> {% endhbox %} {# Fill parent height - useful inside page with height="full" #} {% hbox full_height=True %} {% vbox %}Column 1{% endvbox %} {% vbox %}Column 2{% endvbox %} {% endhbox %} {# With max width #} {% hbox max_width="m" class="mx-auto" %} <div>Centered container</div> {% endhbox %}

HeroConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
title	str	Titel der Hero-Section.	""	False
subtitle	str	Untertitel der Hero-Section, welche unter dem Titel angezeigt wird.	""	False
description	str	Beschreibung der Hero-Section, welche unter dem Titel und Untertitel angezeigt wird.	""	False
cta_primary	ButtonConfig	Primärer 'Call-to-Action'-Button.	None	False
cta_secondary	ButtonConfig	Sekundärer 'Call-to-Action'-Button.	None	False
background_image_url	str	URL des Hintergrundbildes.	""	False
badge_config	BadgeConfig	Eine Plakette mit Icon und Text.	None	False

HeroConfig( title="Welcome to Our Platform", subtitle="The Future of Web Development", description="Build amazing applications with modern tools.", cta_primary=ButtonConfig(label="Get Started", request_url="/signup/", type="primary"), cta_secondary=ButtonConfig(label="Learn More", request_url="/docs/", type="secondary"), badge_config=BadgeConfig(text="New!", icon=IconConfig(name="sparkles")), )

HtmxConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
request_url	str	Die URL für die HTMX-Anfrage (hx-get/hx-post).	""	False
target	str	CSS-Selektor für das Zielelement (hx-target).	""	False
swap_method	HtmxSwapMethod HtmxSwapMethod HTMX swap methods for content replacement. `innerHTML` `outerHTML` `beforebegin` `afterbegin` `beforeend` `afterend` `delete` `none` Typen Dokumentation →	Die Art und Weise, wie das Ziel ersetzt werden soll (hx-swap).	innerHTML	False
swap_settle	str	Fügt eine Verzögerung für „hx-swap“ hinzu, z. B. „300 ms“, damit CSS-Übergänge Zeit haben, ausgeführt zu werden.	""	False
trigger	str	Ereignisauslöser (hx-trigger).	"submit"	False
method	HttpMethod HttpMethod HTTP methods for requests. `get` `post` Typen Dokumentation →	HTTP-Methode („get“ oder „post“).	get	False
loading_indicator_id	str	CSS-Selektor für die Ladeanzeige (hx-indicator).	""	False
push_url	bool	Ob die URL in den Browserverlauf übernommen werden soll (hx-push-url).	False	False
confirm	str	Bestätigungsmeldung vor der Anfrage anzeigen (hx-confirm).	""	False
vals	dict[str, Any]	Zusätzliche JSON-Werte, welche in die Anfrage aufgenommen werden sollen (hx-vals).	{}	False

HtmxConfig( request_url="/api/search/", target="#results", swap_method="innerHTML", trigger="keyup changed delay:300ms", )

IconConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
name	str	Name des Insight UI Icons.	None	True
size	Size Size Standard size scale used for spacing, icons, and component dimensions. `xs` `s` `m` `l` `xl` Typen Dokumentation →	Größe des Icons. Mögliche Werte sind: 'xl', 'l', 'm', 's' oder 'xs'.	m	False
color	IconColor IconColor Color tokens for icons (semantic colors and text colors). `""` `primary` `secondary` `success` `warning` `danger` `info` `text-headline` `text-body` `text-muted` `text-link` Typen Dokumentation →	Color token for the icon (e.g., 'primary', 'danger', 'text-body').		False

IconConfig(name="home", size="s", color="primary")

ImageCarouselConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
carousel_items	list[ImageCarouselItemConfig ]	Liste der Bildkonfigurationen.	[]	False
autoplay	bool	Seiten automatisch weiterblättern.	False	False
show_dots	bool	Paginierungspunkte anzeigen.	True	False
show_index	bool	Aktuelle/Gesamt-Seitennummer anzeigen.	False	False
items_per_slide	int	Anzahl der pro Seite angezeigten Bilder.	1	False

ImageCarouselConfig( carousel_items=[ ImageCarouselItemConfig(url="/img/photo1.jpg", alt="Photo 1"), ImageCarouselItemConfig(url="/img/photo2.jpg", alt="Photo 2"), ], autoplay=True, )

ImageCarouselItemConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
url	str	Bild-URL.	None	True
alt	str	Alternativtext für das Bild.	None	True
description	str	Optionale Bildunterschrift/Beschreibung.	""	False

ImageCarouselItemConfig(url="/img/photo1.jpg", alt="Photo 1")

ImageConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
url	str	Statische, absolute, root-relative oder Daten-URL für das Bild.	None	True
alt	str	Barrierefreier Text. Leere Werte lassen das Bild als reines Dekorelement erscheinen.	""	False
url_dark	str	Optionale URL für das dunkle Design.	None	False
height	str	CSS-Höhenwert (z. B. „2rem“, „100px“).	None	False
width	str	Optionaler CSS width Wert.	None	False

ImageConfig( url="img/logo.png", alt="Company Logo", height="3rem", )

InfiniteScrollConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
request_url	str	URL zum Laden weiterer Elemente.	None	True
tag_id	str	Eindeutige ID für das Targeting mit JavaScript/CSS.	""	False
items	list[Any]	Anfangs anzuzeigende Elemente.	[]	False
page	int	Aktuelle Seitenzahl.	1	False
has_next	bool	Ob weitere Artikel verfügbar sind.	True	False
auto_fetch	bool	Wenn „True“, automatisches Laden beim Scrollen. Wenn „False“, Button anzeigen.	True	False
threshold	int	Pixel-Schwellenwert, bevor weitere Daten geladen werden.	100	False

InfiniteScrollConfig( request_url=reverse("news_list"), tag_id="news-feed", items=initial_items, page=1, has_next=True, auto_fetch=True, threshold=200, )

InfoboxConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
message	str	Beschreibende Nachricht.	None	True
info_type	AlertType AlertType Semantic types for alerts and notifications. `info` `success` `warning` `error` Typen Dokumentation →	Wichtigkeit der Nachricht.	info	False

InfoboxConfig( message="Tip: You can drag and drop files here.", info_type="info", )

InputFieldConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Optionale, eindeutige Tag-ID für die Identifizierung des Elements im JavaScript.	None	False
name	str	Wird für eine <form> benötigt, als Name des Request-Parameters.	None	False
label	str	Ein beschreibender Text, welcher über dem Eingabefeld angezeigt wird.	None	False
disabled	bool	True, wenn das Feld deaktiviert sein soll.	False	False
disabled_reason	str	Erklärung, warum das Eingabefeld deaktiviert ist; wird beim drüberfahren mit der Maus als Tooltip angezeigt. Mit einem leeren String, kann bewusst kein Tooltip angezeigt und die Warnmeldung deaktiviert werden.	None	False
required	bool	True, wenn das Feld ausgefüllt werden muss.	False	False
input_type	HtmlInputType HtmlInputType Native HTML input type attribute values. `text` `password` `email` `number` `tel` `url` `date` `time` `datetime-local` `month` `week` `color` `file` `hidden` `checkbox` `radio` Typen Dokumentation →	Der Typ des Input-Feldes, bspw.: 'text', 'password', 'date', etc..	text	False
placeholder	str	Platzhaltertext, wird im Feld angezeigt, solange es nicht ausgewählt wurde.	""	False
value	str \| int \| float	Der Wert des Eingabefeldes.	None	False
minimum	int	Kleinster numerischer Wert (für input_type='number').	None	False
maximum	int	Größter numerischer Wert (für input_type='number').	None	False
min_length	int	Minimale Anzahl an Zeichen in einem Textfeld.	None	False
max_length	int	Maximale Anzahl an Zeichen in einem Textfeld.	None	False
checked	bool	True, wenn input_type='checkbox' und die Checkbox ausgewählt sein soll.	False	False

InputFieldConfig( name="email", input_type="email", label="E-Mail Address", placeholder="[email protected]", required=True, )

LegalNoticeConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
year	int \| str	I.d.R das aktuelle Jahr (ist nicht zwingend erforderlich).		False
holder	str	Der Urheberrechtsinhaber.	""	False
source_label	str	Optionale Bezeichnung des Quellmodells, zum Beispiel „Open Source“.	""	False
license_text	str	Optionales Lizenzkennzeichen, zum Beispiel AGPL-3.0.	""	False
license_url	str	Optionale URL für das Lizenzlabel.	""	False
separator	str	Trennzeichen zwischen den einzelnen Teilen der rechtlichen Metadaten.	"·"	False
rights_text	str	Optionale Rechteerklärung.	""	False
version	str	Optionaler Versionsstring, zum Beispiel v1.2.3.	""	False

LegalNoticeConfig( year=2026, holder="Alpin Insight Solutions GmbH", source_label="Open Source", license_text="AGPL-3.0", license_url="https://github.com/org/repo/blob/main/LICENSE", version="v1.0.0", )

LegalNoticeConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
year	int \| str	I.d.R das aktuelle Jahr (ist nicht zwingend erforderlich).		False
holder	str	Der Urheberrechtsinhaber.	""	False
source_label	str	Optionale Bezeichnung des Quellmodells, zum Beispiel „Open Source“.	""	False
license_text	str	Optionales Lizenzkennzeichen, zum Beispiel AGPL-3.0.	""	False
license_url	str	Optionale URL für das Lizenzlabel.	""	False
separator	str	Trennzeichen zwischen den einzelnen Teilen der rechtlichen Metadaten.	"·"	False
rights_text	str	Optionale Rechteerklärung.	""	False
version	str	Optionaler Versionsstring, zum Beispiel v1.2.3.	""	False

LegalNoticeConfig( year=2026, holder="Alpin Insight Solutions GmbH", source_label="Open Source", license_text="AGPL-3.0", license_url="https://github.com/org/repo/blob/main/LICENSE", version="v1.0.0", )

LiveContentConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
request_url	str	URL für Inhaltsaktualisierungen.	None	True
tag_id	str	Eindeutige ID für das Targeting mit JavaScript/CSS.	""	False
interval	int	Aktualisierungsintervall in Sekunden.	10	False
initial_content	str	Initialer Inhalt vor dem ersten Update.	""	False

LiveContentConfig( request_url="/api/stats/", tag_id="live-stats", interval=30, initial_content="Loading...", )

LoginScreenConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
logo	LogoConfig	Logo-Konfiguration für das Branding im oberen Bereich des Anmeldeformulars.	None	False
show_theme_toggle	bool	Zeige die Schaltfläche zum Umschalten des Designs in der Ecke an.	True	False
show_labels	bool	Zeigt Beschriftungen über den Eingabefeldern an, statt nur Platzhalter.	False	False
forgot_password_url	str	URL zum Zurücksetzen des Passworts. Wenn das Feld leer bleibt, wird der Link ausgeblendet.	""	False
alt_login_url	str	URL für alternative Anmeldung (z. B. OIDC/SSO). Wenn das Feld leer bleibt, wird der Abschnitt ausgeblendet.	""	False
alt_login_title	str	Titel für den alternativen Anmelde-Button.	""	False
sign_up_url	str	URL für die Registrierung. Wenn das Feld leer bleibt, wird der Link ausgeblendet.	""	False

LoginScreenConfig( logo=LogoConfig(url="img/logo.svg", height="8rem"), show_theme_toggle=True, forgot_password_url=reverse("password_reset"), alt_login_url=reverse("oidc_login"), alt_login_title="Login with SSO", sign_up_url=reverse("register"), )

LogoConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
url	str	Statische, absolute, root-relative oder Daten-URLs für Bild- oder SVG-Logos.	""	False
url_dark	str	Optionale URL für Bild- und SVG-Logos im dunklen Design.	""	False
alt	str	Barrierefreier Text. Leere Werte lassen Bild- bzw. SVG-Logos als dekorative Elemente erscheinen.	""	False
icon	IconConfig	Die Icon-Konfig, welche verwendet wird, wenn der Typ „icon“ ist.	None	False
icon_name	str	Icon-Name (Alternative zur Icon-Konfig).	""	False
icon_size	str	Icon-Größe (Alternative zur Icon-Konfig).	""	False
height	str	CSS-Höhe für Bild- und SVG-Logos.	"2rem"	False
width	str	Optionale CSS-Breite für Bild- und SVG-Logos.	""	False

LogoConfig( url="img/logo.svg", url_dark="img/logo-dark.svg", alt="Company Logo", height="2rem", )

MinimalStepperConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
items	list[StepStatus]	Liste der Zustände der Prozessschritte. Mögliche Werte: 'success' (Erfolg), 'failed' (Fehlschlag), 'active' (Aktiv) und '' (Inaktiv).	[]	False
step_count	int	Anzahl der Prozessschritte. (Nur wenn 'items' nicht gesetzt ist!)	0	False
current_step	int	Aktueller Schritt des Prozesses. (Nur wenn 'items' nicht gesetzt ist!)	0	False
current_step_status	StepStatus StepStatus Status values for stepper components indicating step progress. `active` `success` `failed` `""` Typen Dokumentation →	Status des aktuellen Schritts. (Nur wenn 'items' nicht gesetzt ist!)	active	False
icon_size	Size Size Standard size scale used for spacing, icons, and component dimensions. `xs` `s` `m` `l` `xl` Typen Dokumentation →	Größe der Icons auf der Fortschrittsanzeige.	xs	False

MinimalStepperConfig(step_count=5, current_step=3)

ModalConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Eindeutige Tag-ID für die Identifizierung des Elements im JavaScript. Erforderlich zum Öffnen/Schließen des Modal-Dialogs.	None	True
title	str	Überschrift des Modal Dialogs.	None	True
description	str \| list[str]	Ein Text in der Mitte des modalen Dialogfelds. Dieser kann durch eine Erweiterung des Templates angepasst werden.	""	False
actions	list[ButtonConfig ]	Liste von Buttons, welche um unteren Ende des Dialogs angezeigt werden.	[]	False
width	int	Die maximale Breite des Dialogfensters relativ zum Bildschirm in „rem“.	32	False

ModalConfig( tag_id="delete-confirm", title="Confirm Deletion", description="Are you sure you want to delete this item? This action cannot be undone.", actions=[ ButtonConfig(label="Delete", type="danger", on_click="deleteItem()"), ButtonConfig(label="Cancel", type="secondary", data_attrs=[DataAttrConfig("insight-dismiss", "modal")]), ], width=24, )

MultiselectConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Optionale, eindeutige Tag-ID für die Identifizierung des Elements im JavaScript.	None	False
name	str	Wird für eine <form> benötigt, als Name des Request-Parameters.	None	False
label	str	Ein beschreibender Text, welcher über dem Eingabefeld angezeigt wird.	None	False
disabled	bool	True, wenn das Feld deaktiviert sein soll.	False	False
disabled_reason	str	Erklärung, warum das Eingabefeld deaktiviert ist; wird beim drüberfahren mit der Maus als Tooltip angezeigt. Mit einem leeren String, kann bewusst kein Tooltip angezeigt und die Warnmeldung deaktiviert werden.	None	False
required	bool	True, wenn das Feld ausgefüllt werden muss.	False	False
maximum	int	Anzahl der maximal ausgewählten Optionen.	None	False
show_buttons	bool	Zusätzliche Buttons für 'Alle Auswählen' und 'Alle Abwählen' Buttons anzeigen.	False	False
options	list[str] \| dict[str, str]	Liste von Werten, welche ausgewählt werden können.	[]	False
selected_options	list[str]	Liste der aktuell ausgewählten Optionen.	[]	False

MultiselectConfig( name="tags", label="Select Tags (max 5):", maximum=5, show_buttons=True, options=["Python", "Django", "JavaScript", "React", "Docker"], selected_options=["Python", "Django"], )

NavbarBrandConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
request_url	str	URL, zu welcher der Nutzer gelangt, wenn dieser auf die Marke klickt.	""	False
aria_label	str	Optionales barrierefreies Label für den Link des Logo / der Wortmarke.	""	False
mark	BrandMarkConfig	Markenzeichen mit Logo und Wortmarke.	None	False

NavbarBrandConfig( request_url=reverse("index"), mark=BrandMarkConfig( primary_text="My App", logo=LogoConfig(url="img/logo.svg", height="2rem"), ), )

NavbarConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
brand	NavbarBrandConfig	Beschreibt das Markenzeichen der Anwendung in der Navbar.	None	False
links	list[NavbarLinkConfig ]	Enthält und beschreibt die Navigationspunkte der Navbar.	[]	False
search_bar	SearchBarConfig	Konfiguration für die Suchleiste. Wenn „None“ angegeben ist, wird keine Suchleiste angezeigt.	None	False
usermenu	UserMenuConfig	Konfiguration für das Benutzer-Dropdown-Menü. Bei None werden die Standardeinstellungen verwendet (nur Abmelden).	None	False
hide_login	bool	Wenn „True“, wird der Anmelde-Button für nicht authentifizierte Benutzer ausgeblendet.	False	False
show_language_selector	bool	Zeigt ein Dropdown-Menü zum Auswählen der Anzeigesprache (sofern definiert).	False	False
show_theme_toggle	bool	Zeigt ein Button zum Wechsel zwischen der hellen und der dunklen Darstellung der Seite.	False	False

NavbarConfig( brand=NavbarBrandConfig( request_url=reverse("index"), mark=BrandMarkConfig( primary_text="My App", logo=LogoConfig(url="img/logo.svg", height="2rem"), ), ), links=[ NavbarLinkConfig(text="Home", request_url=reverse("index")), NavbarLinkConfig(text="About", request_url=reverse("about")), NavbarLinkConfig(text="Admin", request_url=reverse("admin:index"), staff_only=True), ], search_bar=SearchBarConfig( placeholder="Search...", enable_search=True, ), usermenu=UserMenuConfig( links=[ UserMenuLinkConfig(text="Profile", request_url=reverse("profile")), ], ), show_theme_toggle=True, )

NavbarLinkConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
text	str	Beschriftung des Links.	None	True
request_url	str	Die URL, die beim Klicken auf den Link aufgerufen werden soll, sofern kein Dialogfenster oder Dropdown-Menü geöffnet wird.	""	False
icon	IconConfig	Ein optionales Icon, das vor dem Text angezeigt wird.	None	False
htmx	HtmxConfig	Optionale HTMX-Konfiguration zum dynamischen Laden von Inhalten.	None	False
need_auth	bool	Der Link wird nur für angemeldete Nutzer angezeigt.	False	False
staff_only	bool	Der Link wird nur für Administratoren angezeigt.	False	False
modal	ModalConfig	Konfiguration eines modalen Dialogfensters.	None	False
dropdown	DropdownConfig	Konfiguration der Stepper.	None	False

NavbarLinkConfig(text="Home", request_url=reverse("index")) NavbarLinkConfig( text="Docs", request_url=reverse("docs"), htmx=HtmxConfig(target="#content"), )

PageConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
padding	str	Größe des inneren Seitenabstands (xs\|s\|m\|l\|xl).	"m"	False
height	str	Verhalten der Höhe (auto\|full\|peek).	"auto"	False

{% load layout_tags %} {# Standard - fits content #} {% page padding="l" %} <h1>Welcome</h1> {% endpage %} {# Full viewport height with centered content #} {% page height="full" %} {% vbox v_align="center" full_height=True %} <div>Vertically centered</div> {% endvbox %} {% endpage %} {# Peek - shows next section is coming #} {% page height="peek" %} <h1>Hero Section</h1> {% endpage %}

PageHeaderConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
title	str	Der Titel der Startseite, welcher in der Primärfarbe deutlich hervorgehoben angezeigt wird.	None	True
chapter	str	Optionales Kapitel, das vor dem Titel in dezenter Darstellung angezeigt wird.	""	False
description	str \| list[str]	Eine optionale Beschreibung unterhalb des Titels.	""	False
badges	list[BadgeConfig ]	Optionale Liste von Badges, welche unterhalb der Beschreibung angezeigt wird.	[]	False
buttons	list[ButtonConfig ]	Optionale Liste von Aktionsschaltflächen, welche unterhalb der Badges angezeigt wird.	[]	False

PageHeaderConfig( title="Page Header", chapter="Insight UI", description="A header component for documentation pages.", badges=[BadgeConfig(label="New", type="success")], buttons=[ButtonConfig(label="Get Started", request_url="/start")], )

PaginationConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
request_url	str	URL für den Seitenwechsel.	None	True
current_page	Page	Ein von Django erzeugtes Pagination-Objekt der aktuellen Seite.	None	True
surrounding_pages	list[int]	Liste der anzuzeigenden benachbarten Seitenzahlen. -1 für Auslassungspunkte („...“).	[]	False
ipp_config	PaginationIppConfig	Optionale Konfiguration für die Auswahl der Anzahl der Einträge pro Seite.	None	False

PaginationConfig( request_url="/product-list/", current_page=paginator.page(1), surrounding_pages=[1, 2, 3, -1, 10], ipp_config=PaginationIppConfig(options=[10, 25, 50]), )

PaginationIppConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
name	str	Name des Formularfelds.	"ipp"	False
label	str	Titel des Auswahlfelds.	"Items per page"	False
explanation	str	Erläuterungstext für den Tooltip.	""	False
options	list[int]	Verfügbare Seitengrößenoptionen (Elemente pro Seite).	[10, 20, 30]	False
selected_option	int	Derzeit ausgewählter Wert.	None	False

PaginationIppConfig( name="ipp", label="Items per Page", explanation="Choose amount of items per page.", options=[10, 20, 30], selected_option=10, )

ProgressBarConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Eindeutige ID für das Targeting mit JavaScript/CSS.	""	False
label	str	Optionale Überschrift/Bezeichnung für den Fortschrittsbalken.	""	False
request_url	str	URL zur Abfrage von Fortschrittsmeldungen. Erwartetes JSON: {"value": 75}.	""	False
interval	int	Abfrageintervall in Millisekunden.	1000	False
sse_url	str	URL für Server-Sent Events zur Anzeige von Fortschrittsmeldungen in Echtzeit.	""	False
min_value	int	Mindestwert.	0	False
max_value	int	Maximalwert.	100	False
value	int	Aktueller Fortschritt in Prozent.	0	False
show_value	bool	Ob der Wert als Text angezeigt werden soll.	True	False
hide_on_complete	bool	Fortschrittsbalken ausblenden, sobald der maximale Wert erreicht wurde.	False	False
complete_delay	int	Verzögerung in ms, bevor das Element nach Abschluss ausgeblendet wird.	500	False
stop_on_error	bool	Beende den Polling-Vorgang/SSE, sobald ein Fehler auftritt.	False	False
show_cancel	bool	Zeige während des Vorgangs einen „Abbrechen“ Button an.	False	False
cancel_label	str	Beschriftung für den „Abbrechen“ Button.	""	False
cancel_url	str	Optionale URL, die beim Abbrechen aufgerufen werden soll (POST-Request).	""	False
show_retry	bool	Zeige einen „Erneut versuchen“ Button an, wenn ein Fehler auftritt.	False	False
retry_label	str	Beschriftung für den „Erneut versuchen“ Button.	""	False

# Static progress bar ProgressBarConfig( tag_id="download", label="Download Progress", value=97, show_value=True, ) # Auto-updating via polling with cancel button ProgressBarConfig( tag_id="server-task", label="Processing...", request_url="/api/task/123/progress/", interval=500, show_cancel=True, cancel_url="/api/task/123/cancel/", ) # With retry on error ProgressBarConfig( tag_id="upload", label="Uploading...", request_url="/api/upload/progress/", show_retry=True, )

QueryBuilderConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
model_fields	list[QueryBuilderFieldConfig ]	Liste der Modellfelder mit möglichen Operatoren.	[]	False

QueryBuilderConfig( model_fields=[ QueryBuilderFieldConfig( field="title", label="Title", type="text", operations={"iexact": "is exact", "icontains": "contains"}, ), QueryBuilderFieldConfig( field="created_at", label="Created At", type="date", operations={"gte": "after", "lte": "before"}, ), ], )

QueryBuilderFieldConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
field	str	Name des Datenbankfelds.	None	True
label	str	Anzeigename.	None	True
type	FilterFieldType FilterFieldType Field types for query builder and filter components. `text` `number` `date` `datetime` `time` `boolean` `choice` Typen Dokumentation →	Feldtyp für die Filterung.	text	False
operations	dict[str, str]	Verfügbare Operationen (Dictionary mit Operation → Label).	{}	False
values	dict[str, str]	Vordefinierte Werte (optional).	{}	False

QueryBuilderFieldConfig( field="title", label="Title", type="text", operations={ "iexact": "is exact", "icontains": "contains", "istartswith": "starts with", }, )

RadioBlockConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
name	str	Das gemeinsame HTML-Attribut „name“ für alle Radio-Buttons in dieser Gruppe.	None	True
label	str	Ein beschreibender Text, welcher über den Radio-Elementen angezeigt wird.	""	False
items	list[RadioItemConfig ]	Eine Liste der Radio-Elemente.	[]	False
integrated	bool	True, wenn sich die Gruppe in einer <form> befindet. Bei False bekommt die Gruppe ihre eigene <form>.	False	False
as_row	bool	True, wenn die Radio-Elemente nebeneinander angezeigt werden sollen.	True	False
request_url	str	Die URL, an welche der Request beim Klick auf einen der Radio-Button gesendet werden soll.	""	False
hx_target_id	str	Die ID des HTML-Tags, welcher beim Wechseln des Radio-Buttons ausgetauscht werden soll.	""	False
hx_swap_method	HtmxSwapMethod HtmxSwapMethod HTMX swap methods for content replacement. `innerHTML` `outerHTML` `beforebegin` `afterbegin` `beforeend` `afterend` `delete` `none` Typen Dokumentation →	Die Art und Weise, wie das Ziel ersetzt werden soll.	outerHTML	False
method	str	Name der JavaScript Methode, welche beim Anklicken auf einen der Radio-Button ausgeführt werden soll.	""	False
current_value	str	Der Wert des aktuell ausgewählten Radio-Buttons.	""	False

RadioBlockConfig( name="view", items=[ RadioItemConfig(tag_id="card", value="card", icon=IconConfig(name="squares-2x2")), RadioItemConfig(tag_id="table", value="table", icon=IconConfig(name="list-bullet")), ], current_value="card", hx_target_id="content-area", )

RadioGroupConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
name	str	Das gemeinsame HTML-Attribut „name“ für alle Radio-Buttons in dieser Gruppe.	None	True
label	str	Ein beschreibender Text, welcher über den Radio-Elementen angezeigt wird.	""	False
items	list[RadioItemConfig ]	Eine Liste der Radio-Elemente.	[]	False
as_row	bool	True, wenn die Radio-Elemente nebeneinander angezeigt werden sollen.	True	False
current_value	str	Der Wert des aktuell ausgewählten Radio-Buttons.	""	False

RadioGroupConfig( name="model", label="Select AI Model:", items=[ RadioItemConfig(tag_id="gpt4", value="gpt-4", label="GPT-4"), RadioItemConfig(tag_id="claude", value="claude", label="Claude"), RadioItemConfig(tag_id="llama", value="llama", label="LLaMA", disabled=True), ], current_value="claude", )

RadioItemConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
value	str	Wert des jeweiligen Radio-Buttons.	None	True
tag_id	str	Optionale, eindeutige Tag-ID für die Identifizierung des Elements im JavaScript.	""	False
label	str	Beschriftung des jeweiligen Radio-Buttons.	""	False
icon	IconConfig	Optionales Icon, welches vor der Beschriftung angezeigt wird.	None	False
disabled	bool	True, wenn der Radio-Button deaktiviert sein soll.	False	False
disabled_reason	str	Erklärung, warum der Radio-Button deaktiviert ist; wird beim drüberfahren mit der Maus als Tooltip angezeigt. Mit einem leeren String, kann bewusst kein Tooltip angezeigt und die Warnmeldung deaktiviert werden.	None	False

RadioItemConfig(value="gpt-4", tag_id="gpt4", label="GPT-4")

SearchBarConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
request_url	str	URL für den Formular-Request. Nicht zusammen mit htmx_config verwenden; stattdessen htmx_config.request_url für HTMX-Anfragen verwenden.	""	False
simple	bool	Wenn „True“, wird ein kompakter/minimalistischer Stil dargestellt.	False	False
search_query	str	Wert der ursprünglichen Suchanfrage.	""	False
placeholder	str	Platzhaltertext für das Sucheingabefeld.	""	False
button_label	str	Beschriftung für die Suchschaltfläche.	""	False
htmx_config	HtmxConfig	HTMX-Konfiguration für AJAX-Anfragen.	None	False
enable_search	bool	Wenn True, wird die clientseitige Suche in der Dokumentation mit Fuse.js aktiviert.	False	False
search_index_url	str	Optionale URL für den Suchindex der clientseitigen Dokumentationssuche.	""	False

SearchBarConfig( request_url="/search_products/", placeholder="Search products...", button_label="Find", simple=False, )

SectionConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
id	str	Anker-ID für die Navigation (fügt scroll-mt-24 für den Versatz der festen Navigationsleiste hinzu).	""	False
gap	str	Abstand zwischen den Kind-Elementen (xs\|s\|m\|l\|xl).	"m"	False
aria_label	str	Barrierefreies Label für den Abschnitt.	""	False
aria_labelledby	str	ID des Elements, welches diesen Abschnitt kennzeichnet.	""	False

{% load layout_tags %} {% section id="installation" gap="m" %} <h2>Installation</h2> <p>Follow these steps...</p> {% endsection %} {# With accessibility label #} {% section id="features" aria_label="Product features" %} ... {% endsection %}

SelectConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Optionale, eindeutige Tag-ID für die Identifizierung des Elements im JavaScript.	None	False
name	str	Wird für eine <form> benötigt, als Name des Request-Parameters.	None	False
label	str	Ein beschreibender Text, welcher über dem Eingabefeld angezeigt wird.	None	False
disabled	bool	True, wenn das Feld deaktiviert sein soll.	False	False
disabled_reason	str	Erklärung, warum das Eingabefeld deaktiviert ist; wird beim drüberfahren mit der Maus als Tooltip angezeigt. Mit einem leeren String, kann bewusst kein Tooltip angezeigt und die Warnmeldung deaktiviert werden.	None	False
required	bool	True, wenn das Feld ausgefüllt werden muss.	False	False
explanation	str	Eine kurze Beschreibung des Filters, welche in einem Tooltip angezeigt wird.	""	False
options	list[str] \| dict[str, str]	Liste von Werten, welche ausgewählt werden können.	[]	False
selected_option	str	Wert (Der Key-Wert, falls die Optionen als Dict übergeben wurden) der aktuell ausgewählten Option.	""	False

SelectConfig( name="country", label="Country", options={"de": "Germany", "fr": "France", "uk": "United Kingdom"}, selected_option="de", )

SidebarCategoryConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
caption	str	Text der Kategorieüberschrift.	None	True
icon	IconConfig	Optionales Kategorie-Icon.	None	False
items	list[SidebarItemConfig ]	Liste der Elemente in dieser Kategorie.	[]	False

SidebarCategoryConfig( caption="Account", items=[ SidebarItemConfig(text="Profile", request_url=reverse("profile")), SidebarItemConfig(text="Security", request_url=reverse("security")), ], )

SidebarConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
side	str	Position der Sidebar („left“ oder „right“). Wird automatisch anhand des Blockkontexts ermittelt.	"right"	False
static	bool	Wenn True, ist die Sidebar fixiert; wenn False, wird diese als Drawer dargestellt (ein-/ausklappbar).	True	False
width	str	Breite der Sidebar („narrow“, „normal“, „wide“).	"normal"	False
mobile_behavior	str	Verhalten auf mobilen Viewports („hidden“, „drawer“).	"hidden"	False
sidebar_data	SidebarDataConfig	Inhalt für die Navigationsvariante (wird nur mit „sidebar_nav.html“ verwendet).	None	False

{# Basic usage inside sidebar blocks #} {% block sidebar_left %} {% sidebar %} {% include "components/sidebar_nav.html" with sidebar_data=nav_data %} {% endsidebar %} {% endblock %} {# With explicit parameters #} {% sidebar side="right" width="wide" mobile_behavior="drawer" %} <h2>Table of Contents</h2> <nav>...</nav> {% endsidebar %}

SidebarDataConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
title	str	Titel der Sidebar.	""	False
icon	IconConfig	Optionales Titel-Icon.	None	False
links	list[SidebarItemConfig ]	Haupt-Navigationslinks werden vor den Kategorien angezeigt.	[]	False
categories_title	str	Optionale Überschrift über dem Kategorien Bereich.	""	False
categories	list[SidebarCategoryConfig ]	Liste der Navigationskategorien.	[]	False

SidebarDataConfig( title="Documentation", links=[ SidebarItemConfig(text="Installation", request_url=reverse("install")), SidebarItemConfig(text="Getting Started", request_url=reverse("start")), ], categories_title="Components", categories=[ SidebarCategoryConfig( caption="Account", items=[ SidebarItemConfig(text="Profile", request_url=reverse("profile")), SidebarItemConfig(text="Security", request_url=reverse("security")), ], ), ], )

SidebarItemConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
text	str	Beschriftung des Elemente.	None	True
request_url	str	Die URL, die beim Klicken auf das Element aufgerufen werden soll.	""	False
icon	IconConfig	Ein optionales Icon, das vor dem Text angezeigt wird.	None	False
htmx	HtmxConfig	HTMX-Konfiguration für AJAX-Seitenwechsel.	None	False
badge	BadgeConfig	Ein optionales Badge, welches nach dem Text angezeigt wird.	None	False

SidebarItemConfig(text="Profile", request_url=reverse("profile"))

SliderConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Optionale, eindeutige Tag-ID für die Identifizierung des Elements im JavaScript.	None	False
name	str	Wird für eine <form> benötigt, als Name des Request-Parameters.	None	False
label	str	Ein beschreibender Text, welcher über dem Eingabefeld angezeigt wird.	None	False
disabled	bool	True, wenn das Feld deaktiviert sein soll.	False	False
disabled_reason	str	Erklärung, warum das Eingabefeld deaktiviert ist; wird beim drüberfahren mit der Maus als Tooltip angezeigt. Mit einem leeren String, kann bewusst kein Tooltip angezeigt und die Warnmeldung deaktiviert werden.	None	False
required	bool	True, wenn das Feld ausgefüllt werden muss.	False	False
value	int	Der Wert des Range-Sliders (nur im Ein-Regler-Modus).	None	False
minimum	int	Kleinster einzustellender Wert des Range-Sliders.	0	False
maximum	int	Größter einzustellender Wert des Range-Sliders.	100	False
step_size	int	Die Größe der Schritte, um welche sich der Wert beim Bewegen des Range-Sliders verändert.	1	False
items	list[str]	Eine Liste von Texten, welche als Legende unter dem Slider angezeigt werden.	[]	False
legend_mode	SliderLegendMode SliderLegendMode Legend display modes for the range slider component. `static` `skip` `rotate` Typen Dokumentation →	Steuert das Verhalten der Legende. Optionen: 'static' (Standard) – keine Anpassung; 'skip' – blendet Legendenelemente schrittweise aus, wenn der Platz begrenzt ist; 'rotate' – dreht den Legendentext vertikal, wenn der Platz begrenzt ist.	static	False
dual	bool	True, um den Zwei-Regler-Modus zur Auswahl eines Bereichs mit Minimal- und Maximalwerten zu aktivieren.	False	False
value_min	int	Der Mindestwert im Zwei-Regler-Modus. Standardwert ist minimum.	None	False
value_max	int	Der Maximalwert im Zwei-Regler-Modus. Standardwert ist maximum.	None	False

SliderConfig( name="price", label="Price Range", minimum=0, maximum=1000, dual=True, value_min=200, value_max=800, items=["0€", "250€", "500€", "750€", "1000€"], )

SpacerConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
size	str	Größe des Spacer (xs\|s\|m\|l\|xl).	"m"	False

{% load layout_tags %} {% spacer size="l" %}

StatusScreenConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
title	str	Hauptstatusbezeichnung.	None	True
description	str \| list[str]	Beschreibung des Status.	""	False
status	AlertType AlertType Semantic types for alerts and notifications. `info` `success` `warning` `error` Typen Dokumentation →	Art des Status.	info	False
brand	BrandMarkConfig	Optionales Markenzeichen, welches über der Karte abgebildet ist.	None	False
notice_title	str	Optionale Überschrift für den Hinweis.	""	False
notice	str	Optionaler Hinweis.	""	False
primary_action	ButtonConfig	Primärer 'Call-to-Action'-Button.	None	False
secondary_action	ButtonConfig	Sekundärer 'Call-to-Action'-Button.	None	False
actions	list[ButtonConfig ]	Zusätzliche Buttons.	[]	False
css_class	str	Optionale CSS-Klassen für den äußeren Abschnitt.	""	False
card_css_class	str	Optionale CSS-Klassen für die Statuskarte.	""	False

StatusScreenConfig( title="Sign-in failed", description="The SSO process could not be completed.", status="error", notice_title="What happened?", notice="Please try again or contact support if the issue persists.", primary_action=ButtonConfig(label="Try again", request_url="/login/", type="primary"), secondary_action=ButtonConfig(label="Back to start", request_url="/", type="secondary"), )

StepperConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
items	list[StepperItemConfig ]	Liste der Schrittkonfigurationen.	[]	False

StepperConfig( items=[ StepperItemConfig(title="Address", description="Enter shipping address", success=True), StepperItemConfig(title="Payment", description="Select payment method", current=True), StepperItemConfig(title="Review", description="Review and confirm"), ], )

StepperItemConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
title	str	Titel des Schritts.	None	True
description	str	Zusätzliche Beschreibung des Schritts unter dem Titel.	""	False
request_url	str	URL, welche aufgerufen wird, wenn der Nutzer auf den Titel des Schritts klickt.	""	False
success	bool	Zeigt statt der Schrittzahl einen Haken an.	False	False
failed	bool	Zeigt statt der Schrittzahl ein Kreuz (X) an.	False	False
current	bool	Hebt den Titel farblich hervor und lässt den Text pulsieren.	False	False

StepperItemConfig(title="Address", description="Enter shipping address", success=True)

SurfaceConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
variant	str	Darstellungsstil (surface\|raised\|outline).	"surface"	False
padding	str	Größe des inneren Seitenabstands (xs\|s\|m\|l\|xl).	"m"	False
radius	str	Größe der Rundungen der Ecken (xs\|s\|m\|l\|xl).	"m"	False
id	str	Das HTML-Attribut „id“ für Ankerlinks und JavaScript-Targeting.	""	False
href	str	URL für eine anklickbare Fläche (wird als statt als dargestellt).	""	False
external	bool	Link in einem neuen Tab öffnen (nur wenn „href“ angegeben ist).	False	False

{% load layout_tags %} {# Static container #} {% surface variant="raised" padding="l" %} <h3>Card Title</h3> <p>Content here</p> {% endsurface %} {# Clickable surface (renders as <a>) #} {% surface href="/components" padding="m" %} <span class="group-hover:text-insight-primary">Browse Components</span> {% endsurface %} {# External link #} {% surface href="https://example.com" external=True %} External Resource {% endsurface %}

TabConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Eindeutige Tag-ID für die Identifizierung des Elements im JavaScript.	None	True
title	str	Beschriftung des Tab-Buttons.	None	True
request_url	str	Die URL, welche beim Anklicken auf den Reiter aufgerufen werden soll.	None	True
active	bool	Ob diese Registerkarte initial aktiv ist.	False	False

TabConfig(tag_id="general", title="General", request_url=reverse("conf_general"), active=True)

TableConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
headers	list[str]	Liste der Spaltenüberschriften.	[]	False
rows	list[list[str]]	Liste der Zeilendaten (jede Zeile ist eine Liste von Zellenwerten).	[]	False
caption	str	Optionale Tabellenüberschrift.	""	False
empty_msg	str	Meldung, die angezeigt wird, wenn keine Daten verfügbar sind.	"Keine Daten verfügbar."	False

TableConfig( caption="User List", headers=["Name", "Email", "Status"], rows=[ ["John Doe", "[email protected]", "Active"], ["Jane Smith", "[email protected]", "Inactive"], ], empty_msg="No users found.", )

TabsConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Eindeutige Tag-ID für die Identifizierung des Elements im JavaScript.	None	True
tabs	list[TabConfig ]	Liste der Tab-Buttons.	None	True
label	str	Nicht sichtbarer, zusätzlicher Titel, welcher nur von Screenreadern vorgelesen wird.	""	False

TabsConfig( tag_id="settings-tabs", label="Settings", tabs=[ TabConfig(tag_id="general", title="General", request_url=reverse("conf_general"), active=True), TabConfig(tag_id="security", title="Security", request_url=reverse("conf_security")), TabConfig(tag_id="notifications", title="Notifications", request_url=reverse("conf_notifications")), ], )

TextareaConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Optionale, eindeutige Tag-ID für die Identifizierung des Elements im JavaScript.	None	False
name	str	Wird für eine <form> benötigt, als Name des Request-Parameters.	None	False
label	str	Ein beschreibender Text, welcher über dem Eingabefeld angezeigt wird.	None	False
disabled	bool	True, wenn das Feld deaktiviert sein soll.	False	False
disabled_reason	str	Erklärung, warum das Eingabefeld deaktiviert ist; wird beim drüberfahren mit der Maus als Tooltip angezeigt. Mit einem leeren String, kann bewusst kein Tooltip angezeigt und die Warnmeldung deaktiviert werden.	None	False
required	bool	True, wenn das Feld ausgefüllt werden muss.	False	False
placeholder	str	Platzhaltertext, wird im Feld angezeigt, solange es nicht ausgewählt wurde.	""	False
value	str	Der Wert des Eingabefeldes.	""	False
rows	int	Bestimmt die Anzahl der Zeilen.	3	False
cols	int	Bestimmt die Anzahl an Buchstaben in einer Zeile.	None	False

TextareaConfig( name="message", label="Your Message", placeholder="Enter your message here...", rows=5, required=True, )

ThreeDCarouselConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Eindeutige ID für das Karussell.	None	True
carousel_items	list[CarouselItemConfig ]	Liste der anzuzeigenden Elemente.	[]	False
velocity	int	Drehgeschwindigkeit.	1000	False
tilt	int	Neigungswinkel der Kamera.	0	False
face_camera	bool	Wenn „True“, sind die Elemente immer zur Kamera ausgerichtet.	False	False

ThreeDCarouselConfig( tag_id="product-showcase", carousel_items=[...], velocity=1000, tilt=15, face_camera=True, )

ToggleConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Optionale, eindeutige Tag-ID für die Identifizierung des Elements im JavaScript.	None	False
name	str	Wird für eine <form> benötigt, als Name des Request-Parameters.	None	False
label	str	Ein beschreibender Text, welcher über dem Eingabefeld angezeigt wird.	None	False
disabled	bool	True, wenn das Feld deaktiviert sein soll.	False	False
disabled_reason	str	Erklärung, warum das Eingabefeld deaktiviert ist; wird beim drüberfahren mit der Maus als Tooltip angezeigt. Mit einem leeren String, kann bewusst kein Tooltip angezeigt und die Warnmeldung deaktiviert werden.	None	False
required	bool	True, wenn das Feld ausgefüllt werden muss.	False	False
value	str	Der Wert des Toggle-Buttons.	""	False
icon	IconConfig	Optionale Icon Konfiguration.	None	False
checked	bool	True, wenn der Toggle-Button ausgewählt sein soll.	False	False
switch	bool	True, wenn der Toggle-Button wie ein typischer Switch-Select aussehen soll.	False	False
method	str	Name der JavaScript Methode, welche beim Anklicken auf den Toggle-Button ausgeführt werden soll.	""	False

ToggleConfig( tag_id="dark-mode", name="dark_mode", label="Dark Mode", switch=True, )

ToggleViewConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
tag_id	str	Eindeutige ID für die Komponente.	None	True
cards	list[CardConfig ]	Die anzuzeigenden Karten.	[]	False
table_config	TableConfig	Konfiguration der Stepper.	None	False
view_radio_config	RadioBlockConfig	Konfiguration des Radio-Blocks für den Ansichtswechsel.	None	False
current_view	ToggleViewType ToggleViewType View types for the toggle view component. `card` `table` `carousel` Typen Dokumentation →	Aktuell aktive Ansicht („Karte“, „Tabelle“, „Karussell“).	card	False

ToggleViewConfig( tag_id="products-view", cards=products_list, table_config=TableConfig(headers, rows), view_radio_config=RadioBlockConfig( name="view", items=[ RadioItemConfig(tag_id="card", value="card", icon=IconConfig(name="squares-2x2")), RadioItemConfig(tag_id="table", value="table", icon=IconConfig(name="list-bullet")), ], ), current_view="card", )

UserMenuConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
links	list[UserMenuLinkConfig ]	Weitere Links, welche über dem Abmelde-Button angezeigt werden sollen.	[]	False
avatar_url	str	URL zum Avatarbild des Benutzers.	""	False
avatar_alt	str	Alternativtext für das Avatar-Bild.	""	False

UserMenuConfig( links=[ UserMenuLinkConfig(text="Profile", request_url=reverse("profile"), icon=IconConfig("user", "s")), UserMenuLinkConfig(text="Settings", request_url=reverse("settings"), icon=IconConfig("cog-6-tooth", "s")), ], avatar_url=user.profile.avatar_url, )

UserMenuLinkConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
text	str	Beschriftung des Links.	None	True
request_url	str	URL, zu welcher der Nutzer gelangt, wenn dieser auf den Link klickt.	None	True
icon	IconConfig	Ein optionales Icon, das vor dem Text angezeigt wird.	None	False
staff_only	bool	Der Link wird nur für Administratoren angezeigt.	False	False

UserMenuLinkConfig(text="Profile", request_url=reverse("profile"), icon=IconConfig("user", "s"))

VBoxConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
gap	str	Abstand zwischen den Kind-Elementen (xs\|s\|m\|l\|xl).	"m"	False
padding	str	Innerer Seitenabstand (xs\|s\|m\|l\|xl). Optional.	None	False
max_width	str	Maximale Breite (xs\|s\|m\|l\|xl\|fit\|full).	"full"	False
full_height	bool	Die verfügbare Höhe des übergeordneten Container ausfüllen.	False	False
h_align	str	Horizontale Ausrichtung (start\|center\|end\|stretch\|baseline).	"stretch"	False
v_align	str	Vertikale Ausrichtung (start\|center\|end\|between\|around\|evenly).	"start"	False

{% load layout_tags %} {% vbox gap="m" h_align="stretch" %} <div>Top</div> <div>Bottom</div> {% endvbox %} {# Fill parent height and center content vertically #} {% vbox full_height=True v_align="center" %} <div>Vertically centered</div> {% endvbox %} {# With max width #} {% vbox max_width="l" class="mx-auto" %} <article>Content</article> {% endvbox %}

WebSocketConfig

Name	Typ	Beschreibung	Standardwert	Erforderlich
request_url	str	URL des Websocket-API Endpunkts.	None	True
tag_id	str	Container-ID zum Ansprechen von Unterelementen anhand ihrer ID (z. B. über HTMX-Out-of-Band-Swaps). Optional; ohne diese ID funktioniert die Verbindung zwar weiterhin, der Server kann jedoch keine bestimmten Unterelemente anhand ihrer ID ansprechen.	""	False
initial_content	str	Initialer Inhalt.	""	False

WebSocketConfig( request_url="/ws/chat/", tag_id="chat-stream", initial_content="Connecting...", )

Konfigurationen Komponenten

Schnellnavigation

Konfigurationsübersicht

AccordionConfig

AccordionItemConfig

AlertConfig

AppCardConfig

ArticleConfig

BadgeConfig

BrandMarkConfig

BreadcrumbItemConfig

BreadcrumbsConfig

BulletPointItemConfig

BulletPointListConfig

ButtonConfig

CardCarouselConfig

CardConfig

CarouselItemConfig

ChartConfig

ChartDatasetConfig

ChatConfig

CheckboxConfig

CheckboxGroupConfig

CheckboxItemConfig

CornerRibbonConfig

DataAttrConfig

DividerConfig

DropdownConfig

DropdownItemConfig

FilterConfig

FlipCardConfig

FooterConfig

FooterContactConfig

FooterDescriptionConfig

FormConfig

FormFieldConfig

GenericFilterConfig

GeoMapConfig

GeoMapDatasetConfig

GridConfig

HBoxConfig

HeroConfig

HtmxConfig

IconConfig

ImageCarouselConfig

ImageCarouselItemConfig

ImageConfig

InfiniteScrollConfig

InfoboxConfig

InputFieldConfig

LegalNoticeConfig

LegalNoticeConfig

LiveContentConfig

LoginScreenConfig

LogoConfig

MinimalStepperConfig

ModalConfig

MultiselectConfig

NavbarBrandConfig

NavbarConfig

NavbarLinkConfig

PageConfig

PageHeaderConfig

PaginationConfig

PaginationIppConfig

ProgressBarConfig

QueryBuilderConfig

QueryBuilderFieldConfig

RadioBlockConfig

RadioGroupConfig

RadioItemConfig

SearchBarConfig

SectionConfig

SelectConfig

SidebarCategoryConfig

SidebarConfig

SidebarDataConfig

SidebarItemConfig

SliderConfig

SpacerConfig