x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>STAT TILE:</strong> A KPI figure with label, optional trend delta and context line<br> <strong>VARIANTS:</strong> Value tones (warning | danger) | Delta tones (positive | negative | neutral) | Compact (sm) </p> <p class="tw:mb-0 tw:text-sm"> The standard way to show a headline number — applications received, places remaining, response rate. Carrier-agnostic: put it inside a <code>.tw-card-body</code> for the Data Listing KPI strip, or bare inside any panel. Delta tones follow <em>meaning</em>, not arrow direction — pair the tone with an icon and text so colour is never the only indicator. </p> </div> <!-- KPI strip (canonical Data Listing usage) --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">KPI Strip (Data Listing usage)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Canonical usage:</strong> a grid of cards above the table — <code>tw:grid tw:grid-cols-2 tw:lg:grid-cols-4 tw:gap-4</code>, each tile inside a <code>.tw-card-body</code>. </p> </div> <div class="tw:grid tw:grid-cols-2 tw:lg:grid-cols-4 tw:gap-4"> <div class="tw-card"> <div class="tw-card-body tw-stat-tile"> <span class="tw-stat-tile-label">Applications received</span> <span class="tw-stat-tile-value">1,284</span> <span class="tw-stat-tile-delta tw-stat-tile-delta-positive"> <i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 12% vs last year </span> </div> </div> <div class="tw-card"> <div class="tw-card-body tw-stat-tile"> <span class="tw-stat-tile-label">Offers accepted</span> <span class="tw-stat-tile-value">312</span> <span class="tw-stat-tile-delta tw-stat-tile-delta-negative"> <i class="fa-solid fa-arrow-down" aria-hidden="true"></i> 4% vs last year </span> </div> </div> <div class="tw-card"> <div class="tw-card-body tw-stat-tile"> <span class="tw-stat-tile-label">Places remaining</span> <span class="tw-stat-tile-value tw-stat-tile-value-warning">18</span> <span class="tw-stat-tile-sub">of 240 for September 2027</span> </div> </div> <div class="tw-card"> <div class="tw-card-body tw-stat-tile"> <span class="tw-stat-tile-label">Awaiting review</span> <span class="tw-stat-tile-value tw-stat-tile-value-danger">57</span> <span class="tw-stat-tile-sub">oldest waiting 9 days</span> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-card"><div class="tw-card-body tw-stat-tile"><span class="tw-stat-tile-label">…</span><span class="tw-stat-tile-value">1,284</span></div></div></code> </div> </div> <!-- Delta tones --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Trend Deltas — Tone Follows Meaning</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Meaning, not direction:</strong> "unread messages up 40%" is a <em>negative</em> even though the arrow points up. Choose <code>-positive</code> / <code>-negative</code> / <code>-neutral</code> by whether the change is good news; the arrow icon carries the direction. </p> </div> <div class="tw:grid tw:grid-cols-2 tw:lg:grid-cols-3 tw:gap-4 tw:max-w-3xl"> <div class="tw-card"> <div class="tw-card-body tw-stat-tile"> <span class="tw-stat-tile-label">Enquiry conversions</span> <span class="tw-stat-tile-value">64%</span> <span class="tw-stat-tile-delta tw-stat-tile-delta-positive"> <i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 6 pts vs last term </span> </div> </div> <div class="tw-card"> <div class="tw-card-body tw-stat-tile"> <span class="tw-stat-tile-label">Unread messages</span> <span class="tw-stat-tile-value">142</span> <span class="tw-stat-tile-delta tw-stat-tile-delta-negative"> <i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 40% this week </span> </div> </div> <div class="tw-card"> <div class="tw-card-body tw-stat-tile"> <span class="tw-stat-tile-label">Average review time</span> <span class="tw-stat-tile-value">2.4 days</span> <span class="tw-stat-tile-delta tw-stat-tile-delta-neutral"> <i class="fa-solid fa-minus" aria-hidden="true"></i> unchanged </span> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><span class="tw-stat-tile-delta tw-stat-tile-delta-negative"><i class="fa-solid fa-arrow-up"></i> 40% this week</span></code> </div> </div> <!-- Compact --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Compact (Sidebars & Drawers)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Compact:</strong> add <code>.tw-stat-tile-sm</code> to the tile for dense sidebars and drawers — the value drops one size, everything else holds. </p> </div> <div class="tw-card tw:max-w-xs"> <div class="tw-card-body tw:flex tw:flex-col tw:gap-4"> <div class="tw-stat-tile tw-stat-tile-sm"> <span class="tw-stat-tile-label">Open day bookings</span> <span class="tw-stat-tile-value">96</span> <span class="tw-stat-tile-sub">of 120 capacity</span> </div> <div class="tw-stat-tile tw-stat-tile-sm"> <span class="tw-stat-tile-label">Forms in progress</span> <span class="tw-stat-tile-value">41</span> <span class="tw-stat-tile-delta tw-stat-tile-delta-positive"> <i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 8 this week </span> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-stat-tile tw-stat-tile-sm">…</div></code> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>STAT TILE:</strong> A KPI figure with label, optional trend delta and context line<br> <strong>VARIANTS:</strong> Value tones (warning | danger) | Delta tones (positive | negative | neutral) | Compact (sm) </p> <p class="tw:mb-0 tw:text-sm"> The standard way to show a headline number — applications received, places remaining, response rate. Carrier-agnostic: put it inside a <code>.tw-card-body</code> for the Data Listing KPI strip, or bare inside any panel. Delta tones follow <em>meaning</em>, not arrow direction — pair the tone with an icon and text so colour is never the only indicator. </p> </div> <!-- KPI strip (canonical Data Listing usage) --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">KPI Strip (Data Listing usage)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Canonical usage:</strong> a grid of cards above the table — <code>tw:grid tw:grid-cols-2 tw:lg:grid-cols-4 tw:gap-4</code>, each tile inside a <code>.tw-card-body</code>. </p> </div> <div class="tw:grid tw:grid-cols-2 tw:lg:grid-cols-4 tw:gap-4"> <div class="tw-card"> <div class="tw-card-body tw-stat-tile"> <span class="tw-stat-tile-label">Applications received</span> <span class="tw-stat-tile-value">1,284</span> <span class="tw-stat-tile-delta tw-stat-tile-delta-positive"> <i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 12% vs last year </span> </div> </div> <div class="tw-card"> <div class="tw-card-body tw-stat-tile"> <span class="tw-stat-tile-label">Offers accepted</span> <span class="tw-stat-tile-value">312</span> <span class="tw-stat-tile-delta tw-stat-tile-delta-negative"> <i class="fa-solid fa-arrow-down" aria-hidden="true"></i> 4% vs last year </span> </div> </div> <div class="tw-card"> <div class="tw-card-body tw-stat-tile"> <span class="tw-stat-tile-label">Places remaining</span> <span class="tw-stat-tile-value tw-stat-tile-value-warning">18</span> <span class="tw-stat-tile-sub">of 240 for September 2027</span> </div> </div> <div class="tw-card"> <div class="tw-card-body tw-stat-tile"> <span class="tw-stat-tile-label">Awaiting review</span> <span class="tw-stat-tile-value tw-stat-tile-value-danger">57</span> <span class="tw-stat-tile-sub">oldest waiting 9 days</span> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-card"><div class="tw-card-body tw-stat-tile"><span class="tw-stat-tile-label">…</span><span class="tw-stat-tile-value">1,284</span></div></div></code> </div> </div> <!-- Delta tones --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Trend Deltas — Tone Follows Meaning</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Meaning, not direction:</strong> "unread messages up 40%" is a <em>negative</em> even though the arrow points up. Choose <code>-positive</code> / <code>-negative</code> / <code>-neutral</code> by whether the change is good news; the arrow icon carries the direction. </p> </div> <div class="tw:grid tw:grid-cols-2 tw:lg:grid-cols-3 tw:gap-4 tw:max-w-3xl"> <div class="tw-card"> <div class="tw-card-body tw-stat-tile"> <span class="tw-stat-tile-label">Enquiry conversions</span> <span class="tw-stat-tile-value">64%</span> <span class="tw-stat-tile-delta tw-stat-tile-delta-positive"> <i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 6 pts vs last term </span> </div> </div> <div class="tw-card"> <div class="tw-card-body tw-stat-tile"> <span class="tw-stat-tile-label">Unread messages</span> <span class="tw-stat-tile-value">142</span> <span class="tw-stat-tile-delta tw-stat-tile-delta-negative"> <i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 40% this week </span> </div> </div> <div class="tw-card"> <div class="tw-card-body tw-stat-tile"> <span class="tw-stat-tile-label">Average review time</span> <span class="tw-stat-tile-value">2.4 days</span> <span class="tw-stat-tile-delta tw-stat-tile-delta-neutral"> <i class="fa-solid fa-minus" aria-hidden="true"></i> unchanged </span> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><span class="tw-stat-tile-delta tw-stat-tile-delta-negative"><i class="fa-solid fa-arrow-up"></i> 40% this week</span></code> </div> </div> <!-- Compact --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Compact (Sidebars & Drawers)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Compact:</strong> add <code>.tw-stat-tile-sm</code> to the tile for dense sidebars and drawers — the value drops one size, everything else holds. </p> </div> <div class="tw-card tw:max-w-xs"> <div class="tw-card-body tw:flex tw:flex-col tw:gap-4"> <div class="tw-stat-tile tw-stat-tile-sm"> <span class="tw-stat-tile-label">Open day bookings</span> <span class="tw-stat-tile-value">96</span> <span class="tw-stat-tile-sub">of 120 capacity</span> </div> <div class="tw-stat-tile tw-stat-tile-sm"> <span class="tw-stat-tile-label">Forms in progress</span> <span class="tw-stat-tile-value">41</span> <span class="tw-stat-tile-delta tw-stat-tile-delta-positive"> <i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 8 this week </span> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-stat-tile tw-stat-tile-sm">…</div></code> </div> </div></div>No notes provided.
No params configured.