Feature Sections und Bento Grids

Was ein Angebot kann, in fünfzehn Aufbauten: Raster, Karten, Zeilen, Reiter, vier Bento-Layouts, Schritte und ein Vorher und Nachher.

15 Variants

Kategorie wechseln

Grid, Reihen oder Bento

Eine Feature Section beantwortet die Frage nach dem Hero, nämlich was man genau bekommt. Die Components hier zeigen drei bis neun Punkte mit Icon, Titel und je einem Satz, oder größere Kacheln mit Screenshots, wenn das Produkt etwas zu zeigen hat.

Das Icon-Raster und die kompakte Icon-Reihe passen zu Dienstleistungen mit vielen kleinen Vorteilen. „Im Wechsel“ und „Mit Bildschirmfoto“ geben jedem Feature Raum und eignen sich für Software mit wenigen starken Funktionen. Die vier Bento-Layouts mischen Kachelgrößen, so bekommt der wichtigste Punkt die größte Kachel. „Reiter mit Bild“ spart Höhe, wenn jedes Feature ein eigenes Bild braucht, nummerierte Schritte machen aus Features eine Abfolge.

Formulier jeden Titel als Nutzen statt als Funktionsnamen und halte den Satz darunter auf dem Desktop bei einer Zeile. Ein Bento Grid braucht eine klare Hauptkachel, sonst wirkt es wie ein Puzzle. Auf dem Handy wird jedes Grid einspaltig, stell den stärksten Punkt deshalb nach vorn.

Icon-Raster

Sechs Merkmale in einem Haarlinien-Raster, das auf jeder Breite sauber schließt.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/features

Bringt mit utils, kit, icon, section, reveal, motion

Usage

<Features variant="grid" title="…" items={[{ icon, title, description }]} />

Source

Karten

Erhabene Karten mit großem Icon und je einem Link, die sich beim Darüberfahren leicht heben.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/features

Bringt mit utils, kit, icon, section, reveal, motion

Usage

<Features variant="cards" title="…" items={[{ icon, title, description, href }]} />

Source

Liste zweispaltig

Überschrift links, kurze Punkte in zwei Spalten rechts.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/features

Bringt mit utils, kit, icon, section, reveal, motion

Usage

<Features variant="list" title="…" items={[{ title, description }]} />

Source

Im Wechsel

Text und Bild wechseln von Zeile zu Zeile die Seite, jeweils mit ein paar Punkten.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/features

Bringt mit utils, kit, icon, section, reveal, motion

Usage

<Features variant="alternating" items={[{ eyebrow, title, description, points, media }]} />

Source

Reiter mit Bild

Eine Liste links wechselt das Bild rechts und läuft von selbst weiter, bis jemand eingreift. Auf dem Telefon steht das Bild im offenen Punkt.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/features

Bringt mit utils, kit, icon, section, reveal, motion

Usage

<Features variant="tabs" title="…" items={[{ icon, title, description, media }]} />

Source

Bento mit drei Kacheln

Eine große Kachel und zwei kleine daneben.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/features

Bringt mit utils, kit, icon, section, reveal, motion

Usage

<Features variant="bento-3" title="…" items={[{ title, description, media }] × 3} />

Source

Bento mit vier Kacheln

Breite und schmale Kacheln, die in der zweiten Reihe die Plätze tauschen.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/features

Bringt mit utils, kit, icon, section, reveal, motion

Usage

<Features variant="bento-4" title="…" items={[…] × 4} />

Source

Bento-Mosaik

Sieben Kacheln auf vier Spalten, ein großer Anker und sechs darum, ohne Lücke auf jeder Breite.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/features

Bringt mit utils, kit, icon, section, reveal, motion

Usage

<Features variant="bento-mosaic" title="…" items={[…] × 7} />

Source

Bento mit ungleichen Spalten

Drei unterschiedlich breite Spalten, darin Kacheln unterschiedlicher Höhe.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/features

Bringt mit utils, kit, icon, section, reveal, motion

Usage

<Features variant="bento-columns" title="…" items={[…] × 5} />

Source

Mit Bildschirmfoto

Punkte links, ein großes Bildschirmfoto, das über den rechten Rand hinausläuft.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/features

Bringt mit utils, kit, icon, section, reveal, motion

Usage

<Features variant="with-screenshot" title="…" items={[…]} media={<BrowserFrame>…</BrowserFrame>} />

Source

Mittig

Ein ruhiges Raster auf einer Achse, runde Icons mit weichem Licht.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/features

Bringt mit utils, kit, icon, section, reveal, motion

Usage

<Features variant="centered" title="…" items={[{ icon, title, description }]} />

Source

Nummerierte Schritte

Nur für eine echte Abfolge. Eine Linie verbindet die Schritte, auf dem Telefon senkrecht.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/features

