BluKavantUI Design system
TEMPLATES

Split login

A reusable square-edged sign-in screen with BluKavantUI colors and a component-built workspace preview.

Web + OutSystemsCommunity
Open web preview ↗Download Community screen ↓Get complete starter →

Screen preview

The image below shows the TypeScript screen. Open the web preview to try its controls; it runs the same source included in the starter.

Split login TypeScript screen

What is custom?

A reusable split sign-in screen with square edges, BluKavantUI indigo/slate colors, labelled form controls, a web password-visibility control, and a live component preview. It is available independently of the demo’s login.

Additional CSS: website-templates.css owns template layout, typography, branding, spacing, responsive rules and finite entrance effects. It respects reduced motion. Component behavior remains in the library.

Web / TypeScript setup

Components used

Button · Card · Badge · Statistic · Timeline

Files to copy

login.ts · website-shared.ts · website-templates.css

  1. Install @blukavantui/community using the downloadable starter. Copy these files together into your templates directory.
  2. Load @blukavantui/community/theme.css once. Keep the component CSS imports and the local website-templates.css import; use a bundler that supports CSS.
  3. Call mount(host, env), then call destroy() when removing the screen. Each instance owns and disposes its components.
import '@blukavantui/community/theme.css'
import {mount} from './templates/login'
const screen = mount(document.getElementById('app')!, {
  assetBase: '/assets/templates/',
  galleryUrl: '/templates',
})
// On route exit: screen.destroy()

Data and actions

Provide env.onSignIn({username, password, remember}) to call your server authentication endpoint. Supply forgotPasswordUrl only when a working recovery route exists, plus backUrl for the return link. The preview never sends or stores credentials. On success, your application controls navigation.

Images and appearance

The product preview is rendered with components, not a screenshot. Marketing screens explicitly use the light palette for their branded compositions. Split Login follows the application theme for its form and uses the light palette for its workspace illustration. The local composition styles preserve the template’s visual identity; test your replacement content and colors for contrast, keyboard operation and mobile reflow.

OutSystems Community setup

Copy TemplateLogin from BluKavantUi_Community_Demo, together with its private SplitLoginLayout layout and required assets. Producers: BluKavantUi_Community_Core, BluKavantUi_Community_Layout, BluKavantUi_Community_Data.

Components: Button · Card · Badge · Statistic · Timeline.

  1. Select the referenced Blocks, public structures and static entities in Manage Dependencies. Use the original producer-owned types.
  2. Set BluUICommunityTheme from BluKavantUi_Community_Core as your consumer’s Base Theme.
  3. Copy SplitLoginLayout with its Style Sheet and placeholders. Preserve the screen’s classes, locals, lifecycle and event handlers. Each library Block supplies its own runtime and CSS.
  4. Replace sample data and preview actions with validated Server Actions. Apply your own access roles; do not inherit demo permissions blindly.

Copy TemplateLogin and SplitLoginLayout as a reusable starting point. Replace the preview SignIn action with your server authentication action. Preserve labelled fields, username/current-password autocomplete, password masking and error feedback. Authentication, remember-me, exception handling and return navigation remain owned by your application.

The native shared layout includes website-templates.css plus scoped adjustments for native wrappers and the existing login form. Copy its full Style Sheet with the layout.

Community on Web and OutSystems

Every component used by this template is Community. The Community Web starter includes this screen and its shared files, using @blukavantui/community.

The native TemplateLogin screen is published in BluKavantUi_Community_Demo. Copy its private SplitLoginLayout layout and preserve producer-owned types, scripts and event mappings. Your application supplies access roles, authentication and persistence.

All nine Community and five Pro native templates are published in the development environment. Official Forge distribution remains pending.

Open OutSystems screen ↗

Search BluKavantUI