page templates
<tc-block-login>
A ready-made split-screen login page — brand panel on the left, sign-in form on the right — that emits your credentials on submit.
import
"@ra9/tan-compose-kit/blocks/login"
Props
| Name | Type | Default | Description |
|---|---|---|---|
brand | string | "Acme" | Brand wordmark shown in the side panel. |
headline | string | "Everything your team needs, in one place." | Marketing headline in the side panel. |
features | string[] (json) | […3 defaults] | Bullet list rendered in the side panel. |
title | string | "Welcome back" | Form heading. |
subtitle | string | "Sign in to your account to continue." | Text under the form heading. |
emailLabel | string | "Email" | Label for the email field. |
passwordLabel | string | "Password" | Label for the password field. |
rememberLabel | string | "Remember me" | Label for the remember-me checkbox. |
submitLabel | string | "Sign in" | Submit button text. |
forgotLabel | string | "Forgot password?" | Text of the forgot-password link. |
forgotHref | string | "#" | Href of the forgot-password link. |
Events
| Event | Detail | When |
|---|---|---|
tc-block-login-submit | { values: { email, password, remember } } | Fires when the form is submitted (button click or Enter). preventDefault() cancels nothing — it is informational only. |
Slots
| Slot | Description |
|---|---|
side | Replaces the entire left brand panel. |
footer | Content below the submit button, e.g. a sign-up link. |
CSS variables
| Variable | Default | Description |
|---|---|---|
--tc-block-side-bg | var(--tc-color-surface, #ffffff) | Side panel background. |
--tc-block-side-fg | var(--tc-color-ink, #14171f) | Side panel text color. |
--tc-block-side-soft | var(--tc-color-ink-soft, #4a5061) | Side panel secondary text (features, footer). |
--tc-block-surface | var(--tc-color-surface, #ffffff) | Form panel background. |
--tc-block-rule | var(--tc-color-rule, #ece5d3) | Border color. |
--tc-block-radius | var(--tc-radius-lg, 12px) | Corner radius for form controls. |
--tc-block-shadow | var(--tc-shadow-md, …) | Card shadow. |
--tc-block-font | var(--tc-font-sans, …) | Font family. |
Examples
<tc-block-login> is a complete login page in one element. It composes
tc-input, tc-checkbox, and tc-button into a responsive split layout
that stacks on narrow screens. The form is novalidate and never navigates —
it hands the collected values to your code through a single event.
Basic usage
Custom copy
Every visible string is a prop, so you can rebrand the whole page without touching the shadow DOM:
Slots
Replace the brand panel or append to the form footer:
The blocks demo previews all five page templates with a switcher, including this one.