Confirm?

Are you sure you want to proceed?
?

MudBlazor Login Page Design

Clone & Customize via AI

MudBlazor Login Form presents a split-screen SSA sign-in with left feature highlights and a right CTA panel. Uses MudGrid for a responsive split layout and MudButtons for the sign-in action.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Split-screen login layout (left feature pane, right sign-in pane) using a MudGrid/MudItem layout. - Feature list with icons and descriptions rendered from a local _features collection. - SSA sign-in call-to-action implemented as a prominent MudButton with icon. - Header row with language indicator, Sign In button and Help footer button. - Static illustration via MudImage, MudText headings and MudDivider for visual grouping. ## Key components - MudGrid, MudItem - MudPaper, MudText, MudDivider, MudSpacer - MudList<T>, MudListItem - MudButton, MudIcon, MudImage, MudLink - C# private list (_features) and Razor foreach for rendering ## How it works - The layout uses MudGrid and MudItem breakpoints (xs/md) to create a split view; the left pane is hidden on small screens via utility classes (d-none d-md-flex). - UI is rendered from a private C# List<FeatureItem> and a Razor foreach; there is no form model or EditForm/validation present. - Buttons and links are static in markup; no click handlers or authentication wiring is implemented in the page code-behind. - Visual grouping and spacing rely on MudBlazor components and custom CSS classes for color and sizing. ## Styling - Styling is provided in app.css with classes: left-pane (light background), right-pane (dark background), transparent-background, fill-height. - Button themes use btn-sign-in and btn-ssa with custom colors overriding MudBlazor defaults. - Layout sets min-height:100vh to span full viewport and hides page scrollbars via html, body overflow: hidden. - Responsive behavior depends on MudGrid breakpoints and Bootstrap-like utility classes present in the markup (d-none, d-md-flex). ## Reuse steps 1. Install MudBlazor NuGet and add using MudBlazor in _Imports.razor. 2. Register MudBlazor services in Program.cs (builder.Services.AddMudServices()). 3. Add the CSS rules (app.css) to the project or merge into site stylesheet and ensure MudBlazor CSS is loaded. 4. Copy the Razor page and the FeatureItem model; adjust image paths and text as needed. 5. Wire an authentication/SSA service and replace the static MudButton with a click handler to start the sign-in flow. 6. Add EditForm and validation if credential inputs or client-side validation are required. ## Limitations & next steps - This is a single static page generated by Instruct UI; no backend authentication, SSO, or service injection is implemented. - No EditForm or DataAnnotationsValidator present; add server/client validation when collecting credentials. - Buttons lack OnClick handlers; wire event callbacks and authentication services (OIDC/SSA) in Program.cs and relevant services. - Accessibility and localization need review (language dropdown is visual only). Consider keyboard focus, aria attributes, and responsive testing on small screens.