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
<div class="tw:p-6 tw:max-w-4xl tw:mx-auto tw:space-y-8"> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>COMPONENT:</strong> Comparison Row (consumer-only)<br> <strong>VARIANTS:</strong> comparison-row-header (sticky header row) | comparison-row-label | comparison-row-value | comparison-row-info-icon </p> <p class="tw:mb-0 tw:text-sm"> Single row primitive for the side-by-side school comparison view. Label cell on the left + N value cells on the right. Caller wraps rows in a CSS grid (<code>tw:grid tw:grid-cols-4</code> for 3 schools + label column). No full "comparison table" wrapper — compose freely. </p> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">1. Single row — label + 3 value cells</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Structure:</strong> Caller wraps all cells in <code>tw:grid tw:grid-cols-4</code>. The row class (<code>comparison-row</code>) uses <code>display:contents</code> so the grid flows through the wrapper. Each cell has a 1px line-card top border. </p> </div> <div class="tw:grid tw:grid-cols-4 tw:border tw:border-line-card tw:rounded-[6px] tw:overflow-hidden"> <div class="comparison-row"> <div class="comparison-row-label">Ofsted Rating</div> <div class="comparison-row-value">Outstanding</div> <div class="comparison-row-value">Good</div> <div class="comparison-row-value">Requires Improvement</div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw:grid tw:grid-cols-4"><div class="comparison-row"><div class="comparison-row-label">…</div><div class="comparison-row-value">…</div>…</div></div></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">2. Header row + 3 data rows — full comparison table</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Header row:</strong> comparison-row-header on each header cell — sticky top-0, bold 14px, bottom border. Data rows alternate label/value cells inside a shared 4-column grid. </p> </div> <div class="tw:border tw:border-line-card tw:rounded-[8px] tw:overflow-auto"> <div class="tw:grid tw:grid-cols-4"> <div class="comparison-row-header">School</div> <div class="comparison-row-header">Greenford High School</div> <div class="comparison-row-header">Cedar Grove Secondary</div> <div class="comparison-row-header">Hills Road Sixth Form</div> <div class="comparison-row"> <div class="comparison-row-label"> Ofsted Rating <i class="fa-light fa-circle-info comparison-row-info-icon" aria-label="What is Ofsted?"></i> </div> <div class="comparison-row-value">Outstanding</div> <div class="comparison-row-value">Good</div> <div class="comparison-row-value">Outstanding</div> </div> <div class="comparison-row"> <div class="comparison-row-label">Application Status</div> <div class="comparison-row-value"> <span class="badge badge-success-subtle">Accepting Now</span> </div> <div class="comparison-row-value"> <span class="badge badge-warning-subtle">Opening Soon</span> </div> <div class="comparison-row-value"> <span class="badge badge-success-subtle">Accepting Now</span> </div> </div> <div class="comparison-row"> <div class="comparison-row-label"> Courses Available <i class="fa-light fa-circle-info comparison-row-info-icon" aria-label="Total A-level and vocational courses"></i> </div> <div class="comparison-row-value">32 courses</div> <div class="comparison-row-value">24 courses</div> <div class="comparison-row-value">47 courses</div> </div> </div> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">3. Row with info-icon in label cell</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Info icon:</strong> comparison-row-info-icon — 16px neutral-400 FA light circle-info icon, inline with the label text via the label's flex row. </p> </div> <div class="tw:border tw:border-line-card tw:rounded-[6px] tw:overflow-hidden"> <div class="tw:grid tw:grid-cols-4"> <div class="comparison-row"> <div class="comparison-row-label"> UCAS Tariff Points <i class="fa-light fa-circle-info comparison-row-info-icon" aria-label="Minimum tariff required for this school"></i> </div> <div class="comparison-row-value">112–120 pts</div> <div class="comparison-row-value">96–112 pts</div> <div class="comparison-row-value">120–136 pts</div> </div> <div class="comparison-row"> <div class="comparison-row-label"> Student Reviews <i class="fa-light fa-circle-info comparison-row-info-icon" aria-label="Based on verified student survey responses"></i> </div> <div class="comparison-row-value"> <span class="tw:text-green-600 tw:font-semibold">89%</span> positive </div> <div class="comparison-row-value"> <span class="tw:text-green-600 tw:font-semibold">76%</span> positive </div> <div class="comparison-row-value"> <span class="tw:text-green-600 tw:font-semibold">94%</span> positive </div> </div> </div> </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
<div class="tw:p-6 tw:max-w-4xl tw:mx-auto tw:space-y-8"> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>COMPONENT:</strong> Comparison Row (consumer-only)<br> <strong>VARIANTS:</strong> comparison-row-header (sticky header row) | comparison-row-label | comparison-row-value | comparison-row-info-icon </p> <p class="tw:mb-0 tw:text-sm"> Single row primitive for the side-by-side school comparison view. Label cell on the left + N value cells on the right. Caller wraps rows in a CSS grid (<code>tw:grid tw:grid-cols-4</code> for 3 schools + label column). No full "comparison table" wrapper — compose freely. </p> </div> <%# 1. Single row with 3 value cells %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">1. Single row — label + 3 value cells</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Structure:</strong> Caller wraps all cells in <code>tw:grid tw:grid-cols-4</code>. The row class (<code>comparison-row</code>) uses <code>display:contents</code> so the grid flows through the wrapper. Each cell has a 1px line-card top border. </p> </div> <div class="tw:grid tw:grid-cols-4 tw:border tw:border-line-card tw:rounded-[6px] tw:overflow-hidden"> <div class="comparison-row"> <div class="comparison-row-label">Ofsted Rating</div> <div class="comparison-row-value">Outstanding</div> <div class="comparison-row-value">Good</div> <div class="comparison-row-value">Requires Improvement</div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw:grid tw:grid-cols-4"><div class="comparison-row"><div class="comparison-row-label">…</div><div class="comparison-row-value">…</div>…</div></div></code> </div> </div> <%# 2. Header row + 3 data rows in a grid %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">2. Header row + 3 data rows — full comparison table</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Header row:</strong> comparison-row-header on each header cell — sticky top-0, bold 14px, bottom border. Data rows alternate label/value cells inside a shared 4-column grid. </p> </div> <div class="tw:border tw:border-line-card tw:rounded-[8px] tw:overflow-auto"> <div class="tw:grid tw:grid-cols-4"> <%# Header row %> <div class="comparison-row-header">School</div> <div class="comparison-row-header">Greenford High School</div> <div class="comparison-row-header">Cedar Grove Secondary</div> <div class="comparison-row-header">Hills Road Sixth Form</div> <%# Data rows %> <div class="comparison-row"> <div class="comparison-row-label"> Ofsted Rating <i class="fa-light fa-circle-info comparison-row-info-icon" aria-label="What is Ofsted?"></i> </div> <div class="comparison-row-value">Outstanding</div> <div class="comparison-row-value">Good</div> <div class="comparison-row-value">Outstanding</div> </div> <div class="comparison-row"> <div class="comparison-row-label">Application Status</div> <div class="comparison-row-value"> <span class="badge badge-success-subtle">Accepting Now</span> </div> <div class="comparison-row-value"> <span class="badge badge-warning-subtle">Opening Soon</span> </div> <div class="comparison-row-value"> <span class="badge badge-success-subtle">Accepting Now</span> </div> </div> <div class="comparison-row"> <div class="comparison-row-label"> Courses Available <i class="fa-light fa-circle-info comparison-row-info-icon" aria-label="Total A-level and vocational courses"></i> </div> <div class="comparison-row-value">32 courses</div> <div class="comparison-row-value">24 courses</div> <div class="comparison-row-value">47 courses</div> </div> </div> </div> </div> <%# 3. Row with info-icon label %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">3. Row with info-icon in label cell</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Info icon:</strong> comparison-row-info-icon — 16px neutral-400 FA light circle-info icon, inline with the label text via the label's flex row. </p> </div> <div class="tw:border tw:border-line-card tw:rounded-[6px] tw:overflow-hidden"> <div class="tw:grid tw:grid-cols-4"> <div class="comparison-row"> <div class="comparison-row-label"> UCAS Tariff Points <i class="fa-light fa-circle-info comparison-row-info-icon" aria-label="Minimum tariff required for this school"></i> </div> <div class="comparison-row-value">112–120 pts</div> <div class="comparison-row-value">96–112 pts</div> <div class="comparison-row-value">120–136 pts</div> </div> <div class="comparison-row"> <div class="comparison-row-label"> Student Reviews <i class="fa-light fa-circle-info comparison-row-info-icon" aria-label="Based on verified student survey responses"></i> </div> <div class="comparison-row-value"> <span class="tw:text-green-600 tw:font-semibold">89%</span> positive </div> <div class="comparison-row-value"> <span class="tw:text-green-600 tw:font-semibold">76%</span> positive </div> <div class="comparison-row-value"> <span class="tw:text-green-600 tw:font-semibold">94%</span> positive </div> </div> </div> </div> </div></div>No notes provided.
No params configured.