maverick-wave 5.30.0 → 5.32.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/README.md +2 -2
- package/maverick-wave.min.css +2 -2
- package/package.json +8 -2
- package/src/scss/abstracts/_variables.scss +2 -0
- package/src/scss/components/_modals.scss +23 -9
- package/src/scss/components/_testimonial.scss +2 -0
- package/src/scss/layout/_home.scss +46 -0
- package/src/scss/layout/_main.scss +20 -0
- package/src/scss/layout/_parallax.scss +2 -2
- package/src/scss/main-lean.scss +8 -3
- package/.claude/settings.local.json +0 -43
- package/.claude/skills/mw-maverick-wave/SKILL.md +0 -532
- package/.claude/skills/mw-maverick-wave/examples/angular-form.md +0 -279
- package/.claude/skills/mw-maverick-wave/examples/angular-list-page.md +0 -309
- package/.claude/skills/mw-maverick-wave/examples/angular-services.md +0 -538
- package/.claude/skills/mw-maverick-wave/examples/static-landing-page.md +0 -530
- package/.claude/skills/mw-maverick-wave/references/components.md +0 -2170
- package/.claude/skills/mw-maverick-wave/references/forms.md +0 -358
- package/.claude/skills/mw-maverick-wave/references/javascript.md +0 -164
- package/.claude/skills/mw-maverick-wave/references/layout.md +0 -764
- package/.claude/skills/mw-maverick-wave/references/theming.md +0 -530
- package/.github/workflows/ci.yml +0 -41
- package/.idea/codeStyles/Project.xml +0 -59
- package/.idea/codeStyles/codeStyleConfig.xml +0 -5
- package/.idea/maverick-wave.iml +0 -12
- package/.idea/modules.xml +0 -8
- package/.idea/prettier.xml +0 -6
- package/.idea/vcs.xml +0 -6
- package/.prettierignore +0 -8
- package/.prettierrc.json +0 -7
- package/CHANGELOG.md +0 -956
- package/CLAUDE.md +0 -60
- package/gulpfile.js +0 -167
- package/index.html +0 -1730
- package/release.sh +0 -31
- package/scripts/verify.js +0 -252
- package/src/assets/favicon/apple-touch-icon.png +0 -0
- package/src/assets/favicon/favicon-96x96.png +0 -0
- package/src/assets/favicon/favicon.svg +0 -1
- package/src/assets/favicon/site.webmanifest +0 -37
- package/src/assets/favicon/web-app-manifest-192x192.png +0 -0
- package/src/assets/favicon/web-app-manifest-512x512.png +0 -0
- package/src/assets/favicon.ico +0 -0
- package/src/assets/header-logo.svg +0 -24
- package/src/assets/images/gallery-city.svg +0 -49
- package/src/assets/images/gallery-desert.svg +0 -25
- package/src/assets/images/gallery-forest.svg +0 -46
- package/src/assets/images/gallery-lake.svg +0 -26
- package/src/assets/images/gallery-mountain.svg +0 -19
- package/src/assets/images/gallery-ocean.svg +0 -26
- package/src/assets/images/gallery-oldtown.svg +0 -41
- package/src/assets/images/gallery-snow.svg +0 -39
- package/src/assets/images/photo-balloon.svg +0 -35
- package/src/assets/images/photo-forest-path.svg +0 -31
- package/src/assets/images/photo-lighthouse.svg +0 -42
- package/src/assets/images/photo-palm.svg +0 -27
- package/src/assets/images/photo-peak.svg +0 -27
- package/src/assets/images/photo-tower.svg +0 -34
- package/src/assets/images/photo-waterfall.svg +0 -32
- package/src/assets/images/slider-field.svg +0 -124
- package/src/assets/images/slider-forest.svg +0 -33
- package/src/assets/images/slider-lake.svg +0 -35
- package/src/assets/images/slider-mountains.svg +0 -29
- package/src/assets/images/slider-trees.svg +0 -41
- package/src/assets/images/story-aurora.svg +0 -36
- package/src/assets/images/story-beach.svg +0 -34
- package/src/assets/images/story-stars.svg +0 -35
- package/src/assets/images/tile-analytics.svg +0 -22
- package/src/assets/images/tile-cloud.svg +0 -19
- package/src/assets/images/tile-ecommerce.svg +0 -14
- package/src/assets/images/tile-enterprise.svg +0 -22
- package/src/assets/images/tile-marketing.svg +0 -16
- package/src/assets/media/demo-chime.wav +0 -0
- package/src/assets/media/story-sunrise.jpg +0 -0
- package/src/assets/media/story-sunrise.mp4 +0 -0
- package/src/partials/accordions-container.html +0 -179
- package/src/partials/alerts-container.html +0 -151
- package/src/partials/announcement-container.html +0 -67
- package/src/partials/avatars-container.html +0 -229
- package/src/partials/badges-container.html +0 -114
- package/src/partials/blog-posts-container.html +0 -158
- package/src/partials/breadcrumbs-container.html +0 -126
- package/src/partials/button-bar-container.html +0 -175
- package/src/partials/buttons-container.html +0 -272
- package/src/partials/calendar-container.html +0 -203
- package/src/partials/cards-container.html +0 -727
- package/src/partials/code-container.html +0 -194
- package/src/partials/colors-container.html +0 -263
- package/src/partials/coming-soon-container.html +0 -10
- package/src/partials/contact-container.html +0 -85
- package/src/partials/content-slider-container.html +0 -36
- package/src/partials/divider-container.html +0 -70
- package/src/partials/documentation-container.html +0 -204
- package/src/partials/dropdown-container.html +0 -119
- package/src/partials/empty-state-container.html +0 -79
- package/src/partials/feed-container.html +0 -506
- package/src/partials/footer-container.html +0 -113
- package/src/partials/form-container.html +0 -262
- package/src/partials/form-elements-container.html +0 -616
- package/src/partials/form-field-container.html +0 -166
- package/src/partials/gallery-container.html +0 -62
- package/src/partials/get-started-container.html +0 -423
- package/src/partials/grid-container.html +0 -191
- package/src/partials/header-container.html +0 -69
- package/src/partials/header-utilities-container.html +0 -331
- package/src/partials/highlights-container.html +0 -71
- package/src/partials/history-container.html +0 -67
- package/src/partials/home-container.html +0 -31
- package/src/partials/html-lists-container.html +0 -63
- package/src/partials/info-container.html +0 -104
- package/src/partials/input-group-container.html +0 -299
- package/src/partials/item-lists-container.html +0 -368
- package/src/partials/kanban-container.html +0 -459
- package/src/partials/kbd-container.html +0 -63
- package/src/partials/leader-row-container.html +0 -139
- package/src/partials/login-container.html +0 -65
- package/src/partials/lunch-menu-container.html +0 -341
- package/src/partials/media-container.html +0 -27
- package/src/partials/meta-info-container.html +0 -21
- package/src/partials/modals-container.html +0 -199
- package/src/partials/mosaic-container.html +0 -173
- package/src/partials/page-header-container.html +0 -78
- package/src/partials/pagination-container.html +0 -64
- package/src/partials/palette-container.html +0 -480
- package/src/partials/panels-container.html +0 -126
- package/src/partials/parallax-container.html +0 -147
- package/src/partials/portrait-gallery-container.html +0 -175
- package/src/partials/preview-container.html +0 -136
- package/src/partials/pricing-container.html +0 -523
- package/src/partials/progress-container.html +0 -230
- package/src/partials/prose-container.html +0 -43
- package/src/partials/ratings-container.html +0 -104
- package/src/partials/section-head-container.html +0 -77
- package/src/partials/segmented-container.html +0 -66
- package/src/partials/skeleton-container.html +0 -87
- package/src/partials/spinners-container.html +0 -96
- package/src/partials/stepper-container.html +0 -111
- package/src/partials/stories-container.html +0 -182
- package/src/partials/tables-container.html +0 -309
- package/src/partials/tabs-container.html +0 -290
- package/src/partials/tags-container.html +0 -242
- package/src/partials/techstack-bucket-container.html +0 -187
- package/src/partials/testimonials-container.html +0 -88
- package/src/partials/tiles-container.html +0 -247
- package/src/partials/timelines-container.html +0 -196
- package/src/partials/typography-container.html +0 -74
- package/src/partials/utilities-container.html +0 -553
|
@@ -1,242 +0,0 @@
|
|
|
1
|
-
<h3 class="mw-section-subtitle">Tags</h3>
|
|
2
|
-
<p class="mw-text-muted mw-text-measure">
|
|
3
|
-
A label with a soft surface that names something - a topic, a state, a
|
|
4
|
-
category - and sits in a row of its own kind. For a count or a status marker
|
|
5
|
-
reach for a badge instead.
|
|
6
|
-
</p>
|
|
7
|
-
|
|
8
|
-
<div class="mw-grid-2-lg mw-gap-6">
|
|
9
|
-
<!-- COLUMN 1: Basic & Status -->
|
|
10
|
-
<div>
|
|
11
|
-
<h3 class="mw-card-title mw-mb-4">Status & Types</h3>
|
|
12
|
-
<div class="mw-card mw-card-simple">
|
|
13
|
-
<!-- Basic -->
|
|
14
|
-
<h4 class="mw-text-medium mw-mb-2">Default</h4>
|
|
15
|
-
<div class="mw-tags mw-mb-4">
|
|
16
|
-
<span class="mw-tags-item">Frontend</span>
|
|
17
|
-
<span class="mw-tags-item">Backend</span>
|
|
18
|
-
<span class="mw-tags-item">DevOps</span>
|
|
19
|
-
</div>
|
|
20
|
-
|
|
21
|
-
<!-- Primary (Main Tech) -->
|
|
22
|
-
<h4 class="mw-text-medium mw-mb-2">Primary</h4>
|
|
23
|
-
<div class="mw-tags mw-tags-primary mw-mb-4">
|
|
24
|
-
<span class="mw-tags-item">Angular</span>
|
|
25
|
-
<span class="mw-tags-item">Spring Boot</span>
|
|
26
|
-
<span class="mw-tags-item">Kotlin</span>
|
|
27
|
-
</div>
|
|
28
|
-
|
|
29
|
-
<!-- Success (Status) -->
|
|
30
|
-
<h4 class="mw-text-medium mw-mb-2">Success</h4>
|
|
31
|
-
<div class="mw-tags mw-tags-success mw-mb-4">
|
|
32
|
-
<span class="mw-tags-item">
|
|
33
|
-
<i class="fas fa-check mw-tags-icon"></i>Completed
|
|
34
|
-
</span>
|
|
35
|
-
<span class="mw-tags-item">Deployed</span>
|
|
36
|
-
<span class="mw-tags-item">Stable</span>
|
|
37
|
-
</div>
|
|
38
|
-
|
|
39
|
-
<!-- Info (Metadata) -->
|
|
40
|
-
<h4 class="mw-text-medium mw-mb-2">Info</h4>
|
|
41
|
-
<div class="mw-tags mw-tags-info mw-mb-4">
|
|
42
|
-
<span class="mw-tags-item">v2.4.0</span>
|
|
43
|
-
<span class="mw-tags-item">
|
|
44
|
-
<i class="fas fa-info-circle mw-tags-icon"></i>Beta
|
|
45
|
-
</span>
|
|
46
|
-
<span class="mw-tags-item">Documentation</span>
|
|
47
|
-
</div>
|
|
48
|
-
|
|
49
|
-
<!-- Secondary (Tools) -->
|
|
50
|
-
<h4 class="mw-text-medium mw-mb-2">Secondary</h4>
|
|
51
|
-
<div class="mw-tags mw-tags-secondary mw-mb-4">
|
|
52
|
-
<span class="mw-tags-item">Docker</span>
|
|
53
|
-
<span class="mw-tags-item">Kubernetes</span>
|
|
54
|
-
<span class="mw-tags-item">Git</span>
|
|
55
|
-
</div>
|
|
56
|
-
|
|
57
|
-
<!-- Warning (Pending) -->
|
|
58
|
-
<h4 class="mw-text-medium mw-mb-2">Warning</h4>
|
|
59
|
-
<div class="mw-tags mw-tags-warning mw-mb-4">
|
|
60
|
-
<span class="mw-tags-item">
|
|
61
|
-
<i class="fas fa-clock mw-tags-icon"></i>Pending
|
|
62
|
-
</span>
|
|
63
|
-
<span class="mw-tags-item">Review</span>
|
|
64
|
-
</div>
|
|
65
|
-
|
|
66
|
-
<!-- Danger (Failed) -->
|
|
67
|
-
<h4 class="mw-text-medium mw-mb-2">Danger</h4>
|
|
68
|
-
<div class="mw-tags mw-tags-danger mw-mb-4">
|
|
69
|
-
<span class="mw-tags-item">
|
|
70
|
-
<i class="fas fa-xmark mw-tags-icon"></i>Failed
|
|
71
|
-
</span>
|
|
72
|
-
<span class="mw-tags-item">Deprecated</span>
|
|
73
|
-
</div>
|
|
74
|
-
|
|
75
|
-
<!-- Muted (Neutral) -->
|
|
76
|
-
<h4 class="mw-text-medium mw-mb-2">Muted</h4>
|
|
77
|
-
<div class="mw-tags mw-tags-muted">
|
|
78
|
-
<span class="mw-tags-item">Draft</span>
|
|
79
|
-
<span class="mw-tags-item">Archived</span>
|
|
80
|
-
</div>
|
|
81
|
-
</div>
|
|
82
|
-
</div>
|
|
83
|
-
|
|
84
|
-
<!-- COLUMN 2: Sizes & Icons -->
|
|
85
|
-
<div>
|
|
86
|
-
<h3 class="mw-card-title mw-mb-4">Sizes & Formatting</h3>
|
|
87
|
-
<div class="mw-card mw-card-simple">
|
|
88
|
-
<!-- Default -->
|
|
89
|
-
<h4 class="mw-text-medium mw-mb-2">Default Size</h4>
|
|
90
|
-
<div class="mw-tags mw-mb-4">
|
|
91
|
-
<span class="mw-tags-item">Typescript</span>
|
|
92
|
-
<span class="mw-tags-item">
|
|
93
|
-
<i class="fas fa-cube mw-tags-icon"></i>Components
|
|
94
|
-
</span>
|
|
95
|
-
<span class="mw-tags-item mw-tags-removable">
|
|
96
|
-
filter: active
|
|
97
|
-
<button
|
|
98
|
-
type="button"
|
|
99
|
-
class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
|
|
100
|
-
aria-label="Remove filter: active"
|
|
101
|
-
>
|
|
102
|
-
<i class="fas fa-times"></i>
|
|
103
|
-
</button>
|
|
104
|
-
</span>
|
|
105
|
-
</div>
|
|
106
|
-
|
|
107
|
-
<!-- Large (Categories) -->
|
|
108
|
-
<h4 class="mw-text-medium mw-mb-2">Large (Categories)</h4>
|
|
109
|
-
<div class="mw-tags mw-tags-lg mw-mb-4">
|
|
110
|
-
<span class="mw-tags-item">Web Development</span>
|
|
111
|
-
<span class="mw-tags-item">Design System</span>
|
|
112
|
-
</div>
|
|
113
|
-
|
|
114
|
-
<!-- With Details -->
|
|
115
|
-
<h4 class="mw-text-medium mw-mb-2">With Details</h4>
|
|
116
|
-
<div class="mw-tags">
|
|
117
|
-
<span class="mw-tags-item">
|
|
118
|
-
<i class="fab fa-npm mw-tags-icon"></i>
|
|
119
|
-
npm install
|
|
120
|
-
<span class="mw-text-muted mw-ml-1 mw-text-xs">(latest)</span>
|
|
121
|
-
</span>
|
|
122
|
-
<span class="mw-tags-item">
|
|
123
|
-
<i class="fas fa-code-branch mw-tags-icon"></i>
|
|
124
|
-
main
|
|
125
|
-
<span class="mw-text-muted mw-ml-1 mw-text-xs">(protected)</span>
|
|
126
|
-
</span>
|
|
127
|
-
</div>
|
|
128
|
-
</div>
|
|
129
|
-
</div>
|
|
130
|
-
|
|
131
|
-
<!-- COLUMN 3: Interaction -->
|
|
132
|
-
<div>
|
|
133
|
-
<h3 class="mw-card-title mw-mb-4">Interactive Tags</h3>
|
|
134
|
-
<div class="mw-card mw-card-simple">
|
|
135
|
-
<h4 class="mw-text-medium mw-mb-2">Removable Input (Primary)</h4>
|
|
136
|
-
<div class="mw-tags mw-tags-primary mw-mb-4">
|
|
137
|
-
<span class="mw-tags-item mw-tags-removable">
|
|
138
|
-
React
|
|
139
|
-
<button
|
|
140
|
-
type="button"
|
|
141
|
-
class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
|
|
142
|
-
aria-label="Remove React"
|
|
143
|
-
>
|
|
144
|
-
<i class="fas fa-times"></i>
|
|
145
|
-
</button>
|
|
146
|
-
</span>
|
|
147
|
-
<span class="mw-tags-item mw-tags-removable">
|
|
148
|
-
Vue.js
|
|
149
|
-
<button
|
|
150
|
-
type="button"
|
|
151
|
-
class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
|
|
152
|
-
aria-label="Remove Vue.js"
|
|
153
|
-
>
|
|
154
|
-
<i class="fas fa-times"></i>
|
|
155
|
-
</button>
|
|
156
|
-
</span>
|
|
157
|
-
</div>
|
|
158
|
-
|
|
159
|
-
<h4 class="mw-text-medium mw-mb-2">Removable Status (Success)</h4>
|
|
160
|
-
<div class="mw-tags mw-tags-success mw-mb-4">
|
|
161
|
-
<span class="mw-tags-item mw-tags-removable">
|
|
162
|
-
<i class="fas fa-user-check mw-tags-icon"></i>Online
|
|
163
|
-
<button
|
|
164
|
-
type="button"
|
|
165
|
-
class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
|
|
166
|
-
aria-label="Remove Online"
|
|
167
|
-
>
|
|
168
|
-
<i class="fas fa-times"></i>
|
|
169
|
-
</button>
|
|
170
|
-
</span>
|
|
171
|
-
<span class="mw-tags-item mw-tags-removable">
|
|
172
|
-
Available
|
|
173
|
-
<button
|
|
174
|
-
type="button"
|
|
175
|
-
class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
|
|
176
|
-
aria-label="Remove Available"
|
|
177
|
-
>
|
|
178
|
-
<i class="fas fa-times"></i>
|
|
179
|
-
</button>
|
|
180
|
-
</span>
|
|
181
|
-
</div>
|
|
182
|
-
|
|
183
|
-
<h4 class="mw-text-medium mw-mb-2">Large Removable</h4>
|
|
184
|
-
<div class="mw-tags mw-tags-lg mw-tags-info">
|
|
185
|
-
<span class="mw-tags-item mw-tags-removable">
|
|
186
|
-
Filter: Architecture
|
|
187
|
-
<button
|
|
188
|
-
type="button"
|
|
189
|
-
class="mw-btn-mini mw-btn-mini-danger mw-tags-remove"
|
|
190
|
-
aria-label="Remove Filter: Architecture"
|
|
191
|
-
>
|
|
192
|
-
<i class="fas fa-times"></i>
|
|
193
|
-
</button>
|
|
194
|
-
</span>
|
|
195
|
-
</div>
|
|
196
|
-
</div>
|
|
197
|
-
</div>
|
|
198
|
-
|
|
199
|
-
<!-- COLUMN 4: Single tag -->
|
|
200
|
-
<div>
|
|
201
|
-
<h3 class="mw-card-title mw-mb-4">Single Tag</h3>
|
|
202
|
-
<div class="mw-card mw-card-simple">
|
|
203
|
-
<p class="mw-text-muted mw-mb-4">
|
|
204
|
-
For a single status chip - e.g. in a table cell - use
|
|
205
|
-
<strong>mw-tag</strong>. It carries the colour itself, so no
|
|
206
|
-
<strong>mw-tags</strong> container is needed.
|
|
207
|
-
</p>
|
|
208
|
-
|
|
209
|
-
<h4 class="mw-text-medium mw-mb-2">Variants</h4>
|
|
210
|
-
<div class="mw-d-flex mw-flex-wrap mw-gap-2 mw-mb-4">
|
|
211
|
-
<span class="mw-tag mw-tag-primary">Primary</span>
|
|
212
|
-
<span class="mw-tag mw-tag-secondary">Secondary</span>
|
|
213
|
-
<span class="mw-tag mw-tag-success">Paid</span>
|
|
214
|
-
<span class="mw-tag mw-tag-info">Info</span>
|
|
215
|
-
<span class="mw-tag mw-tag-warning">Open</span>
|
|
216
|
-
<span class="mw-tag mw-tag-danger">Cancelled</span>
|
|
217
|
-
<span class="mw-tag mw-tag-muted">Draft</span>
|
|
218
|
-
<span class="mw-tag mw-tag-neutral">XRechnung</span>
|
|
219
|
-
</div>
|
|
220
|
-
|
|
221
|
-
<h4 class="mw-text-medium mw-mb-2">Neutral vs. Muted</h4>
|
|
222
|
-
<p class="mw-text-muted mw-text-sm mw-mb-3">
|
|
223
|
-
<strong>mw-tag-neutral</strong> is a plain identifier - a customer
|
|
224
|
-
number, a document type. <strong>mw-tag-muted</strong> means the label
|
|
225
|
-
steps back. On an invoice the difference carries real meaning:
|
|
226
|
-
“XRechnung” is a property, “no e-invoice” is a
|
|
227
|
-
shortcoming.
|
|
228
|
-
</p>
|
|
229
|
-
<div class="mw-d-flex mw-flex-wrap mw-gap-2 mw-mb-4">
|
|
230
|
-
<span class="mw-tag mw-tag-neutral">Customer 4711</span>
|
|
231
|
-
<span class="mw-tag mw-tag-neutral">XRechnung</span>
|
|
232
|
-
<span class="mw-tag mw-tag-muted">No e-invoice</span>
|
|
233
|
-
</div>
|
|
234
|
-
|
|
235
|
-
<h4 class="mw-text-medium mw-mb-2">Large</h4>
|
|
236
|
-
<div class="mw-d-flex mw-flex-wrap mw-gap-2">
|
|
237
|
-
<span class="mw-tag mw-tag-success mw-tag-lg">Paid</span>
|
|
238
|
-
<span class="mw-tag mw-tag-muted mw-tag-lg">Draft</span>
|
|
239
|
-
</div>
|
|
240
|
-
</div>
|
|
241
|
-
</div>
|
|
242
|
-
</div>
|
|
@@ -1,187 +0,0 @@
|
|
|
1
|
-
<h3 class="mw-section-subtitle mw-mb-6">Technology Stack Bucket</h3>
|
|
2
|
-
<p class="mw-text-muted">
|
|
3
|
-
The Techstack component allows you to showcase toolsets and skills in a clean,
|
|
4
|
-
organized bucket layout. Each item can feature a logo, optional labels, and a
|
|
5
|
-
direct link to the technology's homepage.
|
|
6
|
-
</p>
|
|
7
|
-
|
|
8
|
-
<div class="mw-grid-4">
|
|
9
|
-
<div>
|
|
10
|
-
<h4 class="mw-mb-2">Large Items with Description</h4>
|
|
11
|
-
<div class="mw-techstack-bucket">
|
|
12
|
-
<a href="https://angular.io" target="_blank" class="mw-techstack-item">
|
|
13
|
-
<img
|
|
14
|
-
src="https://upload.wikimedia.org/wikipedia/commons/6/67/Angular_gradient_logo.png"
|
|
15
|
-
alt="Angular"
|
|
16
|
-
class="mw-techstack-logo"
|
|
17
|
-
loading="lazy"
|
|
18
|
-
/>
|
|
19
|
-
<div class="mw-techstack-info">
|
|
20
|
-
<span class="mw-techstack-name">Angular</span>
|
|
21
|
-
<span class="mw-techstack-desc">Frontend</span>
|
|
22
|
-
</div>
|
|
23
|
-
</a>
|
|
24
|
-
<a href="https://sass-lang.com" target="_blank" class="mw-techstack-item">
|
|
25
|
-
<img
|
|
26
|
-
src="https://upload.wikimedia.org/wikipedia/commons/9/96/Sass_Logo_Color.svg"
|
|
27
|
-
alt="Sass"
|
|
28
|
-
class="mw-techstack-logo"
|
|
29
|
-
loading="lazy"
|
|
30
|
-
/>
|
|
31
|
-
<div class="mw-techstack-info">
|
|
32
|
-
<span class="mw-techstack-name">SCSS</span>
|
|
33
|
-
<span class="mw-techstack-desc">Styles</span>
|
|
34
|
-
</div>
|
|
35
|
-
</a>
|
|
36
|
-
<a
|
|
37
|
-
href="https://www.typescriptlang.org"
|
|
38
|
-
target="_blank"
|
|
39
|
-
class="mw-techstack-item"
|
|
40
|
-
>
|
|
41
|
-
<img
|
|
42
|
-
src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Typescript_logo_2020.svg"
|
|
43
|
-
alt="TypeScript"
|
|
44
|
-
class="mw-techstack-logo"
|
|
45
|
-
loading="lazy"
|
|
46
|
-
/>
|
|
47
|
-
<div class="mw-techstack-info">
|
|
48
|
-
<span class="mw-techstack-name">TypeScript</span>
|
|
49
|
-
<span class="mw-techstack-desc">Strict Typing</span>
|
|
50
|
-
</div>
|
|
51
|
-
</a>
|
|
52
|
-
</div>
|
|
53
|
-
</div>
|
|
54
|
-
|
|
55
|
-
<div>
|
|
56
|
-
<h4 class="mw-mb-2">Small Items (Logos Only), Narrow Variant</h4>
|
|
57
|
-
<div class="mw-techstack-bucket mw-techstack-bucket-narrow">
|
|
58
|
-
<a
|
|
59
|
-
href="#"
|
|
60
|
-
class="mw-techstack-item mw-techstack-item-sm"
|
|
61
|
-
data-tooltip="Git"
|
|
62
|
-
>
|
|
63
|
-
<img
|
|
64
|
-
src="https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg"
|
|
65
|
-
class="mw-techstack-logo"
|
|
66
|
-
alt="Git"
|
|
67
|
-
loading="lazy"
|
|
68
|
-
/>
|
|
69
|
-
</a>
|
|
70
|
-
<a
|
|
71
|
-
href="#"
|
|
72
|
-
class="mw-techstack-item mw-techstack-item-sm"
|
|
73
|
-
data-tooltip="VS Code"
|
|
74
|
-
>
|
|
75
|
-
<img
|
|
76
|
-
src="https://upload.wikimedia.org/wikipedia/commons/9/9a/Visual_Studio_Code_1.35_icon.svg"
|
|
77
|
-
class="mw-techstack-logo"
|
|
78
|
-
alt="VS Code"
|
|
79
|
-
loading="lazy"
|
|
80
|
-
/>
|
|
81
|
-
</a>
|
|
82
|
-
<a
|
|
83
|
-
href="#"
|
|
84
|
-
class="mw-techstack-item mw-techstack-item-sm"
|
|
85
|
-
data-tooltip="Docker"
|
|
86
|
-
>
|
|
87
|
-
<img
|
|
88
|
-
src="https://www.vectorlogo.zone/logos/docker/docker-icon.svg"
|
|
89
|
-
class="mw-techstack-logo"
|
|
90
|
-
alt="Docker"
|
|
91
|
-
loading="lazy"
|
|
92
|
-
/>
|
|
93
|
-
</a>
|
|
94
|
-
<a
|
|
95
|
-
href="#"
|
|
96
|
-
class="mw-techstack-item mw-techstack-item-sm"
|
|
97
|
-
data-tooltip="Figma"
|
|
98
|
-
>
|
|
99
|
-
<img
|
|
100
|
-
src="https://www.vectorlogo.zone/logos/figma/figma-icon.svg"
|
|
101
|
-
class="mw-techstack-logo"
|
|
102
|
-
alt="Figma"
|
|
103
|
-
loading="lazy"
|
|
104
|
-
/>
|
|
105
|
-
</a>
|
|
106
|
-
<a
|
|
107
|
-
href="#"
|
|
108
|
-
class="mw-techstack-item mw-techstack-item-sm"
|
|
109
|
-
data-tooltip="NPM"
|
|
110
|
-
>
|
|
111
|
-
<img
|
|
112
|
-
src="https://upload.wikimedia.org/wikipedia/commons/d/db/Npm-logo.svg"
|
|
113
|
-
class="mw-techstack-logo"
|
|
114
|
-
alt="NPM"
|
|
115
|
-
loading="lazy"
|
|
116
|
-
/>
|
|
117
|
-
</a>
|
|
118
|
-
</div>
|
|
119
|
-
</div>
|
|
120
|
-
|
|
121
|
-
<div>
|
|
122
|
-
<h4 class="mw-mb-2">Small Items with Name</h4>
|
|
123
|
-
<div class="mw-techstack-bucket">
|
|
124
|
-
<a href="#" class="mw-techstack-item mw-techstack-item-sm">
|
|
125
|
-
<img
|
|
126
|
-
src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg"
|
|
127
|
-
class="mw-techstack-logo"
|
|
128
|
-
alt="React"
|
|
129
|
-
loading="lazy"
|
|
130
|
-
/>
|
|
131
|
-
<div class="mw-techstack-info">
|
|
132
|
-
<span class="mw-techstack-name">React</span>
|
|
133
|
-
</div>
|
|
134
|
-
</a>
|
|
135
|
-
<a href="#" class="mw-techstack-item mw-techstack-item-sm">
|
|
136
|
-
<img
|
|
137
|
-
src="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg"
|
|
138
|
-
class="mw-techstack-logo"
|
|
139
|
-
alt="Vue"
|
|
140
|
-
loading="lazy"
|
|
141
|
-
/>
|
|
142
|
-
<div class="mw-techstack-info">
|
|
143
|
-
<span class="mw-techstack-name">Vue.js</span>
|
|
144
|
-
</div>
|
|
145
|
-
</a>
|
|
146
|
-
<a href="#" class="mw-techstack-item mw-techstack-item-sm">
|
|
147
|
-
<img
|
|
148
|
-
src="https://upload.wikimedia.org/wikipedia/commons/d/d5/Tailwind_CSS_Logo.svg"
|
|
149
|
-
class="mw-techstack-logo"
|
|
150
|
-
alt="Tailwind"
|
|
151
|
-
loading="lazy"
|
|
152
|
-
/>
|
|
153
|
-
<div class="mw-techstack-info">
|
|
154
|
-
<span class="mw-techstack-name">Tailwind</span>
|
|
155
|
-
</div>
|
|
156
|
-
</a>
|
|
157
|
-
</div>
|
|
158
|
-
</div>
|
|
159
|
-
|
|
160
|
-
<div>
|
|
161
|
-
<h4 class="mw-mb-2">Dashed Variant (Mixed Content)</h4>
|
|
162
|
-
<div class="mw-techstack-bucket mw-techstack-bucket-dashed">
|
|
163
|
-
<a href="#" class="mw-techstack-item mw-techstack-item-sm">
|
|
164
|
-
<img
|
|
165
|
-
src="https://upload.wikimedia.org/wikipedia/commons/d/d5/Rust_programming_language_black_logo.svg"
|
|
166
|
-
class="mw-techstack-logo"
|
|
167
|
-
alt="Rust"
|
|
168
|
-
loading="lazy"
|
|
169
|
-
/>
|
|
170
|
-
<div class="mw-techstack-info">
|
|
171
|
-
<span class="mw-techstack-name">Rust</span>
|
|
172
|
-
</div>
|
|
173
|
-
</a>
|
|
174
|
-
<a href="#" class="mw-techstack-item mw-techstack-item-sm">
|
|
175
|
-
<img
|
|
176
|
-
src="https://upload.wikimedia.org/wikipedia/commons/c/c3/Python-logo-notext.svg"
|
|
177
|
-
class="mw-techstack-logo"
|
|
178
|
-
alt="Python"
|
|
179
|
-
loading="lazy"
|
|
180
|
-
/>
|
|
181
|
-
<div class="mw-techstack-info">
|
|
182
|
-
<span class="mw-techstack-name">Python</span>
|
|
183
|
-
</div>
|
|
184
|
-
</a>
|
|
185
|
-
</div>
|
|
186
|
-
</div>
|
|
187
|
-
</div>
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
<h3 class="mw-section-subtitle">Testimonials</h3>
|
|
2
|
-
<p class="mw-text-muted mw-text-measure">
|
|
3
|
-
A quote card with its source - a <code>figure</code>, because quote and
|
|
4
|
-
attribution belong together. One voice may stand above the grid as
|
|
5
|
-
<code>mw-testimonial-featured</code>; the rest flow in
|
|
6
|
-
<code>mw-columns-3</code>, the masonry layout for cards of unequal height. The
|
|
7
|
-
cards below also carry <code>mw-reveal</code> - scroll them into view to see
|
|
8
|
-
the entrance. Three of them are dated: <code>mw-testimonial-date</code> is a
|
|
9
|
-
<code>time</code> element on the right edge of the source line, month and
|
|
10
|
-
year. It is optional on purpose - a dated quote ages, so only show it where
|
|
11
|
-
the voices are kept fresh.
|
|
12
|
-
</p>
|
|
13
|
-
|
|
14
|
-
<figure class="mw-testimonial mw-testimonial-featured mw-mb-6">
|
|
15
|
-
<blockquote>
|
|
16
|
-
We rebuilt our whole customer portal on this in three weeks. The team never
|
|
17
|
-
argued about spacing or shadows again - the framework had already decided,
|
|
18
|
-
and it had decided well.
|
|
19
|
-
</blockquote>
|
|
20
|
-
<figcaption class="mw-testimonial-source">
|
|
21
|
-
Maren K.
|
|
22
|
-
<span class="mw-testimonial-detail">· Head of Engineering</span>
|
|
23
|
-
<time class="mw-testimonial-date" datetime="2026-06">June 2026</time>
|
|
24
|
-
</figcaption>
|
|
25
|
-
</figure>
|
|
26
|
-
|
|
27
|
-
<div class="mw-columns-3">
|
|
28
|
-
<figure class="mw-testimonial mw-reveal">
|
|
29
|
-
<blockquote>
|
|
30
|
-
The dark theme just worked. We flipped one class and every component
|
|
31
|
-
followed.
|
|
32
|
-
</blockquote>
|
|
33
|
-
<figcaption class="mw-testimonial-source">
|
|
34
|
-
Jonas R.
|
|
35
|
-
<span class="mw-testimonial-detail">· Frontend Developer</span>
|
|
36
|
-
</figcaption>
|
|
37
|
-
</figure>
|
|
38
|
-
|
|
39
|
-
<figure class="mw-testimonial mw-reveal">
|
|
40
|
-
<blockquote>
|
|
41
|
-
I came for the grid and stayed for the corner accents. Our app finally
|
|
42
|
-
looks like one product instead of five teams.
|
|
43
|
-
</blockquote>
|
|
44
|
-
<figcaption class="mw-testimonial-source">
|
|
45
|
-
Priya S.
|
|
46
|
-
<span class="mw-testimonial-detail">· Product Designer</span>
|
|
47
|
-
<time class="mw-testimonial-date" datetime="2026-04">April 2026</time>
|
|
48
|
-
</figcaption>
|
|
49
|
-
</figure>
|
|
50
|
-
|
|
51
|
-
<figure class="mw-testimonial mw-reveal">
|
|
52
|
-
<blockquote>Small CSS, no build step, readable class names.</blockquote>
|
|
53
|
-
<figcaption class="mw-testimonial-source">
|
|
54
|
-
Tom W. <span class="mw-testimonial-detail">· Freelancer</span>
|
|
55
|
-
</figcaption>
|
|
56
|
-
</figure>
|
|
57
|
-
|
|
58
|
-
<figure class="mw-testimonial mw-reveal">
|
|
59
|
-
<blockquote>
|
|
60
|
-
The form controls line up with the buttons out of the box. That alone
|
|
61
|
-
saved us a week of pixel pushing across three breakpoints - and the touch
|
|
62
|
-
targets grow on their own on mobile.
|
|
63
|
-
</blockquote>
|
|
64
|
-
<figcaption class="mw-testimonial-source">
|
|
65
|
-
Aylin D. <span class="mw-testimonial-detail">· Agency Lead</span>
|
|
66
|
-
<time class="mw-testimonial-date" datetime="2026-08">August 2026</time>
|
|
67
|
-
</figcaption>
|
|
68
|
-
</figure>
|
|
69
|
-
|
|
70
|
-
<figure class="mw-testimonial mw-reveal">
|
|
71
|
-
<blockquote>
|
|
72
|
-
Swapped one primary color, the whole palette followed.
|
|
73
|
-
</blockquote>
|
|
74
|
-
<figcaption class="mw-testimonial-source">
|
|
75
|
-
Ben L. <span class="mw-testimonial-detail">· Indie Hacker</span>
|
|
76
|
-
</figcaption>
|
|
77
|
-
</figure>
|
|
78
|
-
|
|
79
|
-
<figure class="mw-testimonial mw-reveal">
|
|
80
|
-
<blockquote>
|
|
81
|
-
Our legal pages, our landing page and our admin tables all speak the same
|
|
82
|
-
language now.
|
|
83
|
-
</blockquote>
|
|
84
|
-
<figcaption class="mw-testimonial-source">
|
|
85
|
-
Carla M. <span class="mw-testimonial-detail">· CTO</span>
|
|
86
|
-
</figcaption>
|
|
87
|
-
</figure>
|
|
88
|
-
</div>
|