Bringt mit utils, kit, icon, section, reveal, motion

Usage

<Features variant="numbered" title="…" items={[{ title, description }] × 4} />

Source

Vergleichskarten

Der alte Weg neben dem neuen, der neue erhaben und beleuchtet.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/features

Bringt mit utils, kit, icon, section, reveal, motion

Usage

<Features variant="comparison" title="…" comparison={{ before: { title, items }, after: { title, items } }} items={[]} />

Source

Kompakte Icon-Reihe

Vier kurze Versprechen in einer gefassten Reihe, oft direkt unter dem Auftakt.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/features

Bringt mit utils, kit, icon, section, reveal, motion

Usage

<Features variant="icon-row" items={[{ icon, title, description }] × 4} />

Source

Raster mit Lichtkegel

Karten mit einem Licht, das dem Zeiger folgt, und einer feinen Akzentlinie beim Darüberfahren.

Im Studio öffnen

Installv1.0.2

aiw add @ai-website/features

Bringt mit utils, kit, icon, section, reveal, motion

Usage

<Features variant="spotlight" title="…" items={[{ icon, title, description, href }]} />

Source

Details

Was Merkmale mitbringt, aus Registry und Quellcode gelesen.

Bereich: Marketing
Variants: 15
Version: 1.0.2 · seit 1.0.0
Datei: components/ui/features.tsx
Bringt mit: utilskiticonsectionrevealmotion
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 3 eigene Texte
Studio: Alle 15 Variants bearbeitbar
In Sammlungen: SaaS-Landingpage
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle FeaturesProps aus components/ui/features.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

variantoptional
FeaturesVariant
gridcardslistalternatingtabsbento-3bento-4bento-mosaicbento-columnswith-screenshotcenterednumberedcomparisonicon-rowspotlight
eyebrowoptional
React.ReactNode
titleoptional
React.ReactNode
descriptionoptional
React.ReactNode
actionsoptional
React.ReactNode
Buttons or links next to or under the heading
itemsPflicht
FeatureItem[]
mediaoptional
React.ReactNode
with-screenshot: the large screenshot
comparisonoptional
{ before: FeaturesComparisonSide; after: FeaturesComparisonSide }
comparison: the old way and the new way

Eingebaute Texte

Diese Texte schreibt Merkmale selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 3 Texte anzeigen

Schlüssel	Englisch	Deutsch
more	Englisch Learn more	Deutsch Mehr erfahren
features	Englisch Features	Deutsch Merkmale
step	Englisch Step	Deutsch Schritt

Aus dem Quellcode der Component abgeleitet.

Merkmale reagiert selbst auf die Tasten Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts und Leertaste.
Setzt aria-controls, aria-label, aria-labelledby, aria-orientation und aria-selected, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen group, tab, tablist und tabpanel.
Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 23 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Merkmale?

Mit aiw add @ai-website/features. Der Befehl legt die Datei components/ui/features.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind icon, section, reveal und motion. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Merkmale?

15 Varianten, Icon-Raster, Karten, Liste zweispaltig, Im Wechsel, Reiter mit Bild, Bento mit drei Kacheln, Bento mit vier Kacheln, Bento-Mosaik, Bento mit ungleichen Spalten, Mit Bildschirmfoto, Mittig, Nummerierte Schritte, Vergleichskarten, Kompakte Icon-Reihe und Raster mit Lichtkegel. Du wählst sie mit der Prop variant, zum Beispiel variant="cards".

Kann ich die Texte von Merkmale übersetzen?

Ja. Merkmale bringt 3 eigene Texte auf Deutsch und Englisch mit, etwa „Mehr erfahren“, „Merkmale“ und „Schritt“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Merkmale einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Merkmale mit aiw_components und installieren sie mit aiw_add @ai-website/features. Nenn im Prompt die Variante, etwa variant="grid", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Merkmale ohne Code anpassen?

Ja, im Studio. Alle 15 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Features-Code zum Kopieren.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Features stehen.

Grid, Reihen oder Bento

Merkmale

Icon-Raster

Karten

Liste zweispaltig

Im Wechsel

Reiter mit Bild

Bento mit drei Kacheln

Bento mit vier Kacheln

Bento-Mosaik

Bento mit ungleichen Spalten

Mit Bildschirmfoto

Mittig

Nummerierte Schritte

Vergleichskarten

Kompakte Icon-Reihe

Raster mit Lichtkegel

Details

Props

Eingebaute Texte

Barrierefreiheit

Bewegung

Teil dieser Sammlungen

Teil dieser Sammlungen

Häufige Fragen

Ähnliche Components, Wird oft kombiniert mit

Ähnliche Components

Wird oft kombiniert mit