maverick-wave 4.14.0 → 4.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/skills/maverick-wave/SKILL.md +4 -1
- package/.claude/skills/maverick-wave/references/components.md +162 -0
- package/CHANGELOG.md +13 -0
- package/README.md +1 -1
- package/index.html +68 -0
- package/maverick-wave.min.css +2 -2
- package/package.json +2 -2
- package/src/partials/pricing-container.html +523 -0
- package/src/scss/base/_reset.scss +9 -0
- package/src/scss/components/_index.scss +1 -0
- package/src/scss/components/_pricing.scss +231 -0
- package/src/scss/components/_segmented.scss +12 -0
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "maverick-wave",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.16.0",
|
|
4
4
|
"config": {
|
|
5
|
-
"version_short": "4.
|
|
5
|
+
"version_short": "4.16"
|
|
6
6
|
},
|
|
7
7
|
"description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
|
|
8
8
|
"main": "src/js/main.js",
|
|
@@ -0,0 +1,523 @@
|
|
|
1
|
+
<h3 class="mw-section-subtitle">Pricing</h3>
|
|
2
|
+
<p class="mw-text-muted mw-text-measure mw-mb-6">
|
|
3
|
+
Two pieces that are usually needed together: <code>mw-price</code>, the figure
|
|
4
|
+
on its own, and <code>mw-offer</code>, the card it is sold from. The price is
|
|
5
|
+
one baseline row - what it cost before, what it costs now, the unit, a
|
|
6
|
+
discount tag - and everything in it is sized in <code>em</code> off
|
|
7
|
+
<code>--mw-price-size</code>, so <code>mw-price-sm</code> and
|
|
8
|
+
<code>mw-price-lg</code> move the whole row at once.
|
|
9
|
+
</p>
|
|
10
|
+
<p class="mw-text-muted mw-text-measure mw-mb-6">
|
|
11
|
+
A struck-through price is a visual convention that a screen reader does not
|
|
12
|
+
pass on - <code><s></code> is announced by almost none of them. Where an
|
|
13
|
+
old and a new price stand next to each other, name them with
|
|
14
|
+
<code>mw-sr-only</code>, as in the examples below. Without that the reader
|
|
15
|
+
hears two prices and no idea which one is being charged.
|
|
16
|
+
</p>
|
|
17
|
+
|
|
18
|
+
<h3 class="mw-card-title mw-mb-4">Price</h3>
|
|
19
|
+
|
|
20
|
+
<div class="mw-grid-2-lg">
|
|
21
|
+
<div>
|
|
22
|
+
<div class="mw-card mw-card-simple">
|
|
23
|
+
<h5 class="mw-text-medium mw-mb-2">Plain price</h5>
|
|
24
|
+
<p class="mw-text-muted mw-text-sm mw-mb-5">
|
|
25
|
+
<code>mw-price-amount</code> plus <code>mw-price-currency</code>. The
|
|
26
|
+
unit is a word next to the figure, not part of it - it stays at reading
|
|
27
|
+
size while the number carries the weight.
|
|
28
|
+
</p>
|
|
29
|
+
<p class="mw-price">
|
|
30
|
+
<span class="mw-price-amount">129</span>
|
|
31
|
+
<span class="mw-price-currency">Euro</span>
|
|
32
|
+
</p>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<div class="mw-card mw-card-simple mw-mt-4">
|
|
36
|
+
<h5 class="mw-text-medium mw-mb-2">With a discount tag</h5>
|
|
37
|
+
<p class="mw-text-muted mw-text-sm mw-mb-5">
|
|
38
|
+
Any <code>mw-tag</code> or <code>mw-badge</code> placed directly in the
|
|
39
|
+
row is centred against the digits instead of hung off their baseline.
|
|
40
|
+
</p>
|
|
41
|
+
<p class="mw-price">
|
|
42
|
+
<span class="mw-price-amount">129</span>
|
|
43
|
+
<span class="mw-price-currency">Euro</span>
|
|
44
|
+
<span class="mw-tag mw-tag-secondary">-20%</span>
|
|
45
|
+
</p>
|
|
46
|
+
</div>
|
|
47
|
+
|
|
48
|
+
<div class="mw-card mw-card-simple mw-mt-4">
|
|
49
|
+
<h5 class="mw-text-medium mw-mb-2">Old price struck through</h5>
|
|
50
|
+
<p class="mw-text-muted mw-text-sm mw-mb-5">
|
|
51
|
+
<code>mw-price-original</code> is muted <em>and</em> struck. Muted alone
|
|
52
|
+
reads as a footnote; the line is what says this is no longer the price.
|
|
53
|
+
It takes its own line above the new price, because inline the row gets
|
|
54
|
+
long and the first thing to wrap away is the discount tag.
|
|
55
|
+
</p>
|
|
56
|
+
<p class="mw-price">
|
|
57
|
+
<span class="mw-price-original">
|
|
58
|
+
<span class="mw-sr-only">Regular price:</span>159 Euro
|
|
59
|
+
</span>
|
|
60
|
+
<span class="mw-sr-only">Now:</span>
|
|
61
|
+
<span class="mw-price-amount">129</span>
|
|
62
|
+
<span class="mw-price-currency">Euro</span>
|
|
63
|
+
<span class="mw-tag mw-tag-secondary">-20%</span>
|
|
64
|
+
</p>
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
<div class="mw-card mw-card-simple mw-mt-4">
|
|
68
|
+
<h5 class="mw-text-medium mw-mb-2">Both prices on one line</h5>
|
|
69
|
+
<p class="mw-text-muted mw-text-sm mw-mb-5">
|
|
70
|
+
<code>mw-price-inline</code> puts the old price in front of the new one
|
|
71
|
+
instead of above it. For a wide card or a table row that has the width
|
|
72
|
+
to spare - check it at the narrow end before reaching for it.
|
|
73
|
+
</p>
|
|
74
|
+
<p class="mw-price mw-price-inline">
|
|
75
|
+
<span class="mw-price-original">
|
|
76
|
+
<span class="mw-sr-only">Regular price:</span>159 Euro
|
|
77
|
+
</span>
|
|
78
|
+
<span class="mw-sr-only">Now:</span>
|
|
79
|
+
<span class="mw-price-amount">129</span>
|
|
80
|
+
<span class="mw-price-currency">Euro</span>
|
|
81
|
+
<span class="mw-tag mw-tag-secondary">-20%</span>
|
|
82
|
+
</p>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<div class="mw-card mw-card-simple mw-mt-4">
|
|
86
|
+
<h5 class="mw-text-medium mw-mb-2">Not a figure</h5>
|
|
87
|
+
<p class="mw-text-muted mw-text-sm mw-mb-5">
|
|
88
|
+
<code>mw-price-word</code> for "on request" or "free" - still bold, so
|
|
89
|
+
it holds the same slot in a row of cards, but set well below the size a
|
|
90
|
+
number gets.
|
|
91
|
+
</p>
|
|
92
|
+
<p class="mw-price mw-mb-4">
|
|
93
|
+
<span class="mw-price-word">On request</span>
|
|
94
|
+
</p>
|
|
95
|
+
<p class="mw-price">
|
|
96
|
+
<span class="mw-price-word">Free</span>
|
|
97
|
+
<span class="mw-tag mw-tag-success">Trial</span>
|
|
98
|
+
</p>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<div>
|
|
103
|
+
<div class="mw-card mw-card-simple">
|
|
104
|
+
<h5 class="mw-text-medium mw-mb-2">Decimals</h5>
|
|
105
|
+
<p class="mw-text-muted mw-text-sm mw-mb-5">
|
|
106
|
+
<code>mw-price-fraction</code> sits inside the amount, one step down and
|
|
107
|
+
on the baseline. Cents raised to the cap height are a discounter's idiom
|
|
108
|
+
- a service price that borrows it reads cheaper than it is.
|
|
109
|
+
</p>
|
|
110
|
+
<p class="mw-price">
|
|
111
|
+
<span class="mw-price-original">
|
|
112
|
+
<span class="mw-sr-only">Regular price:</span>159,90 Euro
|
|
113
|
+
</span>
|
|
114
|
+
<span class="mw-sr-only">Now:</span>
|
|
115
|
+
<span class="mw-price-amount"
|
|
116
|
+
>129<span class="mw-price-fraction">,90</span></span
|
|
117
|
+
>
|
|
118
|
+
<span class="mw-price-currency">Euro</span>
|
|
119
|
+
<span class="mw-tag mw-tag-secondary">-19%</span>
|
|
120
|
+
</p>
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
<div class="mw-card mw-card-simple mw-mt-4">
|
|
124
|
+
<h5 class="mw-text-medium mw-mb-2">Period and note</h5>
|
|
125
|
+
<p class="mw-text-muted mw-text-sm mw-mb-5">
|
|
126
|
+
<code>mw-price-period</code> for what the price is per,
|
|
127
|
+
<code>mw-price-note</code> for the line under it. The note is a sibling
|
|
128
|
+
of the row, not a child - inside it, it would be set at price size.
|
|
129
|
+
</p>
|
|
130
|
+
<p class="mw-price">
|
|
131
|
+
<span class="mw-price-amount">49</span>
|
|
132
|
+
<span class="mw-price-currency">Euro</span>
|
|
133
|
+
<span class="mw-price-period">/ month</span>
|
|
134
|
+
</p>
|
|
135
|
+
<p class="mw-price-note">Billed yearly, cancel any time.</p>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
<div class="mw-card mw-card-simple mw-mt-4">
|
|
139
|
+
<h5 class="mw-text-medium mw-mb-2">Sizes</h5>
|
|
140
|
+
<p class="mw-text-muted mw-text-sm mw-mb-5">
|
|
141
|
+
<code>mw-price-sm</code>, default and <code>mw-price-lg</code>. Only
|
|
142
|
+
<code>--mw-price-size</code> changes - the struck price, the cents and
|
|
143
|
+
the unit follow it.
|
|
144
|
+
</p>
|
|
145
|
+
<p class="mw-price mw-price-sm mw-mb-4">
|
|
146
|
+
<span class="mw-price-original">159 Euro</span>
|
|
147
|
+
<span class="mw-price-amount"
|
|
148
|
+
>129<span class="mw-price-fraction">,90</span></span
|
|
149
|
+
>
|
|
150
|
+
<span class="mw-price-currency">Euro</span>
|
|
151
|
+
</p>
|
|
152
|
+
<p class="mw-price mw-mb-4">
|
|
153
|
+
<span class="mw-price-original">159 Euro</span>
|
|
154
|
+
<span class="mw-price-amount"
|
|
155
|
+
>129<span class="mw-price-fraction">,90</span></span
|
|
156
|
+
>
|
|
157
|
+
<span class="mw-price-currency">Euro</span>
|
|
158
|
+
</p>
|
|
159
|
+
<p class="mw-price mw-price-lg">
|
|
160
|
+
<span class="mw-price-original">159 Euro</span>
|
|
161
|
+
<span class="mw-price-amount"
|
|
162
|
+
>129<span class="mw-price-fraction">,90</span></span
|
|
163
|
+
>
|
|
164
|
+
<span class="mw-price-currency">Euro</span>
|
|
165
|
+
</p>
|
|
166
|
+
</div>
|
|
167
|
+
|
|
168
|
+
<div class="mw-card mw-card-simple mw-mt-4">
|
|
169
|
+
<h5 class="mw-text-medium mw-mb-2">Centred and plain</h5>
|
|
170
|
+
<p class="mw-text-muted mw-text-sm mw-mb-5">
|
|
171
|
+
<code>mw-price-center</code> for a centred card,
|
|
172
|
+
<code>mw-price-plain</code> for body colour instead of the brand - a
|
|
173
|
+
table row where a coloured price would be the loudest thing on screen
|
|
174
|
+
for no reason.
|
|
175
|
+
</p>
|
|
176
|
+
<p class="mw-price mw-price-center mw-mb-4">
|
|
177
|
+
<span class="mw-price-amount">129</span>
|
|
178
|
+
<span class="mw-price-currency">Euro</span>
|
|
179
|
+
</p>
|
|
180
|
+
<p class="mw-price mw-price-sm mw-price-plain">
|
|
181
|
+
<span class="mw-price-original">159 Euro</span>
|
|
182
|
+
<span class="mw-price-amount">129</span>
|
|
183
|
+
<span class="mw-price-currency">Euro</span>
|
|
184
|
+
</p>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
|
|
189
|
+
<h3 class="mw-card-title mw-mt-9 mw-mb-4">Offer cards</h3>
|
|
190
|
+
<p class="mw-text-muted mw-text-measure mw-mb-6">
|
|
191
|
+
<code>mw-offer</code> goes on a <code>mw-card</code> and does one thing the
|
|
192
|
+
card cannot: it pushes the price to the bottom of the body, so the prices in a
|
|
193
|
+
row line up even though the feature lists have different lengths. Everything
|
|
194
|
+
else - shell, body, footer, the <code>mw-card-feature</code> frame around the
|
|
195
|
+
plan you want picked - is the card's.
|
|
196
|
+
</p>
|
|
197
|
+
|
|
198
|
+
<div class="mw-grid-3 mw-mt-10">
|
|
199
|
+
<article class="mw-card mw-offer">
|
|
200
|
+
<div class="mw-card-body">
|
|
201
|
+
<h3 class="mw-card-title">Starter</h3>
|
|
202
|
+
<hr class="mw-card-title-divider" />
|
|
203
|
+
<p class="mw-card-text">
|
|
204
|
+
One project, one seat. Enough to see whether this is the right tool.
|
|
205
|
+
</p>
|
|
206
|
+
<ul class="mw-list mw-list-check">
|
|
207
|
+
<li>1 project</li>
|
|
208
|
+
<li>5 GB storage</li>
|
|
209
|
+
<li>Community support</li>
|
|
210
|
+
</ul>
|
|
211
|
+
<p class="mw-price mw-price-sm">
|
|
212
|
+
<span class="mw-price-amount">19</span>
|
|
213
|
+
<span class="mw-price-currency">Euro</span>
|
|
214
|
+
<span class="mw-price-period">/ month</span>
|
|
215
|
+
</p>
|
|
216
|
+
<p class="mw-price-note">Cancel any time.</p>
|
|
217
|
+
<div class="mw-card-footer">
|
|
218
|
+
<button class="mw-btn mw-btn-outline">Choose Starter</button>
|
|
219
|
+
</div>
|
|
220
|
+
</div>
|
|
221
|
+
</article>
|
|
222
|
+
|
|
223
|
+
<div class="mw-card-feature mw-card-feature-secondary">
|
|
224
|
+
<p class="mw-card-feature-label">Most booked</p>
|
|
225
|
+
<article class="mw-card mw-offer">
|
|
226
|
+
<div class="mw-card-body">
|
|
227
|
+
<h3 class="mw-card-title">Studio</h3>
|
|
228
|
+
<hr class="mw-card-title-divider" />
|
|
229
|
+
<p class="mw-card-text">
|
|
230
|
+
The one most teams end up on: enough seats for a squad, no limits that
|
|
231
|
+
get in the way mid-sprint.
|
|
232
|
+
</p>
|
|
233
|
+
<ul class="mw-list mw-list-check">
|
|
234
|
+
<li>10 projects</li>
|
|
235
|
+
<li>100 GB storage</li>
|
|
236
|
+
<li>Priority support</li>
|
|
237
|
+
<li>Custom domain</li>
|
|
238
|
+
</ul>
|
|
239
|
+
<p class="mw-price mw-price-sm">
|
|
240
|
+
<span class="mw-price-original">
|
|
241
|
+
<span class="mw-sr-only">Regular price:</span>59 Euro
|
|
242
|
+
</span>
|
|
243
|
+
<span class="mw-sr-only">Now:</span>
|
|
244
|
+
<span class="mw-price-amount">49</span>
|
|
245
|
+
<span class="mw-price-currency">Euro</span>
|
|
246
|
+
<span class="mw-tag mw-tag-secondary">-17%</span>
|
|
247
|
+
</p>
|
|
248
|
+
<p class="mw-price-note">Per month, billed yearly.</p>
|
|
249
|
+
<div class="mw-card-footer">
|
|
250
|
+
<button class="mw-btn mw-btn-primary">Choose Studio</button>
|
|
251
|
+
</div>
|
|
252
|
+
</div>
|
|
253
|
+
</article>
|
|
254
|
+
</div>
|
|
255
|
+
|
|
256
|
+
<article class="mw-card mw-offer">
|
|
257
|
+
<div class="mw-card-body">
|
|
258
|
+
<h3 class="mw-card-title">Enterprise</h3>
|
|
259
|
+
<hr class="mw-card-title-divider" />
|
|
260
|
+
<p class="mw-card-text">
|
|
261
|
+
Anything that needs a contract, a review and a name to call.
|
|
262
|
+
</p>
|
|
263
|
+
<ul class="mw-list mw-list-check">
|
|
264
|
+
<li>Unlimited projects</li>
|
|
265
|
+
<li>SSO and audit log</li>
|
|
266
|
+
<li>Named contact</li>
|
|
267
|
+
</ul>
|
|
268
|
+
<p class="mw-price mw-price-sm">
|
|
269
|
+
<span class="mw-price-word">On request</span>
|
|
270
|
+
</p>
|
|
271
|
+
<p class="mw-price-note">Priced per seat, yearly term.</p>
|
|
272
|
+
<div class="mw-card-footer">
|
|
273
|
+
<button class="mw-btn mw-btn-outline">Talk to sales</button>
|
|
274
|
+
</div>
|
|
275
|
+
</div>
|
|
276
|
+
</article>
|
|
277
|
+
</div>
|
|
278
|
+
|
|
279
|
+
<h3 class="mw-card-title mw-mt-9 mw-mb-4">Offer card with a head band</h3>
|
|
280
|
+
<p class="mw-text-muted mw-text-measure mw-mb-6">
|
|
281
|
+
<code>mw-offer-head</code> puts name and price in a solid band at the top of
|
|
282
|
+
the card - for when the price is the thing being compared and the feature list
|
|
283
|
+
is only its justification. It takes its colour from the
|
|
284
|
+
<code>mw-card-addon-*</code> class on the card, the same set the card badge
|
|
285
|
+
and the ribbon read.
|
|
286
|
+
</p>
|
|
287
|
+
|
|
288
|
+
<div class="mw-grid-3">
|
|
289
|
+
<article class="mw-card mw-offer">
|
|
290
|
+
<div class="mw-offer-head">
|
|
291
|
+
<p class="mw-offer-name">Basic</p>
|
|
292
|
+
<p class="mw-price mw-price-sm">
|
|
293
|
+
<span class="mw-price-amount">19</span>
|
|
294
|
+
<span class="mw-price-currency">Euro</span>
|
|
295
|
+
<span class="mw-price-period">/ mo</span>
|
|
296
|
+
</p>
|
|
297
|
+
</div>
|
|
298
|
+
<div class="mw-card-body">
|
|
299
|
+
<ul class="mw-list mw-list-check">
|
|
300
|
+
<li>1 project</li>
|
|
301
|
+
<li>5 GB storage</li>
|
|
302
|
+
</ul>
|
|
303
|
+
<div class="mw-card-footer">
|
|
304
|
+
<button class="mw-btn mw-btn-outline">Choose</button>
|
|
305
|
+
</div>
|
|
306
|
+
</div>
|
|
307
|
+
</article>
|
|
308
|
+
|
|
309
|
+
<article class="mw-card mw-offer mw-card-addon-secondary">
|
|
310
|
+
<div class="mw-offer-head">
|
|
311
|
+
<p class="mw-offer-name">Studio</p>
|
|
312
|
+
<p class="mw-price mw-price-sm">
|
|
313
|
+
<span class="mw-price-original">
|
|
314
|
+
<span class="mw-sr-only">Regular price:</span>59 Euro
|
|
315
|
+
</span>
|
|
316
|
+
<span class="mw-sr-only">Now:</span>
|
|
317
|
+
<span class="mw-price-amount"
|
|
318
|
+
>48<span class="mw-price-fraction">,90</span></span
|
|
319
|
+
>
|
|
320
|
+
<span class="mw-price-currency">Euro</span>
|
|
321
|
+
</p>
|
|
322
|
+
</div>
|
|
323
|
+
<div class="mw-card-body">
|
|
324
|
+
<ul class="mw-list mw-list-check">
|
|
325
|
+
<li>10 projects</li>
|
|
326
|
+
<li>100 GB storage</li>
|
|
327
|
+
<li>Priority support</li>
|
|
328
|
+
</ul>
|
|
329
|
+
<div class="mw-card-footer">
|
|
330
|
+
<button class="mw-btn mw-btn-secondary">Choose</button>
|
|
331
|
+
</div>
|
|
332
|
+
</div>
|
|
333
|
+
</article>
|
|
334
|
+
|
|
335
|
+
<article class="mw-card mw-offer mw-card-addon-info">
|
|
336
|
+
<div class="mw-offer-head">
|
|
337
|
+
<p class="mw-offer-name">Team</p>
|
|
338
|
+
<p class="mw-price mw-price-sm">
|
|
339
|
+
<span class="mw-price-amount">99</span>
|
|
340
|
+
<span class="mw-price-currency">Euro</span>
|
|
341
|
+
<span class="mw-price-period">/ mo</span>
|
|
342
|
+
</p>
|
|
343
|
+
</div>
|
|
344
|
+
<div class="mw-card-body">
|
|
345
|
+
<ul class="mw-list mw-list-check">
|
|
346
|
+
<li>Unlimited projects</li>
|
|
347
|
+
<li>SSO and audit log</li>
|
|
348
|
+
</ul>
|
|
349
|
+
<div class="mw-card-footer">
|
|
350
|
+
<button class="mw-btn mw-btn-outline">Choose</button>
|
|
351
|
+
</div>
|
|
352
|
+
</div>
|
|
353
|
+
</article>
|
|
354
|
+
</div>
|
|
355
|
+
|
|
356
|
+
<h3 class="mw-card-title mw-mt-9 mw-mb-4">Price in the footer</h3>
|
|
357
|
+
<p class="mw-text-muted mw-text-measure mw-mb-6">
|
|
358
|
+
No modifier for this one - a <code>mw-price</code> dropped into a
|
|
359
|
+
<code>mw-card-footer</code> lines up with the button next to it on its own,
|
|
360
|
+
and <code>mw-price-sm</code> keeps it from outweighing the action. The layout
|
|
361
|
+
for a dated event, where the price is a detail rather than the offer.
|
|
362
|
+
</p>
|
|
363
|
+
|
|
364
|
+
<div class="mw-grid-2">
|
|
365
|
+
<article class="mw-card mw-offer">
|
|
366
|
+
<div class="mw-card-body">
|
|
367
|
+
<p class="mw-text-eyebrow mw-text-primary mw-mb-3">Fri, 14 March</p>
|
|
368
|
+
<h3 class="mw-card-title">Workshop: Reading a waveform</h3>
|
|
369
|
+
<hr class="mw-card-title-divider" />
|
|
370
|
+
<p class="mw-card-text">
|
|
371
|
+
Three hours on what a spectrogram actually shows you, and what it does
|
|
372
|
+
not. Bring headphones.
|
|
373
|
+
</p>
|
|
374
|
+
<div class="mw-card-footer">
|
|
375
|
+
<p class="mw-price mw-price-sm">
|
|
376
|
+
<span class="mw-price-original">120 Euro</span>
|
|
377
|
+
<span class="mw-price-amount">90</span>
|
|
378
|
+
<span class="mw-price-currency">Euro</span>
|
|
379
|
+
</p>
|
|
380
|
+
<button class="mw-btn mw-btn-primary">Sign up</button>
|
|
381
|
+
</div>
|
|
382
|
+
</div>
|
|
383
|
+
</article>
|
|
384
|
+
|
|
385
|
+
<article class="mw-card mw-offer">
|
|
386
|
+
<div class="mw-card-body">
|
|
387
|
+
<p class="mw-text-eyebrow mw-text-primary mw-mb-3">Sat, 22 March</p>
|
|
388
|
+
<h3 class="mw-card-title">Workshop: Mixing for small rooms</h3>
|
|
389
|
+
<hr class="mw-card-title-divider" />
|
|
390
|
+
<p class="mw-card-text">
|
|
391
|
+
A full day on the room you actually work in, rather than the one the
|
|
392
|
+
manual assumes.
|
|
393
|
+
</p>
|
|
394
|
+
<div class="mw-card-footer">
|
|
395
|
+
<p class="mw-price mw-price-sm">
|
|
396
|
+
<span class="mw-price-amount">180</span>
|
|
397
|
+
<span class="mw-price-currency">Euro</span>
|
|
398
|
+
</p>
|
|
399
|
+
<span class="mw-tag mw-tag-muted">Fully booked</span>
|
|
400
|
+
</div>
|
|
401
|
+
</div>
|
|
402
|
+
</article>
|
|
403
|
+
</div>
|
|
404
|
+
|
|
405
|
+
<h3 class="mw-card-title mw-mt-9 mw-mb-4">Billing cycle</h3>
|
|
406
|
+
<p class="mw-text-muted mw-text-measure mw-mb-6">
|
|
407
|
+
A subscription sold on three terms, where the longer one is cheaper. The
|
|
408
|
+
switch is a <code>mw-segmented</code> above the grid, not one per card - three
|
|
409
|
+
cards with three switches are three states the visitor has to keep in their
|
|
410
|
+
head. Every card shows the same thing: what a month works out at on the chosen
|
|
411
|
+
term, what the month costs without a discount, and what is actually charged.
|
|
412
|
+
</p>
|
|
413
|
+
<p class="mw-text-muted mw-text-measure mw-mb-6">
|
|
414
|
+
Comparing per-month figures is the point. A yearly plan priced at "288 Euro"
|
|
415
|
+
next to a monthly one at "30 Euro" is not a comparison a reader can make in
|
|
416
|
+
their head, so the headline figure stays per month on all three terms and the
|
|
417
|
+
amount that leaves the account moves to the line below it.
|
|
418
|
+
</p>
|
|
419
|
+
|
|
420
|
+
<div class="mw-d-flex mw-justify-center mw-mb-8">
|
|
421
|
+
<div
|
|
422
|
+
class="mw-segmented mw-segmented-auto"
|
|
423
|
+
role="group"
|
|
424
|
+
aria-label="Billing cycle"
|
|
425
|
+
id="cycle-switch"
|
|
426
|
+
>
|
|
427
|
+
<button
|
|
428
|
+
type="button"
|
|
429
|
+
class="mw-segmented-item mw-active"
|
|
430
|
+
aria-pressed="true"
|
|
431
|
+
data-cycle="1"
|
|
432
|
+
data-cycle-label="Billed monthly, cancel any time"
|
|
433
|
+
>
|
|
434
|
+
Monthly
|
|
435
|
+
</button>
|
|
436
|
+
<button
|
|
437
|
+
type="button"
|
|
438
|
+
class="mw-segmented-item"
|
|
439
|
+
aria-pressed="false"
|
|
440
|
+
data-cycle="6"
|
|
441
|
+
data-cycle-off="10"
|
|
442
|
+
data-cycle-label="charged once for six months, cancel monthly"
|
|
443
|
+
>
|
|
444
|
+
6 months
|
|
445
|
+
<span class="mw-tag mw-tag-secondary">-10%</span>
|
|
446
|
+
</button>
|
|
447
|
+
<button
|
|
448
|
+
type="button"
|
|
449
|
+
class="mw-segmented-item"
|
|
450
|
+
aria-pressed="false"
|
|
451
|
+
data-cycle="12"
|
|
452
|
+
data-cycle-off="20"
|
|
453
|
+
data-cycle-label="charged once for the year, cancel monthly"
|
|
454
|
+
>
|
|
455
|
+
Yearly
|
|
456
|
+
<span class="mw-tag mw-tag-secondary">-20%</span>
|
|
457
|
+
</button>
|
|
458
|
+
</div>
|
|
459
|
+
</div>
|
|
460
|
+
|
|
461
|
+
<div class="mw-grid-2" id="cycle-offers">
|
|
462
|
+
<article class="mw-card mw-offer" data-rate="12">
|
|
463
|
+
<div class="mw-card-body">
|
|
464
|
+
<h3 class="mw-card-title">Starter</h3>
|
|
465
|
+
<hr class="mw-card-title-divider" />
|
|
466
|
+
<p class="mw-card-text">
|
|
467
|
+
One workspace, three seats. The tier a side project stays on for a long
|
|
468
|
+
time.
|
|
469
|
+
</p>
|
|
470
|
+
<ul class="mw-list mw-list-check">
|
|
471
|
+
<li>3 seats</li>
|
|
472
|
+
<li>10 GB storage</li>
|
|
473
|
+
<li>Email support</li>
|
|
474
|
+
</ul>
|
|
475
|
+
<p class="mw-price mw-price-sm" aria-live="polite">
|
|
476
|
+
<span class="mw-price-original" hidden>
|
|
477
|
+
<span class="mw-sr-only">Without the term discount:</span>
|
|
478
|
+
<span data-price-rate></span> Euro
|
|
479
|
+
</span>
|
|
480
|
+
<span class="mw-sr-only">Price:</span>
|
|
481
|
+
<span class="mw-price-amount" data-price-amount></span>
|
|
482
|
+
<span class="mw-price-currency">Euro</span>
|
|
483
|
+
<span class="mw-price-period">/ month</span>
|
|
484
|
+
<span class="mw-tag mw-tag-secondary" data-price-off hidden></span>
|
|
485
|
+
</p>
|
|
486
|
+
<p class="mw-price-note" data-price-billing></p>
|
|
487
|
+
<div class="mw-card-footer">
|
|
488
|
+
<button class="mw-btn mw-btn-outline">Choose Starter</button>
|
|
489
|
+
</div>
|
|
490
|
+
</div>
|
|
491
|
+
</article>
|
|
492
|
+
|
|
493
|
+
<article class="mw-card mw-offer" data-rate="30">
|
|
494
|
+
<div class="mw-card-body">
|
|
495
|
+
<h3 class="mw-card-title">Pro</h3>
|
|
496
|
+
<hr class="mw-card-title-divider" />
|
|
497
|
+
<p class="mw-card-text">
|
|
498
|
+
Everything in Starter, plus the things a team needs once more than one
|
|
499
|
+
person touches the data.
|
|
500
|
+
</p>
|
|
501
|
+
<ul class="mw-list mw-list-check">
|
|
502
|
+
<li>Unlimited seats</li>
|
|
503
|
+
<li>200 GB storage</li>
|
|
504
|
+
<li>Audit log and SSO</li>
|
|
505
|
+
</ul>
|
|
506
|
+
<p class="mw-price mw-price-sm" aria-live="polite">
|
|
507
|
+
<span class="mw-price-original" hidden>
|
|
508
|
+
<span class="mw-sr-only">Without the term discount:</span>
|
|
509
|
+
<span data-price-rate></span> Euro
|
|
510
|
+
</span>
|
|
511
|
+
<span class="mw-sr-only">Price:</span>
|
|
512
|
+
<span class="mw-price-amount" data-price-amount></span>
|
|
513
|
+
<span class="mw-price-currency">Euro</span>
|
|
514
|
+
<span class="mw-price-period">/ month</span>
|
|
515
|
+
<span class="mw-tag mw-tag-secondary" data-price-off hidden></span>
|
|
516
|
+
</p>
|
|
517
|
+
<p class="mw-price-note" data-price-billing></p>
|
|
518
|
+
<div class="mw-card-footer">
|
|
519
|
+
<button class="mw-btn mw-btn-primary">Choose Pro</button>
|
|
520
|
+
</div>
|
|
521
|
+
</div>
|
|
522
|
+
</article>
|
|
523
|
+
</div>
|
|
@@ -29,6 +29,15 @@ body {
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
+
// The UA rule behind the `hidden` attribute is `[hidden] { display: none }`, and
|
|
33
|
+
// every component in here that sets its own `display` beats it on specificity -
|
|
34
|
+
// a hidden `mw-tag` or `mw-btn` stays on screen. `!important` is the only thing
|
|
35
|
+
// that wins against a class, and it is also what Angular's `[hidden]` binding
|
|
36
|
+
// and every `el.hidden = true` in an application expect to happen.
|
|
37
|
+
[hidden] {
|
|
38
|
+
display: none !important;
|
|
39
|
+
}
|
|
40
|
+
|
|
32
41
|
// A selection in the browser default blue on a deep blue page is the one bit of
|
|
33
42
|
// chrome that gives away that nobody looked. Brand tint, kept translucent so it
|
|
34
43
|
// works over a card, a code block and an image caption alike.
|