HTML Demand Specfile Style Guide

Live rendering of every class in GENCU.HTMLCSS.SET. This page is the visual reference; when designing a new HTML demand form, scan here first to find an existing pattern before inventing a new one.

Headings

Heading 1 — Page Title

Heading 2 — Section

Heading 3 — Subsection

Info Tables (Label / Value)

Account #	123456789
Member Name	SAMPLE, MEMBER A
Branch	Main Office
Open Date	05/12/2018

Data Tables (Zebra-Stripe + Hover)

Loan ID	Type	Balance	Status
04	Auto	$12,450.00	Current
05	HELOC	$28,000.00	30 Days Late
06	Visa	$1,243.50	Charged Off
07	Personal	$0.00	Closed

Form Controls

Plaintiff / Creditor

Date Served

Amount Demanded

Priority

Notes

Buttons

Alerts

Info: This member has 3 prior tracking records on file.

Warning: Account is on collections watch — confirm with department before posting FM.

Error: Tracking 55 create failed — record locked by another session.

Success: All 7 file-maintenance operations completed.

Collapsible Section (Click to Toggle)

This section uses the .collapsible + .collapse-content pattern. Click the heading to collapse it. The CSS handles the animation; the JS just toggles a class.

Useful for previous-notes panels and other secondary information that takes screen space but doesn't need to be visible all the time.

Status Color Inline Examples

Current · 30 Days Late · Charged Off · Closed