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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>FORM CARD:</strong> The tile for a publishable form in a card gallery<br> <strong>COMPOSES:</strong> Card | Tag | Dropdown | Button | Form Switch </p> <p class="tw:mb-0 tw:text-sm"> Promoted from five near-identical hand-rolled copies on the enquiry-forms page. Pairs with the Data Listing <strong>Card Gallery variant</strong>. Tiles in a row are equal height and their action rows line up, because the blurb takes the slack rather than the buttons. </p> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">In a Gallery</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Anatomy:</strong> tags + kebab → title → blurb (grows) → metrics strip → actions. The metrics strip breaks out to the card's edges so its rule spans the full width. Note the second card's longer blurb: the buttons still line up. </p> </div> <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:xl:grid-cols-3 tw:gap-4"> <div class="tw-card tw-form-card"> <div class="tw-card-body"> <div class="tw-form-card-head"> <div class="tw-form-card-tags"> <span class="tw-tag tw-tag-pill tw-tag-success-subtle">Published</span> <span class="tw-tag tw-tag-pill tw-tag-info-subtle">Registration</span> </div> <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless tw-dropdown-sm" data-controller="dropdown"> <button class="tw-dropdown-trigger" type="button" aria-label="More actions for Open Day Registration" data-dropdown-target="trigger" data-action="click->dropdown#toggle"> <i class="fa-solid fa-ellipsis-vertical"></i> </button> <div class="tw-dropdown-menu tw-dropdown-menu-end" data-dropdown-target="menu" tabindex="-1"> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"><span class="tw-dropdown-item-text">Edit</span></button> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"><span class="tw-dropdown-item-text">Duplicate</span></button> <div class="tw-dropdown-divider"></div> <button class="tw-dropdown-item tw-dropdown-item-danger" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"><span class="tw-dropdown-item-text">Delete</span></button> </div> </div> </div> <h3 class="tw-form-card-title">Open Day Registration</h3> <p class="tw-form-card-desc">Sign-up form for autumn Open Day events — embed on your school website.</p> <div class="tw-form-card-meta"> <span class="tw-form-card-metric"> <i class="fa-solid fa-chart-simple" aria-hidden="true"></i> <span>87</span> <span class="tw-form-card-metric-label">enquiries</span> </span> <span class="tw-form-card-note"> <i class="fa-regular fa-calendar" aria-hidden="true"></i> <span>Modified 4 Jan 2026</span> </span> </div> <div class="tw-form-card-actions"> <button class="tw-btn tw-btn-secondary" type="button"><i class="fa-solid fa-link tw:mr-1"></i>Copy URL</button> <button class="tw-btn tw-btn-secondary" type="button"><i class="fa-solid fa-code tw:mr-1"></i>Embed</button> </div> </div> </div> <div class="tw-card tw-form-card"> <div class="tw-card-body"> <div class="tw-form-card-head"> <div class="tw-form-card-tags"> <span class="tw-tag tw-tag-pill tw-tag-success-subtle">Published</span> <span class="tw-tag tw-tag-pill tw-tag-magenta-subtle">Content offer</span> </div> <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless tw-dropdown-sm" data-controller="dropdown"> <button class="tw-dropdown-trigger" type="button" aria-label="More actions for Sixth Form Prospectus" data-dropdown-target="trigger" data-action="click->dropdown#toggle"> <i class="fa-solid fa-ellipsis-vertical"></i> </button> <div class="tw-dropdown-menu tw-dropdown-menu-end" data-dropdown-target="menu" tabindex="-1"> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"><span class="tw-dropdown-item-text">Edit</span></button> </div> </div> </div> <h3 class="tw-form-card-title">Sixth Form Prospectus Download</h3> <p class="tw-form-card-desc">Families give their details to download the prospectus. Used by the marketing team to follow up warm leads, and the longest description here on purpose — the action row below still lines up with its neighbours.</p> <div class="tw-form-card-meta"> <span class="tw-form-card-metric"> <i class="fa-solid fa-chart-simple" aria-hidden="true"></i> <span>1,284</span> <span class="tw-form-card-metric-label">enquiries</span> </span> <span class="tw-form-card-note"> <i class="fa-regular fa-calendar" aria-hidden="true"></i> <span>Modified 21 Feb 2026</span> </span> </div> <div class="tw-form-card-actions"> <button class="tw-btn tw-btn-secondary" type="button"><i class="fa-solid fa-link tw:mr-1"></i>Copy URL</button> <button class="tw-btn tw-btn-secondary" type="button"><i class="fa-solid fa-code tw:mr-1"></i>Embed</button> </div> </div> </div> <div class="tw-card tw-form-card"> <div class="tw-card-body"> <div class="tw-form-card-head"> <div class="tw-form-card-tags"> <span class="tw-tag tw-tag-pill tw-tag-secondary-subtle">Draft</span> <span class="tw-tag tw-tag-pill tw-tag-info-subtle">Registration</span> </div> <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless tw-dropdown-sm" data-controller="dropdown"> <button class="tw-dropdown-trigger" type="button" aria-label="More actions for Year 7 Taster Day" data-dropdown-target="trigger" data-action="click->dropdown#toggle"> <i class="fa-solid fa-ellipsis-vertical"></i> </button> <div class="tw-dropdown-menu tw-dropdown-menu-end" data-dropdown-target="menu" tabindex="-1"> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"><span class="tw-dropdown-item-text">Edit</span></button> </div> </div> </div> <h3 class="tw-form-card-title">Year 7 Taster Day</h3> <p class="tw-form-card-desc">Not yet published — no submissions can be taken.</p> <div class="tw-form-card-meta"> <span class="tw-form-card-metric"> <i class="fa-solid fa-chart-simple" aria-hidden="true"></i> <span>—</span> <span class="tw-form-card-metric-label">enquiries</span> </span> <span class="tw-form-card-note"> <i class="fa-regular fa-calendar" aria-hidden="true"></i> <span>Modified 28 Feb 2026</span> </span> </div> <div class="tw-form-card-actions"> <button class="tw-btn tw-btn-secondary" type="button"><i class="fa-solid fa-pen tw:mr-1"></i>Edit</button> <button class="tw-btn tw-btn-primary" type="button">Publish</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-card tw-form-card"><div class="tw-card-body">head → title → desc → meta → actions</div></div></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">With a Live Switch</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> Where publishing is a toggle rather than a menu action, the switch sits in the actions row with a visible label. <strong>It never sits alone in the header</strong> — an unlabelled switch beside two status tags is three things claiming to say the same thing. </p> </div> <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:gap-4 tw:max-w-3xl"> <div class="tw-card tw-form-card"> <div class="tw-card-body"> <div class="tw-form-card-head"> <div class="tw-form-card-tags"> <span class="tw-tag tw-tag-pill tw-tag-info-subtle">Application</span> </div> </div> <h3 class="tw-form-card-title">Year 7 Main Entry 2027</h3> <p class="tw-form-card-desc">The main application form for September 2027 entry.</p> <div class="tw-form-card-meta"> <span class="tw-form-card-metric"> <i class="fa-solid fa-chart-simple" aria-hidden="true"></i> <span>1,284</span> <span class="tw-form-card-metric-label">applications</span> </span> </div> <div class="tw-form-card-actions"> <div class="tw-form-check tw-form-switch tw:mb-0 tw:flex tw:items-center tw:gap-2"> <input class="tw-form-check-input" type="checkbox" role="switch" id="formCardLive" checked> <label class="tw-form-check-label tw:mb-0" for="formCardLive">Accepting applications</label> </div> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-form-card-actions"><div class="tw-form-check tw-form-switch">…</div></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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>FORM CARD:</strong> The tile for a publishable form in a card gallery<br> <strong>COMPOSES:</strong> Card | Tag | Dropdown | Button | Form Switch </p> <p class="tw:mb-0 tw:text-sm"> Promoted from five near-identical hand-rolled copies on the enquiry-forms page. Pairs with the Data Listing <strong>Card Gallery variant</strong>. Tiles in a row are equal height and their action rows line up, because the blurb takes the slack rather than the buttons. </p> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">In a Gallery</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Anatomy:</strong> tags + kebab → title → blurb (grows) → metrics strip → actions. The metrics strip breaks out to the card's edges so its rule spans the full width. Note the second card's longer blurb: the buttons still line up. </p> </div> <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:xl:grid-cols-3 tw:gap-4"> <div class="tw-card tw-form-card"> <div class="tw-card-body"> <div class="tw-form-card-head"> <div class="tw-form-card-tags"> <span class="tw-tag tw-tag-pill tw-tag-success-subtle">Published</span> <span class="tw-tag tw-tag-pill tw-tag-info-subtle">Registration</span> </div> <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless tw-dropdown-sm" data-controller="dropdown"> <button class="tw-dropdown-trigger" type="button" aria-label="More actions for Open Day Registration" data-dropdown-target="trigger" data-action="click->dropdown#toggle"> <i class="fa-solid fa-ellipsis-vertical"></i> </button> <div class="tw-dropdown-menu tw-dropdown-menu-end" data-dropdown-target="menu" tabindex="-1"> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"><span class="tw-dropdown-item-text">Edit</span></button> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"><span class="tw-dropdown-item-text">Duplicate</span></button> <div class="tw-dropdown-divider"></div> <button class="tw-dropdown-item tw-dropdown-item-danger" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"><span class="tw-dropdown-item-text">Delete</span></button> </div> </div> </div> <h3 class="tw-form-card-title">Open Day Registration</h3> <p class="tw-form-card-desc">Sign-up form for autumn Open Day events — embed on your school website.</p> <div class="tw-form-card-meta"> <span class="tw-form-card-metric"> <i class="fa-solid fa-chart-simple" aria-hidden="true"></i> <span>87</span> <span class="tw-form-card-metric-label">enquiries</span> </span> <span class="tw-form-card-note"> <i class="fa-regular fa-calendar" aria-hidden="true"></i> <span>Modified 4 Jan 2026</span> </span> </div> <div class="tw-form-card-actions"> <button class="tw-btn tw-btn-secondary" type="button"><i class="fa-solid fa-link tw:mr-1"></i>Copy URL</button> <button class="tw-btn tw-btn-secondary" type="button"><i class="fa-solid fa-code tw:mr-1"></i>Embed</button> </div> </div> </div> <div class="tw-card tw-form-card"> <div class="tw-card-body"> <div class="tw-form-card-head"> <div class="tw-form-card-tags"> <span class="tw-tag tw-tag-pill tw-tag-success-subtle">Published</span> <span class="tw-tag tw-tag-pill tw-tag-magenta-subtle">Content offer</span> </div> <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless tw-dropdown-sm" data-controller="dropdown"> <button class="tw-dropdown-trigger" type="button" aria-label="More actions for Sixth Form Prospectus" data-dropdown-target="trigger" data-action="click->dropdown#toggle"> <i class="fa-solid fa-ellipsis-vertical"></i> </button> <div class="tw-dropdown-menu tw-dropdown-menu-end" data-dropdown-target="menu" tabindex="-1"> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"><span class="tw-dropdown-item-text">Edit</span></button> </div> </div> </div> <h3 class="tw-form-card-title">Sixth Form Prospectus Download</h3> <p class="tw-form-card-desc">Families give their details to download the prospectus. Used by the marketing team to follow up warm leads, and the longest description here on purpose — the action row below still lines up with its neighbours.</p> <div class="tw-form-card-meta"> <span class="tw-form-card-metric"> <i class="fa-solid fa-chart-simple" aria-hidden="true"></i> <span>1,284</span> <span class="tw-form-card-metric-label">enquiries</span> </span> <span class="tw-form-card-note"> <i class="fa-regular fa-calendar" aria-hidden="true"></i> <span>Modified 21 Feb 2026</span> </span> </div> <div class="tw-form-card-actions"> <button class="tw-btn tw-btn-secondary" type="button"><i class="fa-solid fa-link tw:mr-1"></i>Copy URL</button> <button class="tw-btn tw-btn-secondary" type="button"><i class="fa-solid fa-code tw:mr-1"></i>Embed</button> </div> </div> </div> <div class="tw-card tw-form-card"> <div class="tw-card-body"> <div class="tw-form-card-head"> <div class="tw-form-card-tags"> <span class="tw-tag tw-tag-pill tw-tag-secondary-subtle">Draft</span> <span class="tw-tag tw-tag-pill tw-tag-info-subtle">Registration</span> </div> <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless tw-dropdown-sm" data-controller="dropdown"> <button class="tw-dropdown-trigger" type="button" aria-label="More actions for Year 7 Taster Day" data-dropdown-target="trigger" data-action="click->dropdown#toggle"> <i class="fa-solid fa-ellipsis-vertical"></i> </button> <div class="tw-dropdown-menu tw-dropdown-menu-end" data-dropdown-target="menu" tabindex="-1"> <button class="tw-dropdown-item" type="button" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select"><span class="tw-dropdown-item-text">Edit</span></button> </div> </div> </div> <h3 class="tw-form-card-title">Year 7 Taster Day</h3> <p class="tw-form-card-desc">Not yet published — no submissions can be taken.</p> <div class="tw-form-card-meta"> <span class="tw-form-card-metric"> <i class="fa-solid fa-chart-simple" aria-hidden="true"></i> <span>—</span> <span class="tw-form-card-metric-label">enquiries</span> </span> <span class="tw-form-card-note"> <i class="fa-regular fa-calendar" aria-hidden="true"></i> <span>Modified 28 Feb 2026</span> </span> </div> <div class="tw-form-card-actions"> <button class="tw-btn tw-btn-secondary" type="button"><i class="fa-solid fa-pen tw:mr-1"></i>Edit</button> <button class="tw-btn tw-btn-primary" type="button">Publish</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-card tw-form-card"><div class="tw-card-body">head → title → desc → meta → actions</div></div></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">With a Live Switch</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> Where publishing is a toggle rather than a menu action, the switch sits in the actions row with a visible label. <strong>It never sits alone in the header</strong> — an unlabelled switch beside two status tags is three things claiming to say the same thing. </p> </div> <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:gap-4 tw:max-w-3xl"> <div class="tw-card tw-form-card"> <div class="tw-card-body"> <div class="tw-form-card-head"> <div class="tw-form-card-tags"> <span class="tw-tag tw-tag-pill tw-tag-info-subtle">Application</span> </div> </div> <h3 class="tw-form-card-title">Year 7 Main Entry 2027</h3> <p class="tw-form-card-desc">The main application form for September 2027 entry.</p> <div class="tw-form-card-meta"> <span class="tw-form-card-metric"> <i class="fa-solid fa-chart-simple" aria-hidden="true"></i> <span>1,284</span> <span class="tw-form-card-metric-label">applications</span> </span> </div> <div class="tw-form-card-actions"> <div class="tw-form-check tw-form-switch tw:mb-0 tw:flex tw:items-center tw:gap-2"> <input class="tw-form-check-input" type="checkbox" role="switch" id="formCardLive" checked> <label class="tw-form-check-label tw:mb-0" for="formCardLive">Accepting applications</label> </div> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-form-card-actions"><div class="tw-form-check tw-form-switch">…</div></div></code> </div> </div></div>No notes provided.
No params configured.