@czi-sds/mcp 0.5.2 → 0.5.3
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/data/tailwind.json +25 -25
- package/data/zeroheight-cache.json +5065 -1
- package/data/zeroheight-exports/Accordion.md +81 -20
- package/data/zeroheight-exports/Banner.md +104 -10
- package/data/zeroheight-exports/Buttons.md +1029 -1454
- package/data/zeroheight-exports/Callout.md +174 -9
- package/data/zeroheight-exports/Colors.md +1164 -41
- package/data/zeroheight-exports/Content-Card.md +148 -0
- package/data/zeroheight-exports/Control-Inputs.md +778 -63
- package/data/zeroheight-exports/Corners.md +8 -15
- package/data/zeroheight-exports/Dialog.md +200 -12
- package/data/zeroheight-exports/Downloads.md +120 -0
- package/data/zeroheight-exports/Dropdown-Input.md +616 -12
- package/data/zeroheight-exports/Dropdown-Menus.md +1150 -0
- package/data/zeroheight-exports/Field-Inputs.md +450 -9
- package/data/zeroheight-exports/Filters.md +238 -9
- package/data/zeroheight-exports/Getting-Started.md +7 -3
- package/data/zeroheight-exports/Hero.md +152 -0
- package/data/zeroheight-exports/Icons.md +1854 -218
- package/data/zeroheight-exports/Intent.md +40 -0
- package/data/zeroheight-exports/Link.md +52 -6
- package/data/zeroheight-exports/Lists.md +364 -6
- package/data/zeroheight-exports/Loading-Indicator.md +8 -0
- package/data/zeroheight-exports/Navigation.md +328 -6
- package/data/zeroheight-exports/Notification.md +172 -12
- package/data/zeroheight-exports/Panel.md +72 -12
- package/data/zeroheight-exports/README.md +17 -19
- package/data/zeroheight-exports/Responsive-Design.md +52 -0
- package/data/zeroheight-exports/Search-Input.md +44 -0
- package/data/zeroheight-exports/Search.md +248 -0
- package/data/zeroheight-exports/Segmented-Control.md +34 -9
- package/data/zeroheight-exports/Table.md +468 -47
- package/data/zeroheight-exports/Tabs.md +542 -9
- package/data/zeroheight-exports/Tags.md +504 -12
- package/data/zeroheight-exports/Text-Link.md +100 -0
- package/data/zeroheight-exports/Theming.md +36 -6
- package/data/zeroheight-exports/Tooltips.md +466 -15
- package/data/zeroheight-exports/Typography.md +64 -32
- package/package.json +3 -3
- package/data/zeroheight-exports/Dropdown-Menu.md +0 -3883
|
@@ -11,6 +11,14 @@ Tags are used to help with categorization on plugin pages or in conjunction with
|
|
|
11
11
|
|
|
12
12
|
Use the links below to jump to information on a specific Tag:
|
|
13
13
|
|
|
14
|
+
**Tag**
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
**TagFilter**
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
14
22
|
---
|
|
15
23
|
|
|
16
24
|
## Tag
|
|
@@ -29,12 +37,32 @@ Click on each state below to enter inspect view and get details on its code attr
|
|
|
29
37
|
| **Default (Inactive)** | **Default (Active)** | **Hover** | **Pressed** |
|
|
30
38
|
| ---------------------- | -------------------- | --------- | ----------- |
|
|
31
39
|
|
|
40
|
+
**Tag**
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
**Tag**
|
|
45
|
+
|
|
46
|
+
---
|
|
47
|
+
|
|
48
|
+
**Tag**
|
|
49
|
+
|
|
50
|
+
---
|
|
51
|
+
|
|
52
|
+
**Tag**
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
32
56
|
---
|
|
33
57
|
|
|
34
58
|
### Tag Spacing
|
|
35
59
|
|
|
36
60
|
These rules establish how much margin should exist between and around elements.
|
|
37
61
|
|
|
62
|
+
**Tag spacing**
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
38
66
|
---
|
|
39
67
|
|
|
40
68
|
## Filter Tag
|
|
@@ -49,12 +77,28 @@ Click on each state below to enter inspect view and get details on its code attr
|
|
|
49
77
|
| **Default** | **Hover** | **Pressed** |
|
|
50
78
|
| ----------- | --------- | ----------- |
|
|
51
79
|
|
|
80
|
+
**Tag**
|
|
81
|
+
|
|
82
|
+
---
|
|
83
|
+
|
|
84
|
+
**Tag**
|
|
85
|
+
|
|
86
|
+
---
|
|
87
|
+
|
|
88
|
+
**Tag**
|
|
89
|
+
|
|
90
|
+
---
|
|
91
|
+
|
|
52
92
|
---
|
|
53
93
|
|
|
54
94
|
### Filter Tag Spacing
|
|
55
95
|
|
|
56
96
|
These rules establish how much margin should exist between and around elements.
|
|
57
97
|
|
|
98
|
+
**Filter Tag spacing**
|
|
99
|
+
|
|
100
|
+
---
|
|
101
|
+
|
|
58
102
|
## Code
|
|
59
103
|
|
|
60
104
|
## Tag Components
|
|
@@ -103,12 +147,28 @@ Click on each state below to enter inspect view and get details on its code attr
|
|
|
103
147
|
| **Default** | **Hover** | **Pressed** |
|
|
104
148
|
| ----------- | --------- | ----------- |
|
|
105
149
|
|
|
150
|
+
**TagFilter**
|
|
151
|
+
|
|
152
|
+
---
|
|
153
|
+
|
|
154
|
+
**TagFilter**
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
**TagFilter**
|
|
159
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
106
162
|
---
|
|
107
163
|
|
|
108
164
|
### Filter Tag Spacing
|
|
109
165
|
|
|
110
166
|
These rules establish how much margin should exist between and around elements.
|
|
111
167
|
|
|
168
|
+
**Filter Tag spacing**
|
|
169
|
+
|
|
170
|
+
---
|
|
171
|
+
|
|
112
172
|
---
|
|
113
173
|
|
|
114
174
|
## Rounded Tag
|
|
@@ -125,15 +185,43 @@ Click on each state below to enter inspect view and get details on its code attr
|
|
|
125
185
|
| **Default** | **Hover** | **Pressed** |
|
|
126
186
|
| ----------- | --------- | ----------- |
|
|
127
187
|
|
|
188
|
+
**Tag**
|
|
189
|
+
|
|
190
|
+
---
|
|
191
|
+
|
|
192
|
+
**Tag**
|
|
193
|
+
|
|
194
|
+
---
|
|
195
|
+
|
|
196
|
+
**Tag**
|
|
197
|
+
|
|
198
|
+
---
|
|
199
|
+
|
|
128
200
|
| **Default + Icon** | **Hover** | **Pressed** |
|
|
129
201
|
| ------------------ | --------- | ----------- |
|
|
130
202
|
|
|
203
|
+
**Tag**
|
|
204
|
+
|
|
205
|
+
---
|
|
206
|
+
|
|
207
|
+
**Tag**
|
|
208
|
+
|
|
209
|
+
---
|
|
210
|
+
|
|
211
|
+
**Tag**
|
|
212
|
+
|
|
213
|
+
---
|
|
214
|
+
|
|
131
215
|
---
|
|
132
216
|
|
|
133
217
|
### Rounded Tag Spacing
|
|
134
218
|
|
|
135
219
|
These rules establish how much margin should exist between and around elements.
|
|
136
220
|
|
|
221
|
+
**Rounded Tag spacing_CZ GE**
|
|
222
|
+
|
|
223
|
+
---
|
|
224
|
+
|
|
137
225
|
---
|
|
138
226
|
|
|
139
227
|
### Intent Variations
|
|
@@ -145,9 +233,25 @@ The Info variant is used when the information being communicated is neutral in n
|
|
|
145
233
|
| **Error** | **Info** |
|
|
146
234
|
| --------- | -------- |
|
|
147
235
|
|
|
236
|
+
**Error variant**
|
|
237
|
+
|
|
238
|
+
---
|
|
239
|
+
|
|
240
|
+
**Info variant**
|
|
241
|
+
|
|
242
|
+
---
|
|
243
|
+
|
|
148
244
|
| **Success** | **Warning** |
|
|
149
245
|
| ----------- | ----------- |
|
|
150
246
|
|
|
247
|
+
**Success variant**
|
|
248
|
+
|
|
249
|
+
---
|
|
250
|
+
|
|
251
|
+
**Warning variant**
|
|
252
|
+
|
|
253
|
+
---
|
|
254
|
+
|
|
151
255
|
## Code
|
|
152
256
|
|
|
153
257
|
## Tag Components
|
|
@@ -194,12 +298,28 @@ Click on each state below to enter inspect view and get details on its code attr
|
|
|
194
298
|
| **Default** | **Hover** | **Pressed** |
|
|
195
299
|
| ----------- | --------- | ----------- |
|
|
196
300
|
|
|
301
|
+
**TagFilter**
|
|
302
|
+
|
|
303
|
+
---
|
|
304
|
+
|
|
305
|
+
**TagFilter**
|
|
306
|
+
|
|
307
|
+
---
|
|
308
|
+
|
|
309
|
+
**TagFilter**
|
|
310
|
+
|
|
311
|
+
---
|
|
312
|
+
|
|
197
313
|
---
|
|
198
314
|
|
|
199
315
|
### Filter Tag Spacing
|
|
200
316
|
|
|
201
317
|
These rules establish how much margin should exist between and around elements.
|
|
202
318
|
|
|
319
|
+
**Filter Tag spacing**
|
|
320
|
+
|
|
321
|
+
---
|
|
322
|
+
|
|
203
323
|
---
|
|
204
324
|
|
|
205
325
|
## Rounded Tag
|
|
@@ -216,15 +336,43 @@ Click on each state below to enter inspect view and get details on its code attr
|
|
|
216
336
|
| **Default** | **Hover** | **Pressed** |
|
|
217
337
|
| ----------- | --------- | ----------- |
|
|
218
338
|
|
|
339
|
+
**Tag**
|
|
340
|
+
|
|
341
|
+
---
|
|
342
|
+
|
|
343
|
+
**Tag**
|
|
344
|
+
|
|
345
|
+
---
|
|
346
|
+
|
|
347
|
+
**Tag**
|
|
348
|
+
|
|
349
|
+
---
|
|
350
|
+
|
|
219
351
|
| **Default + Icon** | **Hover** | **Pressed** |
|
|
220
352
|
| ------------------ | --------- | ----------- |
|
|
221
353
|
|
|
354
|
+
**Tag**
|
|
355
|
+
|
|
356
|
+
---
|
|
357
|
+
|
|
358
|
+
**Tag**
|
|
359
|
+
|
|
360
|
+
---
|
|
361
|
+
|
|
362
|
+
**Tag**
|
|
363
|
+
|
|
364
|
+
---
|
|
365
|
+
|
|
222
366
|
---
|
|
223
367
|
|
|
224
368
|
### Rounded Tag Spacing
|
|
225
369
|
|
|
226
370
|
These rules establish how much margin should exist between and around elements.
|
|
227
371
|
|
|
372
|
+
**Rounded Tag spacing_CZ ID**
|
|
373
|
+
|
|
374
|
+
---
|
|
375
|
+
|
|
228
376
|
---
|
|
229
377
|
|
|
230
378
|
## Square Tag
|
|
@@ -241,12 +389,28 @@ Click on each state below to enter inspect view and get details on its code attr
|
|
|
241
389
|
| **Default** | **Hover** | **Pressed** |
|
|
242
390
|
| ----------- | --------- | ----------- |
|
|
243
391
|
|
|
392
|
+
**Tag**
|
|
393
|
+
|
|
394
|
+
---
|
|
395
|
+
|
|
396
|
+
**Tag**
|
|
397
|
+
|
|
398
|
+
---
|
|
399
|
+
|
|
400
|
+
**Tag**
|
|
401
|
+
|
|
402
|
+
---
|
|
403
|
+
|
|
244
404
|
---
|
|
245
405
|
|
|
246
406
|
### Square Tag Spacing
|
|
247
407
|
|
|
248
408
|
These rules establish how much margin should exist between and around elements.
|
|
249
409
|
|
|
410
|
+
**Square Tag spacing_CZ ID**
|
|
411
|
+
|
|
412
|
+
---
|
|
413
|
+
|
|
250
414
|
## Code
|
|
251
415
|
|
|
252
416
|
## Tag Components
|
|
@@ -281,6 +445,14 @@ Tags are used to label the status of certain elements or in conjunction with fil
|
|
|
281
445
|
|
|
282
446
|
### Visual Preview
|
|
283
447
|
|
|
448
|
+
**Preview_Guidelines_Tag**
|
|
449
|
+
|
|
450
|
+
---
|
|
451
|
+
|
|
452
|
+
**Preview_Guidelines_TagFilter**
|
|
453
|
+
|
|
454
|
+
---
|
|
455
|
+
|
|
284
456
|
---
|
|
285
457
|
|
|
286
458
|
## Tag
|
|
@@ -292,6 +464,14 @@ Tags are used to label the status of certain elements or in conjunction with fil
|
|
|
292
464
|
|
|
293
465
|
The two available Tag styles are shown below, demonstrated here using the primary type. There are five intents that Tags can communicate—see the Intent Variations section below for more details.
|
|
294
466
|
|
|
467
|
+
**Tag_Rounded**
|
|
468
|
+
|
|
469
|
+
---
|
|
470
|
+
|
|
471
|
+
**Tag_Square**
|
|
472
|
+
|
|
473
|
+
---
|
|
474
|
+
|
|
295
475
|
---
|
|
296
476
|
|
|
297
477
|
### Live Instance
|
|
@@ -315,6 +495,42 @@ Use Tag – Primary in conjunction with the primary or most important content. I
|
|
|
315
495
|
| Default | Hover | Pressed |
|
|
316
496
|
| ------- | ----- | ------- |
|
|
317
497
|
|
|
498
|
+
**Tag_Primary_Rounded_Small_No Icon_Default**
|
|
499
|
+
|
|
500
|
+
---
|
|
501
|
+
|
|
502
|
+
**Tag_Primary_Rounded_Small_No Icon_Hover**
|
|
503
|
+
|
|
504
|
+
---
|
|
505
|
+
|
|
506
|
+
**Tag_Primary_Rounded_Small_No Icon_Pressed**
|
|
507
|
+
|
|
508
|
+
---
|
|
509
|
+
|
|
510
|
+
**Tag_Primary_Rounded_Small_Icon_Default**
|
|
511
|
+
|
|
512
|
+
---
|
|
513
|
+
|
|
514
|
+
**Tag_Primary_Rounded_Small_Icon_Hover**
|
|
515
|
+
|
|
516
|
+
---
|
|
517
|
+
|
|
518
|
+
**Tag_Primary_Rounded_Small_Icon_Pressed**
|
|
519
|
+
|
|
520
|
+
---
|
|
521
|
+
|
|
522
|
+
**Tag_Primary_Rounded_Large_Icon_Default**
|
|
523
|
+
|
|
524
|
+
---
|
|
525
|
+
|
|
526
|
+
**Tag_Primary_Rounded_Large_Icon_Hover**
|
|
527
|
+
|
|
528
|
+
---
|
|
529
|
+
|
|
530
|
+
**Tag_Primary_Rounded_Large_Icon_Pressed**
|
|
531
|
+
|
|
532
|
+
---
|
|
533
|
+
|
|
318
534
|
#### Secondary
|
|
319
535
|
|
|
320
536
|
Use Tag – Secondary in conjunction with secondary or less important content. Include an icon when needing to provide additional context to users of what content the Tag is connected to.
|
|
@@ -324,6 +540,42 @@ Use Tag – Secondary in conjunction with secondary or less important content. I
|
|
|
324
540
|
| Default | Hover | Pressed |
|
|
325
541
|
| ------- | ----- | ------- |
|
|
326
542
|
|
|
543
|
+
**Tag_Secondary_Rounded_Small_No Icon_Default**
|
|
544
|
+
|
|
545
|
+
---
|
|
546
|
+
|
|
547
|
+
**Tag_Secondary_Rounded_Small_No Icon_Hover**
|
|
548
|
+
|
|
549
|
+
---
|
|
550
|
+
|
|
551
|
+
**Tag_Secondary_Rounded_Small_No Icon_Pressed**
|
|
552
|
+
|
|
553
|
+
---
|
|
554
|
+
|
|
555
|
+
**Tag_Secondary_Rounded_Small_Icon_Default**
|
|
556
|
+
|
|
557
|
+
---
|
|
558
|
+
|
|
559
|
+
**Tag_Secondary_Rounded_Small_Icon_Hover**
|
|
560
|
+
|
|
561
|
+
---
|
|
562
|
+
|
|
563
|
+
**Tag_Secondary_Rounded_Small_Icon_Pressed**
|
|
564
|
+
|
|
565
|
+
---
|
|
566
|
+
|
|
567
|
+
**Tag_Secondary_Rounded_Large_Icon_Default**
|
|
568
|
+
|
|
569
|
+
---
|
|
570
|
+
|
|
571
|
+
**Tag_Secondary_Rounded_Large_Icon_Hover**
|
|
572
|
+
|
|
573
|
+
---
|
|
574
|
+
|
|
575
|
+
**Tag_Secondary_Rounded_Large_Icon_Pressed**
|
|
576
|
+
|
|
577
|
+
---
|
|
578
|
+
|
|
327
579
|
---
|
|
328
580
|
|
|
329
581
|
### Tag – Square
|
|
@@ -339,6 +591,42 @@ Use Tag – Primary in conjunction with the primary or most important content. I
|
|
|
339
591
|
| Default | Hover | Pressed |
|
|
340
592
|
| ------- | ----- | ------- |
|
|
341
593
|
|
|
594
|
+
**Tag_Primary_Square_Small_No Icon_Default**
|
|
595
|
+
|
|
596
|
+
---
|
|
597
|
+
|
|
598
|
+
**Tag_Primary_Square_Small_No Icon_Hover**
|
|
599
|
+
|
|
600
|
+
---
|
|
601
|
+
|
|
602
|
+
**Tag_Primary_Square_Small_No Icon_Pressed**
|
|
603
|
+
|
|
604
|
+
---
|
|
605
|
+
|
|
606
|
+
**Tag_Primary_Square_Small_Icon_Default**
|
|
607
|
+
|
|
608
|
+
---
|
|
609
|
+
|
|
610
|
+
**Tag_Primary_Square_Small_Icon_Hover**
|
|
611
|
+
|
|
612
|
+
---
|
|
613
|
+
|
|
614
|
+
**Tag_Primary_Square_Small_Icon_Pressed**
|
|
615
|
+
|
|
616
|
+
---
|
|
617
|
+
|
|
618
|
+
**Tag_Primary_Square_Large_Icon_Default**
|
|
619
|
+
|
|
620
|
+
---
|
|
621
|
+
|
|
622
|
+
**Tag_Primary_Square_Large_Icon_Hover**
|
|
623
|
+
|
|
624
|
+
---
|
|
625
|
+
|
|
626
|
+
**Tag_Primary_Square_Large_Icon_Pressed**
|
|
627
|
+
|
|
628
|
+
---
|
|
629
|
+
|
|
342
630
|
#### Secondary
|
|
343
631
|
|
|
344
632
|
Use Tag – Secondary in conjunction with secondary or less important content. Include an icon when needing to provide additional context to users of what content the Tag is connected to.
|
|
@@ -348,12 +636,52 @@ Use Tag – Secondary in conjunction with secondary or less important content. I
|
|
|
348
636
|
| Default | Hover | Pressed |
|
|
349
637
|
| ------- | ----- | ------- |
|
|
350
638
|
|
|
639
|
+
**Tag_Secondary_Square_Small_No Icon_Default**
|
|
640
|
+
|
|
641
|
+
---
|
|
642
|
+
|
|
643
|
+
**Tag_Secondary_Square_Small_No Icon_Hover**
|
|
644
|
+
|
|
645
|
+
---
|
|
646
|
+
|
|
647
|
+
**Tag_Secondary_Square_Small_No Icon_Pressed**
|
|
648
|
+
|
|
649
|
+
---
|
|
650
|
+
|
|
651
|
+
**Tag_Secondary_Square_Small_Icon_Default**
|
|
652
|
+
|
|
653
|
+
---
|
|
654
|
+
|
|
655
|
+
**Tag_Secondary_Square_Small_Icon_Hover**
|
|
656
|
+
|
|
657
|
+
---
|
|
658
|
+
|
|
659
|
+
**Tag_Secondary_Square_Small_Icon_Pressed**
|
|
660
|
+
|
|
661
|
+
---
|
|
662
|
+
|
|
663
|
+
**Tag_Secondary_Square_Large_Icon_Default**
|
|
664
|
+
|
|
665
|
+
---
|
|
666
|
+
|
|
667
|
+
**Tag_Secondary_Square_Large_Icon_Hover**
|
|
668
|
+
|
|
669
|
+
---
|
|
670
|
+
|
|
671
|
+
**Tag_Secondary_Square_Large_Icon_Pressed**
|
|
672
|
+
|
|
673
|
+
---
|
|
674
|
+
|
|
351
675
|
---
|
|
352
676
|
|
|
353
677
|
### Tag Spacing
|
|
354
678
|
|
|
355
679
|
These rules establish how much margin should exist between and around elements.
|
|
356
680
|
|
|
681
|
+
**Tag Spacing**
|
|
682
|
+
|
|
683
|
+
---
|
|
684
|
+
|
|
357
685
|
---
|
|
358
686
|
|
|
359
687
|
### Intent Variations
|
|
@@ -367,11 +695,155 @@ Each intent is demonstrated below using the default state of the rounded variant
|
|
|
367
695
|
| Beta | Info | Negative | None | Notice | Positive |
|
|
368
696
|
| ---- | ---- | -------- | ---- | ------ | -------- |
|
|
369
697
|
|
|
698
|
+
**Tag_Primary_Small_No Icon_Intent_Beta**
|
|
699
|
+
|
|
700
|
+
---
|
|
701
|
+
|
|
702
|
+
**Tag_Primary_Small_No Icon_Intent_Info**
|
|
703
|
+
|
|
704
|
+
---
|
|
705
|
+
|
|
706
|
+
**Tag_Primary_Small_No Icon_Intent_Negative**
|
|
707
|
+
|
|
708
|
+
---
|
|
709
|
+
|
|
710
|
+
**Tag_Primary_Small_No Icon_Intent_None**
|
|
711
|
+
|
|
712
|
+
---
|
|
713
|
+
|
|
714
|
+
**Tag_Primary_Small_No Icon_Intent_Notice**
|
|
715
|
+
|
|
716
|
+
---
|
|
717
|
+
|
|
718
|
+
**Tag_Primary_Small_No Icon_Intent_Positive**
|
|
719
|
+
|
|
720
|
+
---
|
|
721
|
+
|
|
722
|
+
**Tag_Primary_Small_Icon_Intent_Beta**
|
|
723
|
+
|
|
724
|
+
---
|
|
725
|
+
|
|
726
|
+
**Tag_Primary_Small_Icon_Intent_Info**
|
|
727
|
+
|
|
728
|
+
---
|
|
729
|
+
|
|
730
|
+
**Tag_Primary_Small_Icon_Intent_Negative**
|
|
731
|
+
|
|
732
|
+
---
|
|
733
|
+
|
|
734
|
+
**Tag_Primary_Small_Icon_Intent_None**
|
|
735
|
+
|
|
736
|
+
---
|
|
737
|
+
|
|
738
|
+
**Tag_Primary_Small_Icon_Intent_Notice**
|
|
739
|
+
|
|
740
|
+
---
|
|
741
|
+
|
|
742
|
+
**Tag_Primary_Small_Icon_Intent_Positive**
|
|
743
|
+
|
|
744
|
+
---
|
|
745
|
+
|
|
746
|
+
**Tag_Primary_Large_No Icon_Intent_Beta**
|
|
747
|
+
|
|
748
|
+
---
|
|
749
|
+
|
|
750
|
+
**Tag_Primary_Large_No Icon_Intent_Info**
|
|
751
|
+
|
|
752
|
+
---
|
|
753
|
+
|
|
754
|
+
**Tag_Primary_Large_No Icon_Intent_Negative**
|
|
755
|
+
|
|
756
|
+
---
|
|
757
|
+
|
|
758
|
+
**Tag_Primary_Large_No Icon_Intent_None**
|
|
759
|
+
|
|
760
|
+
---
|
|
761
|
+
|
|
762
|
+
**Tag_Primary_Large_No Icon_Intent_Notice**
|
|
763
|
+
|
|
764
|
+
---
|
|
765
|
+
|
|
766
|
+
**Tag_Primary_Large_No Icon_Intent_Positive**
|
|
767
|
+
|
|
768
|
+
---
|
|
769
|
+
|
|
370
770
|
#### Secondary
|
|
371
771
|
|
|
372
772
|
| Beta | Info | Negative | None | Notice | Positive |
|
|
373
773
|
| ---- | ---- | -------- | ---- | ------ | -------- |
|
|
374
774
|
|
|
775
|
+
**Tag_Secondary_Small_No Icon_Intent_Beta**
|
|
776
|
+
|
|
777
|
+
---
|
|
778
|
+
|
|
779
|
+
**Tag_Secondary_Small_No Icon_Intent_Info**
|
|
780
|
+
|
|
781
|
+
---
|
|
782
|
+
|
|
783
|
+
**Tag_Secondary_Small_No Icon_Intent_Negative**
|
|
784
|
+
|
|
785
|
+
---
|
|
786
|
+
|
|
787
|
+
**Tag_Secondary_Small_No Icon_Intent_None**
|
|
788
|
+
|
|
789
|
+
---
|
|
790
|
+
|
|
791
|
+
**Tag_Secondary_Small_No Icon_Intent_Notice**
|
|
792
|
+
|
|
793
|
+
---
|
|
794
|
+
|
|
795
|
+
**Tag_Secondary_Small_No Icon_Intent_Positive**
|
|
796
|
+
|
|
797
|
+
---
|
|
798
|
+
|
|
799
|
+
**Tag_Secondary_Small_Icon_Intent_Beta**
|
|
800
|
+
|
|
801
|
+
---
|
|
802
|
+
|
|
803
|
+
**Tag_Secondary_Small_Icon_Intent_Info**
|
|
804
|
+
|
|
805
|
+
---
|
|
806
|
+
|
|
807
|
+
**Tag_Secondary_Small_Icon_Intent_Negative**
|
|
808
|
+
|
|
809
|
+
---
|
|
810
|
+
|
|
811
|
+
**Tag_Secondary_Small_Icon_Intent_None**
|
|
812
|
+
|
|
813
|
+
---
|
|
814
|
+
|
|
815
|
+
**Tag_Secondary_Small_Icon_Intent_Notice**
|
|
816
|
+
|
|
817
|
+
---
|
|
818
|
+
|
|
819
|
+
**Tag_Secondary_Small_Icon_Intent_Positive**
|
|
820
|
+
|
|
821
|
+
---
|
|
822
|
+
|
|
823
|
+
**Tag_Secondary_Large_No Icon_Intent_Beta**
|
|
824
|
+
|
|
825
|
+
---
|
|
826
|
+
|
|
827
|
+
**Tag_Secondary_Large_No Icon_Intent_Info**
|
|
828
|
+
|
|
829
|
+
---
|
|
830
|
+
|
|
831
|
+
**Tag_Secondary_Large_No Icon_Intent_Negative**
|
|
832
|
+
|
|
833
|
+
---
|
|
834
|
+
|
|
835
|
+
**Tag_Secondary_Large_No Icon_Intent_None**
|
|
836
|
+
|
|
837
|
+
---
|
|
838
|
+
|
|
839
|
+
**Tag_Secondary_Large_No Icon_Intent_Notice**
|
|
840
|
+
|
|
841
|
+
---
|
|
842
|
+
|
|
843
|
+
**Tag_Secondary_Large_No Icon_Intent_Positive**
|
|
844
|
+
|
|
845
|
+
---
|
|
846
|
+
|
|
375
847
|
---
|
|
376
848
|
|
|
377
849
|
## Filter Tag
|
|
@@ -394,12 +866,28 @@ Used Filter Tag in conjunction with Filters to communicate that the dataset is b
|
|
|
394
866
|
| Default | Hover | Pressed |
|
|
395
867
|
| ------- | ----- | ------- |
|
|
396
868
|
|
|
869
|
+
**TagFilter_Default**
|
|
870
|
+
|
|
871
|
+
---
|
|
872
|
+
|
|
873
|
+
**TagFilter_Hover**
|
|
874
|
+
|
|
875
|
+
---
|
|
876
|
+
|
|
877
|
+
**TagFilter_Pressed**
|
|
878
|
+
|
|
879
|
+
---
|
|
880
|
+
|
|
397
881
|
---
|
|
398
882
|
|
|
399
883
|
### Filter Tag Spacing
|
|
400
884
|
|
|
401
885
|
These rules establish how much margin should exist between and around elements.
|
|
402
886
|
|
|
887
|
+
**Filter Tag spacing**
|
|
888
|
+
|
|
889
|
+
---
|
|
890
|
+
|
|
403
891
|
## Code
|
|
404
892
|
|
|
405
893
|
## Tag Components
|
|
@@ -409,6 +897,14 @@ These rules establish how much margin should exist between and around elements.
|
|
|
409
897
|
|
|
410
898
|
### Visual Preview
|
|
411
899
|
|
|
900
|
+
**Preview_Code_Tag**
|
|
901
|
+
|
|
902
|
+
---
|
|
903
|
+
|
|
904
|
+
**Preview_Code_TagFilter**
|
|
905
|
+
|
|
906
|
+
---
|
|
907
|
+
|
|
412
908
|
> **Note:** The code examples below must install dependencies before displaying and may take extra time to load
|
|
413
909
|
|
|
414
910
|
---
|
|
@@ -554,15 +1050,14 @@ root.render(
|
|
|
554
1050
|
<head>
|
|
555
1051
|
<meta charset="UTF-8" />
|
|
556
1052
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
557
|
-
<title>Tags</title>
|
|
558
1053
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
559
1054
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
560
1055
|
<link
|
|
561
|
-
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
|
|
1056
|
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
|
562
1057
|
rel="stylesheet"
|
|
563
1058
|
/>
|
|
564
1059
|
<link
|
|
565
|
-
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
|
|
1060
|
+
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
|
|
566
1061
|
rel="stylesheet"
|
|
567
1062
|
/>
|
|
568
1063
|
</head>
|
|
@@ -701,15 +1196,14 @@ root.render(
|
|
|
701
1196
|
<head>
|
|
702
1197
|
<meta charset="UTF-8" />
|
|
703
1198
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
704
|
-
<title>Tags</title>
|
|
705
1199
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
706
1200
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
707
1201
|
<link
|
|
708
|
-
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
|
|
1202
|
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
|
709
1203
|
rel="stylesheet"
|
|
710
1204
|
/>
|
|
711
1205
|
<link
|
|
712
|
-
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
|
|
1206
|
+
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
|
|
713
1207
|
rel="stylesheet"
|
|
714
1208
|
/>
|
|
715
1209
|
</head>
|
|
@@ -848,15 +1342,14 @@ root.render(
|
|
|
848
1342
|
<head>
|
|
849
1343
|
<meta charset="UTF-8" />
|
|
850
1344
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
851
|
-
<title>Tags</title>
|
|
852
1345
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
853
1346
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
854
1347
|
<link
|
|
855
|
-
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
|
|
1348
|
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
|
856
1349
|
rel="stylesheet"
|
|
857
1350
|
/>
|
|
858
1351
|
<link
|
|
859
|
-
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
|
|
1352
|
+
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
|
|
860
1353
|
rel="stylesheet"
|
|
861
1354
|
/>
|
|
862
1355
|
</head>
|
|
@@ -1016,15 +1509,14 @@ root.render(
|
|
|
1016
1509
|
<head>
|
|
1017
1510
|
<meta charset="UTF-8" />
|
|
1018
1511
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
1019
|
-
<title>Tags</title>
|
|
1020
1512
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
1021
1513
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
1022
1514
|
<link
|
|
1023
|
-
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
|
|
1515
|
+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
|
|
1024
1516
|
rel="stylesheet"
|
|
1025
1517
|
/>
|
|
1026
1518
|
<link
|
|
1027
|
-
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&display=swap"
|
|
1519
|
+
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
|
|
1028
1520
|
rel="stylesheet"
|
|
1029
1521
|
/>
|
|
1030
1522
|
</head>
|