Login Wireframe¶

This page demonstrates how to embed HTML wireframes and prototypes in the documentation.

Embedding HTML Files¶

You can embed your existing HTML wireframes using iframes. The documentation supports both responsive and full-width iframe containers.

Responsive Iframe (16:9 aspect ratio)¶

Full-Width Iframe¶

Direct HTML Embedding¶

You can also embed HTML directly using the md_in_html extension:

Example HTML Content¶

Custom HTML Block¶

This is raw HTML embedded directly in the documentation!

Wireframe Documentation¶

sequenceDiagram
    participant User
    participant UI
    participant Auth
    participant API

    User->>UI: Enter credentials
    UI->>Auth: Validate input
    Auth->>API: POST /login
    API-->>Auth: JWT token
    Auth-->>UI: Authentication success
    UI-->>User: Redirect to dashboard

Design Notes¶

!!! wireframe "Wireframe Specifications" - Layout: Centered card with max-width 400px - Theme: Supports both light and dark modes - Validation: Real-time form validation - Accessibility: WCAG 2.1 AA compliant

Features¶

Email/password authentication
Remember me functionality
Forgot password link
Social login integration
Biometric authentication (planned)
Two-factor authentication (planned)

Implementation Reference¶

See ui-component-library for reusable form components.