CSS Basics

1. Inline CSS — Client Demographics

Name: Jane Doe • DOB: 1985-03-14 • SSN (last 4): 7890 • Veteran Status: No

2. CSS Gradient — Program Enrollment Header

CoC-funded PSH • Entry Date: 2025-11-01 • Household ID: HH-20251101-042

3. Box Shadow — Service Record

Service: Case Management • Date: 2025-12-15 • Provider: Metro Housing Authority

4. RGBA Transparency — Housing Move-In

Placement Type: Permanent • Move-In Date: 2025-12-20 • Subsidy: HCV Voucher

5. Border-Left Accent — Data Quality Alert

Missing: Destination at Exit • Client ID: CL-44821 • Error Type: Null required field

6. Styled HR — Section Divider

End of Universal Data Elements — Begin Program-Specific Data Elements

Layout

7A. Enrolled: 142

7B. Housed: 87

7C. Exited: 31

8A. RRH • Avg. Days to Placement: 34

8B. ES • Avg. Length of Stay: 62 days

9A. VI-SPDAT

9B. PHQ-9

9C. GAIN-SS

10. Table — HMIS Program Enrollment

Client ID	Program	Entry Date
CL-44821	CoC PSH — Metro Housing	2025-11-01
CL-33102	ESG-RRH — Crossroads	2025-10-18

11. Position Relative — Bed Inventory Badge Overlay

12. Max-Width — Coordinated Entry Notice

13. External Image — HUD Logo

14. Styled Link Button — Referral Action

Send Referral to PSH

15. Emoji — Status Indicators

16. HTML Entities — HMIS Notation

SVG

17. Static SVG — Enrollment Confirmed

18. SVG Defs + ClipPath — HMIS Data Banner

19. SVG Shimmer — Loading Indicator

20. SVG Pulse — Active Enrollment Indicator

Client currently enrolled — active in PSH program.

21. SVG Rotation — Data Sync Spinner

Syncing HMIS data with CoC repository...

22. SVG Staggered Delay — Upload Progress

23. SVG Linear Gradient — Data Quality Score Bar

24. SVG Radial Gradient — VI-SPDAT Score Badge

25. SVG <use> — Reusable Status Icons

26. SVG Pattern Fill — Report Background Textures

27. SVG Filter Blur — PII Redaction Preview

28. SVG Drop Shadow — APR Report Card

29. SVG foreignObject — Client Alert Banner

Style Block Features (App Builder Only)

30. Style Block + Classes — Pending Review Notice

This enrollment has pending HUD verification. Review income and disability documentation before APR submission.

31. @media Query

✅ DESKTOP — Full client record with service history table

📱 MOBILE — Compact client summary card view

Resize browser to toggle between desktop and mobile HMIS layouts.

32. :hover — Client Record Card

Hover to highlight: Jane Doe • PSH Enrollment • CoC-funded • 412 days in program

33. :hover + Transition — Service Record

Hover to expand: Case Management • 2025-12-15 • Provider: Metro Housing Authority

34. Hover Button — Quick Action

Complete Annual Assessment

35. Nav Row Hover — Program Navigation

Coordinated Entry — Prioritization List

42 clients awaiting housing match • 8 newly assessed this week

Street Outreach — Active Contacts

17 unsheltered clients • 5 pending engagement follow-ups

36. Scale on Hover — Program Outcome Cards

PSH: 89%

RRH: 72%

TH: 64%

Stress Test

37. Block A — Client Narrative: Client was referred to Permanent Supportive Housing through Coordinated Entry on 2025-11-01. VI-SPDAT score of 14 indicates high acuity. Chronically homeless per HUD definition (12+ months continuous or 4+ episodes in 3 years). Disabling condition documented. Income at entry: $0. Non-cash benefits: SNAP, Medicaid. Health insurance: Medicaid managed care.

CHECKPOINT — ~10K characters reached (mid-enrollment data)

38. Block B — Housing Placement Notes: Unit secured at Riverside Apartments, 2BR. Lease signed 2025-12-20. Move-in date confirmed. Subsidy type: Housing Choice Voucher (HCV). Rent: $1,150/mo, client portion: $0 (zero income). Housing stability plan completed. Follow-up scheduled for 30, 60, 90 days post-placement. Case manager assigned: M. Thompson. Emergency contact on file.

39. FINAL CHECKPOINT — If visible, all 39 tests rendered. Full HMIS data display confirmed. No character limit issue.

Results — App Builder Section Text