Skip to content
Fieldbook
Menu
Sign in
EN

Pages

Simple sign-in card

Simple sign-in card: A left-aligned sign-in page with no card: the form is one sentence, Sign in as an email slab with a password slab, then a wide accent submit and an outlined alternate.

Using Simple sign-in card

Simple sign-in card uses the full page preview frame with a light/dark theme setting.

Customize the preview

These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.

ControlTypeDefaultPreview limits
headingtextSign inUp to 50 characters
accentColorcolor#C2185BNo additional limit in the metadata.
showAltProviderbooleantrueNo additional limit in the metadata.
providerLabeltextLogin with GoogleUp to 30 characters
Which frameworks are available for Simple sign-in card?

Simple sign-in card is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.

What does Simple sign-in card depend on?

The React metadata lists no additional npm dependencies beyond React.

What accessibility details are visible in Simple sign-in card?

The React source for Simple sign-in card includes: native elements (button, input, label); attributes and handlers (aria-hidden, aria-label); explicit roles (status). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

How does Simple sign-in card handle reduced motion?

Simple sign-in card reads the motion preference in its React source through matchMedia(prefers-reduced-motion). Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.

Connect your agent

Related open components

Still of the Minimal email sign in component, a Fieldbook UI component in Pages.
2740Minimal email sign inPagesA password-free sign-in set as one paper plane: a giant @ bleeds off the right edge, and typing a known work domain rewrites the headline and the button.
Still of the Image panel login card component, a Fieldbook UI component in Pages.
2736Image panel login cardPagesA three column sign-in: a marigold cover whose bridge gains a taut cable per password character, the form, and a rail of three stacked sign-in methods with a plane that glides between them.
Still of the Split sign-in page component, a Fieldbook UI component in Pages.
2756Split sign-in pagePagesA sign-in page with a narrow paper form strip beside a skyline of six lit buildings that rise under the pointer, sort into a staircase on sign-in, and shake on an error.
Still of the Account signup component, a Fieldbook UI component in Pages.
2731Account signupPagesA full-bleed signup poster where the email field is the headline: the type fits the plane as the address grows, and the alternate methods fold into a domain chip.
Still of the Detailed signup card component, a Fieldbook UI component in Pages.
2734Detailed signup cardPagesA signup page with a narrow accent spine holding an upright key whose teeth are cut in four groups as the password strengthens, beside a grid of slab fields.
Still of the Minimal email login component, a Fieldbook UI component in Pages.
2739Minimal email loginPagesA passwordless login on a dark ground where the address you type flips onto a split-flap departure board, then the board confirms the link is sent and counts down the resend.