Seiten

Detailed signup card

Detailed signup card: Eine Registrierungsseite mit einer schmalen Akzentleiste, die einen aufrecht stehenden Schlüssel trägt, dessen Zähne in vier Gruppen eingeschnitten werden, während das Passwort stärker wird, neben einem Raster aus Plattenfeldern.

Detailed signup card verwenden

Detailed signup card verwendet das Vorschauformat „ganze Seite“ mit der Theme-Einstellung „hell/dunkel“.

Vorschau anpassen

Diese Einstellungen werden an die Demo übergeben. Standardwerte und Grenzen gelten für die Vorschau; die vollständige Props-API steht in der Implementierung.

Einstellung	Typ	Standardwert	Vorschaugrenzen
`heading`	`text`	`Cut your key`	Bis zu 50 Zeichen
`accentColor`	`color`	`#0B6C9A`	Keine weitere Grenze in den Metadaten.
`showAltProvider`	`boolean`	`true`	Keine weitere Grenze in den Metadaten.
`providerLabel`	`text`	`Continue with passkey`	Bis zu 30 Zeichen

Für welche Frameworks ist Detailed signup card verfügbar?

Detailed signup card ist für React, Vue, Svelte, Astro, HTML verfügbar. Die Live-Vorschau verwendet React; die folgenden Quellcode-Beobachtungen beziehen sich auf index.tsx. Prüfe die gewählte Portierung auf die benötigten Interaktionen.

Welche Abhängigkeiten hat Detailed signup card?

Die React-Metadaten nennen diese zusätzlichen npm-Abhängigkeiten: clsx, tailwind-merge.

Welche Details zur Barrierefreiheit sind in Detailed signup card erkennbar?

Der React-Quellcode von Detailed signup card enthält: native Elemente (button, input, label); Attribute und Ereignisbehandler (aria-hidden, aria-label, aria-live, aria-required); explizite Rollen (group, status). Dies sind Beobachtungen am Quellcode. Prüfe zugängliche Namen, Fokusreihenfolge und Tastaturverhalten auf der zusammengesetzten Seite.

Wie berücksichtigt Detailed signup card reduzierte Bewegung?

Detailed signup card liest die Bewegungseinstellung im React-Quellcode über matchMedia(prefers-reduced-motion). Prüfe die vollständige Implementierung, gemeinsame Stile und die gewählte Portierung mit aktivierter Bewegungsreduktion; diese Beobachtungen belegen keinen vollständigen Animationsstopp.

Verbinde deinen Agenten

Verwandte offene Komponenten

Standbild der UI-Komponente Image panel login card von Fieldbook aus der Kategorie Seiten.

2736Image panel login cardSeitenEine dreispaltige Anmeldung: ein ringelblumengelbes Cover, dessen Brücke für jedes Passwortzeichen ein gespanntes Tragseil erhält, das Formular und eine Leiste aus drei gestapelten Anmeldemethoden mit einer Fläche, die zwischen ihnen gleitet.

Standbild der UI-Komponente Split sign-in page von Fieldbook aus der Kategorie Seiten.

2756Split sign-in pageSeitenEine Anmeldeseite mit einem schmalen Formularstreifen aus Papier neben einer Skyline aus sechs erleuchteten Gebäuden, die sich unter dem Zeiger heben, sich beim Anmelden zu einer Treppe ordnen und bei einem Fehler wackeln.

2731Account signupSeitenEin randloses Registrierungsposter, bei dem das E-Mail-Feld die Überschrift ist: Die Schrift passt sich der Fläche an, während die Adresse wächst, und die alternativen Methoden klappen sich zu einem Domain-Chip zusammen.

Standbild der UI-Komponente Minimal email sign in von Fieldbook aus der Kategorie Seiten.

2740Minimal email sign inSeitenEine passwortfreie Anmeldung, gesetzt als eine einzige Papierfläche: Ein riesiges @ läuft über den rechten Rand hinaus, und die Eingabe einer bekannten geschäftlichen Domain schreibt Überschrift und Schaltfläche um.

2748Signup card on tintSeitenEine Registrierung als waagerechte Bordkarte: ein blauer Abschnitt, dessen Überschrift dem eingegebenen Vornamen folgt, neben einer Papierhälfte mit vier Feldern, wobei das Absenden den Abschnitt an der Perforation abreißt und die Bordkarte ausstellt.

2750Signup page with socialSeitenEine kartenlose Registrierungsseite mit einem Ausweis-Badge, das sich beim Tippen aktualisiert, einem Anbieter-Balken in voller Breite, der Name und E-Mail-Adresse in die zugehörigen Plattenfelder übernimmt, und vier Feldern in einer Hauptbuchzeile.