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
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>PATTERN:</strong> Stats Bar (consumer-only)<br> <strong>COMPOSES:</strong> (standalone — no other DS components) </p> <p class="tw:mb-0 tw:text-sm"> 4-column equal-width KPI strip. Sky-blue big numbers (36px, extrabold) above uppercase neutral-500 tracking-wide labels. Placed below the Hero Search pill to show platform scale. </p> </div> <!-- ── KPI strip ─────────────────────────────────────────────── --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">4-KPI strip — platform scale</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Demo:</strong> Four stats from the Figma design — courses / subjects / reviews / satisfaction. Uses <code>stats-bar</code> grid and <code>stats-bar-item</code> cells. </p> </div> <div class="stats-bar"> <div class="stats-bar-item"> <div class="stats-bar-value">5000+</div> <span class="stats-bar-label">Courses Available</span> </div> <div class="stats-bar-item"> <div class="stats-bar-value">900+</div> <span class="stats-bar-label">Subject Areas</span> </div> <div class="stats-bar-item"> <div class="stats-bar-value">5,000+</div> <span class="stats-bar-label">Student Reviews</span> </div> <div class="stats-bar-item"> <div class="stats-bar-value">98%</div> <span class="stats-bar-label">Course Satisfaction</span> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="stats-bar"><div class="stats-bar-item"><div class="stats-bar-value">5000+</div><span class="stats-bar-label">Courses Available</span></div>...</div></code> </div> </div> <!-- ── In context below Hero Search ─────────────────────────── --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">In context — below Hero Search</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> The stats bar sits inside the hero wash immediately after the search pill. <code>margin-top: 26px</code> is built into <code>stats-bar</code>. </p> </div> <div class="consumer-hero-wash tw:py-10 tw:px-6 tw:rounded-lg"> <h2 class="tw:text-2xl tw:font-bold tw:text-center tw:mb-8 tw:text-primary-ink"> Find your sixth form. Compare. Apply. </h2> <!-- Abbreviated hero pill --> <div class="hero-search"> <div class="hero-search-pill"> <div class="hero-search-field"> <span class="hero-search-field-label">Type of school</span> <div class="hero-search-field-value-row"> <span class="hero-search-field-value hero-search-field-value-placeholder"> (e.g., Sixth Form School) </span> <span class="hero-search-field-chevron" aria-hidden="true"> <i class="fa-light fa-chevron-down tw:text-xs"></i> </span> </div> </div> <div class="hero-search-field tw:flex-[2]"> <span class="hero-search-field-label">What to study</span> <div class="hero-search-field-value-row"> <span class="hero-search-field-value hero-search-field-value-placeholder"> Choose subjects </span> </div> </div> <div class="hero-search-field tw:flex-[1.2]"> <span class="hero-search-field-label">Near to</span> <div class="hero-search-field-value-row"> <span class="hero-search-field-value hero-search-field-value-placeholder"> Enter postcode </span> </div> </div> <button type="button" class="hero-search-submit" aria-label="Search providers"> <i class="fa-light fa-magnifying-glass tw:text-lg" aria-hidden="true"></i> </button> </div> <div class="hero-search-meta"> <a href="#" class="hero-search-toggle" aria-label="Open advanced filters"> <i class="fa-light fa-sliders" aria-hidden="true"></i> Advanced Filters <i class="fa-light fa-chevron-down tw:text-xs" aria-hidden="true"></i> </a> <span class="hero-search-results"> <i class="fa-light fa-magnifying-glass" aria-hidden="true"></i> 245 potential results </span> </div> </div> <!-- Stats bar below --> <div class="stats-bar"> <div class="stats-bar-item"> <div class="stats-bar-value">5000+</div> <span class="stats-bar-label">Courses Available</span> </div> <div class="stats-bar-item"> <div class="stats-bar-value">900+</div> <span class="stats-bar-label">Subject Areas</span> </div> <div class="stats-bar-item"> <div class="stats-bar-value">5,000+</div> <span class="stats-bar-label">Student Reviews</span> </div> <div class="stats-bar-item"> <div class="stats-bar-value">98%</div> <span class="stats-bar-label">Course Satisfaction</span> </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
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>PATTERN:</strong> Stats Bar (consumer-only)<br> <strong>COMPOSES:</strong> (standalone — no other DS components) </p> <p class="tw:mb-0 tw:text-sm"> 4-column equal-width KPI strip. Sky-blue big numbers (36px, extrabold) above uppercase neutral-500 tracking-wide labels. Placed below the Hero Search pill to show platform scale. </p> </div> <!-- ── KPI strip ─────────────────────────────────────────────── --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">4-KPI strip — platform scale</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Demo:</strong> Four stats from the Figma design — courses / subjects / reviews / satisfaction. Uses <code>stats-bar</code> grid and <code>stats-bar-item</code> cells. </p> </div> <div class="stats-bar"> <div class="stats-bar-item"> <div class="stats-bar-value">5000+</div> <span class="stats-bar-label">Courses Available</span> </div> <div class="stats-bar-item"> <div class="stats-bar-value">900+</div> <span class="stats-bar-label">Subject Areas</span> </div> <div class="stats-bar-item"> <div class="stats-bar-value">5,000+</div> <span class="stats-bar-label">Student Reviews</span> </div> <div class="stats-bar-item"> <div class="stats-bar-value">98%</div> <span class="stats-bar-label">Course Satisfaction</span> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="stats-bar"><div class="stats-bar-item"><div class="stats-bar-value">5000+</div><span class="stats-bar-label">Courses Available</span></div>...</div></code> </div> </div> <!-- ── In context below Hero Search ─────────────────────────── --> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">In context — below Hero Search</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> The stats bar sits inside the hero wash immediately after the search pill. <code>margin-top: 26px</code> is built into <code>stats-bar</code>. </p> </div> <div class="consumer-hero-wash tw:py-10 tw:px-6 tw:rounded-lg"> <h2 class="tw:text-2xl tw:font-bold tw:text-center tw:mb-8 tw:text-primary-ink"> Find your sixth form. Compare. Apply. </h2> <!-- Abbreviated hero pill --> <div class="hero-search"> <div class="hero-search-pill"> <div class="hero-search-field"> <span class="hero-search-field-label">Type of school</span> <div class="hero-search-field-value-row"> <span class="hero-search-field-value hero-search-field-value-placeholder"> (e.g., Sixth Form School) </span> <span class="hero-search-field-chevron" aria-hidden="true"> <i class="fa-light fa-chevron-down tw:text-xs"></i> </span> </div> </div> <div class="hero-search-field tw:flex-[2]"> <span class="hero-search-field-label">What to study</span> <div class="hero-search-field-value-row"> <span class="hero-search-field-value hero-search-field-value-placeholder"> Choose subjects </span> </div> </div> <div class="hero-search-field tw:flex-[1.2]"> <span class="hero-search-field-label">Near to</span> <div class="hero-search-field-value-row"> <span class="hero-search-field-value hero-search-field-value-placeholder"> Enter postcode </span> </div> </div> <button type="button" class="hero-search-submit" aria-label="Search providers"> <i class="fa-light fa-magnifying-glass tw:text-lg" aria-hidden="true"></i> </button> </div> <div class="hero-search-meta"> <a href="#" class="hero-search-toggle" aria-label="Open advanced filters"> <i class="fa-light fa-sliders" aria-hidden="true"></i> Advanced Filters <i class="fa-light fa-chevron-down tw:text-xs" aria-hidden="true"></i> </a> <span class="hero-search-results"> <i class="fa-light fa-magnifying-glass" aria-hidden="true"></i> 245 potential results </span> </div> </div> <!-- Stats bar below --> <div class="stats-bar"> <div class="stats-bar-item"> <div class="stats-bar-value">5000+</div> <span class="stats-bar-label">Courses Available</span> </div> <div class="stats-bar-item"> <div class="stats-bar-value">900+</div> <span class="stats-bar-label">Subject Areas</span> </div> <div class="stats-bar-item"> <div class="stats-bar-value">5,000+</div> <span class="stats-bar-label">Student Reviews</span> </div> <div class="stats-bar-item"> <div class="stats-bar-value">98%</div> <span class="stats-bar-label">Course Satisfaction</span> </div> </div> </div> </div></div>No notes provided.
No params configured.