Version: latest

Server-Komponente

ImageText wird bevorzugt auf dem Server gerendert. Nutze den Standard-Import (z. B. @prokodo/ui/image-text) — die Library erkennt die Umgebung automatisch.

ImageText

ImageText rendert einen zweispaltigen Abschnitt mit Bild auf der einen und Text auf der anderen Seite. Die Layout-Richtung (Bild links vs. Bild rechts) ist umkehrbar und bricht auf mobilen Geräten auf eine Spalte um.

Übersicht

import { ImageText } from "@prokodo/ui/image-text"
;<ImageText
  title="Für Performance entwickelt"
  content="Jede Komponente wird mit SSR-Unterstützung und ohne Layout-Verschiebung ausgeliefert."
  image={{ src: "/feature.jpg", alt: "Feature" }}
  reverse
/>

Live PreviewOpen in Storybook ↗

Import

import { ImageText } from "@prokodo/ui/image-text"

CSS:

import "@prokodo/ui/image-text.css"

Props

Prop	Typ	Standard	Pflicht	Beschreibung
`title`	`string`	—	✅	Haupt-Überschriftstext.
`titleProps`	`Omit<HeadlineProps, "children">`	—	—	Props für die Titel-`Headline`-Komponente.
`subTitle`	`string`	—	—	Unter-Überschriftstext.
`subTitleProps`	`Omit<HeadlineProps, "children">`	—	—	Props für die Unter-Titel-`Headline`-Komponente.
`content`	`string`	—	—	Fließtextinhalt.
`image`	`ImageProps`	—	—	Bild-Props.
`button`	`ButtonProps`	—	—	CTA-Button-Konfiguration.
`reverse`	`boolean`	`false`	—	Layout umkehren – Bild rechts.
`animatedBorder`	`{ direction?: "top-to-bottom" \| "bottom-to-top" }`	—	—	Animierter Rahmen; `direction` steuert die Fließrichtung.
`animation`	`string`	—	—	Animations-Name/-Klassen-Überschreibung.
`className`	`string`	—	—	CSS-Klasse am Root-Element.

Siehe src/components/image-text/ImageText.model.ts für den vollständigen ImageTextProps-Typ.

Design-Tokens

Anpassungen über CSS-Custom-Properties auf :root oder einem eingeschränkten Vorfahren-Element.

Token	Standard	Beschreibung
`--pk-image-text-content-color`	`var(--pk-color-muted)`	Textfarbe des Fließtext-Absatzes

reverse-Prop: Die Spaltenreihenfolge wird jetzt über die CSS-Grid-Eigenschaft order gesteuert und funktioniert korrekt auf allen Bildschirmgrößen.
animatedBorder-Prop: Wenn gesetzt, wird eine 2-spaltige animierte Verlaufslinie neben der Inhaltsspalte gerendert (rechts auf Desktop). Mit direction: "bottom-to-top" wird die Animationsrichtung umgekehrt.

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
1.3.2	Bedeutungsvolle Reihenfolge (A)	🔍 Manuell prüfen	Die Lesereihenfolge im DOM muss der beabsichtigten visuellen Darstellungsreihenfolge entsprechen.
1.4.4	Textgröße ändern (AA)	🔍 Manuell prüfen	Text muss bei 200 % Zoom ohne Hilfsmittel lesbar und nutzbar bleiben.

Testabdeckung: 2 jest-axe-Assertion(s) in 1 Testdatei(en) · 0 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 ImageText in Storybook öffnen

Quellcode

src/components/image-text/ImageText.model.ts