Layout Features Demo

KPI Summary Cards

Prominent headline numbers in a responsive flex row:

12,847

Total Records

96.4%

Pass Rate

00:03:42

Duration

Errors

Works with any number of cards — wraps to multiple rows:

3,291

Orders

$87,420

Revenue

$26.56

Avg Order

Returns

1,847

Customers

4.7/5

Satisfaction

Progress Bars

Auto-colored by percentage (green >= 80%, amber >= 50%, red below):

Test Coverage 92%

Migration Progress 1204/1500

Build Completion 65%

Data Quality 35%

Upload 100%

Collapsible Sections

Uses HTML5 details/summary — no JavaScript required:

Expanded by default — Configuration Details

Server	prod-app-03
Port	5432
Database	OrdersDB
SSL	Enabled

Collapsed by default — Error Log

❌ Connection timeout at 14:32:05 UTC

System.TimeoutException: The operation has timed out.
   at Npgsql.NpgsqlConnector.Connect(TimeSpan timeout)
   at Npgsql.ConnectorPool.AllocateLong(NpgsqlConnection conn)
   at Program.Main() in /app/Program.cs:line 42

Collapsed — Detailed Results Table

Test	Result	Duration
Login	Pass	1.2s
Search	Pass	0.8s
Checkout	Fail	3.5s
Export	Pass	2.1s

Two-Column Layout

Side-by-side content using CSS flexbox:

Left Column

This content sits in the left column. You can place any report elements here — tables, lists, alerts, etc.

Item Alpha
Item Beta
Item Gamma

Right Column

The right column has equal width. Content flows independently in each column.

ℹ️ Columns resize proportionally on smaller screens.

Columns with a table and chart side by side:

Region	Sales
North	4200
South	3800
East	5100
West	2900

Regional Sales

Page Breaks

When printing or saving to PDF, you can force content to start on a new page:

(A page break is inserted below this — visible when printing)

This Starts on a New Page (when printed)

Content after the page break appears on the next printed page.