Ressourcen und Downloads

Leitfäden, Vorlagen, Berichte und Pressedateien. Echte Download-Links, Filter nach Typ, ein Formular, das Dateien freischaltet, und ein herausgestellter Leitfaden.

4 Variants

Kategorie wechseln

Download-Liste

Dateien mit Format und Größe. Der Knopf füllt einen Ring und wird zum Haken, während der Browser lädt.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/resources

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

Usage

<Resources variant="download-list" title="Press and downloads" items={[{ title, format, size, href }]} />

Source

Bibliothek mit Filtern

Karten mit Covern, die beim Hovern zoomen, Filter mit gleitender Markierung. Webinare öffnen, Dateien laden.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/resources

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

Usage

<Resources variant="filter-grid" title="…" types={[{ id, label, icon }]} items={[{ type, title, cover, href }]} />

Source

Mit Formular freischalten

Name und E-Mail schalten die Dateien an Ort und Stelle frei, sie steigen nacheinander auf. Das Cover schwebt hinter dem Formular.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/resources

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

Usage

<Resources variant="gated" title="…" points={[…]} items={[…]} onUnlock={async ({ name, email }) => …} cover={…} />

Source

Herausgestellter Leitfaden

Ein Leitfaden mit Cover, Fakten und Kapiteln. Die Seiten hinter dem Cover fächern beim Hovern auf, das Cover treibt beim Scrollen.

Im Studio öffnen

Installv1.0.0

aiw add @ai-website/resources

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

Usage

<Resources variant="featured" title="…" cover={…} facts={[…]} chapters={[{ title, page }]} items={[{ title, format, size, href }]} />

Source

Details

Was Ressourcen und Downloads mitbringt, aus Registry und Quellcode gelesen.

Bereich: Content
Variants: 4
Version: 1.0.0 · seit 1.0.0
Datei: components/ui/resources.tsx
Bringt mit: utilskitbutton iconrevealmotionsection
npm-Pakete: Keine
Sprachen: Englisch und Deutsch, 19 eigene Texte
Studio: Alle 4 Variants bearbeitbar
Mit KI bauen: Per MCP in Claude, Cursor, Copilot und Codex

Props

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

variantoptional
ResourcesVariant
download-listfilter-gridgatedfeatured
eyebrowoptional
React.ReactNode
titlePflicht
React.ReactNode
descriptionoptional
React.ReactNode
itemsoptional
ResourceItem[]
typesoptional
{ id: string; label: string; icon?: IconName }[]
filter-grid: the filters
chaptersoptional
{ title: string; page?: string }[]
featured: the chapters
factsoptional
{ value: string; label: string }[]
featured, gated: facts, e.g. [{ value: '48', label: 'pages' }]
coveroptional
React.ReactNode
featured, gated: the picture of the guide
pointsoptional
string[]
gated: what is inside, as short points
onUnlockoptional
(data: { name: string; email: string; company?: string }) => void | Promise<void>
gated: called with the form data. Throw to show the error.
askCompanyoptional
boolean
gated: ask for the company too
noteoptional
React.ReactNode
gated: small print under the form

Eingebaute Texte

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

Alle 19 Texte anzeigen

Schlüssel	Englisch	Deutsch
download	Englisch Download	Deutsch Herunterladen
downloading	Englisch Downloading	Deutsch Wird geladen
downloaded	Englisch Downloaded	Deutsch Heruntergeladen
open	Englisch Open	Deutsch Öffnen
all	Englisch All	Deutsch Alle
new	Englisch New	Deutsch Neu
count	Englisch {n} files	Deutsch {n} Dateien
name	Englisch Name	Deutsch Name
email	Englisch Work email	Deutsch Geschäftliche E-Mail
company	Englisch Company	Deutsch Firma
unlock	Englisch Get the files	Deutsch Dateien erhalten
unlocking	Englisch One moment	Deutsch Einen Moment
invalid	Englisch Please enter your name and an email like name@company.com.	Deutsch Bitte gib deinen Namen und eine E-Mail wie name@firma.de ein.
failed	Englisch That did not go through. Please try again in a moment.	Deutsch Das hat nicht geklappt. Bitte versuch es gleich noch einmal.
unlocked	Englisch The files are yours. We also sent the links to {email}.	Deutsch Die Dateien gehören dir. Die Links haben wir auch an {email} geschickt.
inside	Englisch What is inside	Deutsch Das steckt drin
chapters	Englisch Chapters	Deutsch Kapitel
page	Englisch p. {n}	Deutsch S. {n}
downloadGuide	Englisch Download the guide	Deutsch Leitfaden herunterladen

Aus dem Quellcode der Component abgeleitet.

Setzt aria-describedby, aria-label und aria-selected, damit Screenreader Zweck und Zustand ansagen.
Nutzt die Rollen alert, status, tab und tablist.
Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
Jedes Feld hat ein Label, sichtbar oder für Screenreader.
Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
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. 2 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Ressourcen und Downloads?

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

Welche Varianten hat Ressourcen und Downloads?

4 Varianten, Download-Liste, Bibliothek mit Filtern, Mit Formular freischalten und Herausgestellter Leitfaden. Du wählst sie mit der Prop variant, zum Beispiel variant="filter-grid".

Kann ich die Texte von Ressourcen und Downloads übersetzen?

Ja. Ressourcen und Downloads bringt 19 eigene Texte auf Deutsch und Englisch mit, etwa „Herunterladen“, „Wird geladen“ und „Heruntergeladen“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Ressourcen und Downloads einbauen?

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

Kann ich Ressourcen und Downloads ohne Code anpassen?

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

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Ressourcen und Downloads stehen.