Block · Blocks (Landing Page)

Media Split (Block)

Ein Argument mit Bild: Bild links oder rechts, daneben Eyebrow, zweitonige Headline, ein Absatz und bis zu vier Belegpunkte. Erster Baustein mit Vertrag für Web, Webflow und Slides.

npx shadcn add @modulr/block-media-split

Typ: Block
Gruppe: Blocks (Landing Page)
Registry-Abhängigkeiten: @modulr/utils
npm-Pakete: lucide-react

Touchpoints

Gebaut

@modulr/block-media-split

B2C-Lösungen

Emotionales Design,
das Vertrauen schafft.

Wir gestalten B2C-Erlebnisse, die Kund:innen intuitiv ans Ziel bringen: mühelos, schnell und genau auf ihre Bedürfnisse abgestimmt.

Begeisterte und überzeugte Kundschaft
Höhere Conversion und Retention
Mehr Umsatz und Weiterempfehlungen

Research, Designund KI-Entwicklung

Wer ist Modulr?

Menschen, die selbst bauen,
statt nur zu missionieren.

Wir kommen aus Design und Entwicklung und arbeiten täglich selbst mit KI-Werkzeugen.

Ganzheitliches Produktverständnis
Praxisnahe Werkzeuge und Methoden

Layout: Zwei gleiche Spalten ab lg, mobil Bild oben
Bild: Seitenverhältnis 7:5, Radius --radius-card
Textspalte: Innenabstand --space-3xl links und rechts ab lg, vertikal mittig
Schrift: Eyebrow text-eyebrow, Headline text-title-minor (525 + 375), Absatz und Punkte text-copy-large
Punkte: Häkchen im Kreis 40 px auf --color-card, Abstand --space-md

Vertrag

media-split · v0.1.0

Ein einzelnes Argument mit Bild belegen. Das Bild zeigt, der Text behauptet, die Punkte belegen.

Einsetzen, wenn

Ein Leistungsversprechen oder ein Ansatz braucht ein Bild und zwei bis vier Belege.
Zwei oder drei solche Argumente folgen aufeinander, dann wechselt die Bildseite.

Nicht einsetzen, wenn

Mehr als vier Punkte oder mehr als ein Absatz: dann Feature-Raster oder eigene Seite.
Kein aussagekräftiges Bild vorhanden: dann Content 1-spaltig.

Slot	Pflicht	Grenze	Regel
media	ja	image \| video	Foto oder Screen mit einem klaren Motiv. Wird beschnitten (cover), wichtige Inhalte mittig halten.
labels	nein	max. 2, 28 Zeichen	Sticker-Labels am unteren linken Bildrand. In Slides üblich, im Web die Ausnahme.
eyebrow	nein	25 Zeichen	Kurzes Label, ein bis drei Wörter, kein Satz.
titleStrong	ja	28 Zeichen	Erste Zeile der Headline, Gewicht 525.
title	nein	32 Zeichen	Zweite Zeile der Headline, Gewicht 375.
copy	nein	220 Zeichen	Ein Absatz, höchstens vier Zeilen.
points	nein	max. 4, 45 Zeichen	Belegpunkte mit Häkchen, je eine Zeile.

Variantentone: light | darkmediaSide: left | right