Article Layout

Die article Komponente stellt Textinhalte im Zeitungsstil mit mehrspaltigen CSS-Spalten dar. Der Text fließt automatisch von einer Spalte in die nächste. Mithilfe von CSS-Container-Queries wird die Anzahl der Spalten an die verfügbare Breite angepasst, sodass der Text unabhängig von der Platzierung der Komponente gut lesbar bleibt.

WCAG AA

Funktionen

Mehrspaltiges Layout: Automatischer Textfluss über mehrere Spalten hinweg.
Responsive Spalten: Die Anzahl der Spalten passt sich der verfügbaren Breite an.
Abstandssteuerung: Konfigurierbarer Abstand zwischen den Spalten.

HTML

RTL

Verwendung

Die Komponente wird über das article Tag eingebunden.

{% load insight_tags %} {# Responsive (default) - columns adapt to wrapping container width #} {% article title="News" max_columns=3 content="First paragraph..." %} {# Fixed mode - always use specified columns #} {% article max_columns=2 fixed=True content="Content..." %} {# With config object #} {% article config=article_config %}

Parameter

config (ArticleConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

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="Our company was founded in...", max_columns=3, column_gap="2rem", )

Barrierefreiheit

	WCAG AA	WCAG AAA
Status		N/A

WCAG AA (Grundlagen)

Der Artikel verwendet das semantische <article> Element.
Die Spaltenstruktur ist rein visuell und beeinflusst nicht die Lesereihenfolge für Screenreader.
Die Spaltentrennung wird mit column-rule visuell dargestellt.