@patternfly/patternfly 5.0.0-alpha.37 → 5.0.0-alpha.39
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/components/Card/card.css +95 -29
- package/components/Card/card.scss +142 -37
- package/components/DataList/data-list.css +34 -29
- package/components/DataList/data-list.scss +32 -24
- package/components/Table/table.css +60 -63
- package/components/Table/table.scss +56 -60
- package/docs/components/Card/examples/Card.md +544 -59
- package/docs/components/DataList/examples/DataList.md +52 -54
- package/docs/components/Table/examples/Table.md +136 -2125
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +10 -20
- package/package.json +5 -5
- package/patternfly-no-globals.css +189 -121
- package/patternfly.css +189 -121
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -76,7 +76,7 @@ cssPrefix: pf-c-card
|
|
|
76
76
|
type="checkbox"
|
|
77
77
|
id="card-action-example-1-check"
|
|
78
78
|
name="card-action-example-1-check"
|
|
79
|
-
aria-
|
|
79
|
+
aria-labelledby="card-action-example-1"
|
|
80
80
|
/>
|
|
81
81
|
</div>
|
|
82
82
|
</div>
|
|
@@ -147,7 +147,7 @@ cssPrefix: pf-c-card
|
|
|
147
147
|
type="checkbox"
|
|
148
148
|
id="card-action-example-2-check"
|
|
149
149
|
name="card-action-example-2-check"
|
|
150
|
-
aria-
|
|
150
|
+
aria-labelledby="card-action-example-2"
|
|
151
151
|
/>
|
|
152
152
|
</div>
|
|
153
153
|
</div>
|
|
@@ -220,7 +220,7 @@ cssPrefix: pf-c-card
|
|
|
220
220
|
type="checkbox"
|
|
221
221
|
id="card-action-example-3-check"
|
|
222
222
|
name="card-action-example-3-check"
|
|
223
|
-
aria-
|
|
223
|
+
aria-labelledby="card-action-example-3"
|
|
224
224
|
/>
|
|
225
225
|
</div>
|
|
226
226
|
</div>
|
|
@@ -359,67 +359,536 @@ cssPrefix: pf-c-card
|
|
|
359
359
|
|
|
360
360
|
```
|
|
361
361
|
|
|
362
|
-
###
|
|
362
|
+
### Selectable
|
|
363
363
|
|
|
364
364
|
```html
|
|
365
|
-
<div class="pf-
|
|
366
|
-
<div class="pf-c-
|
|
367
|
-
<
|
|
365
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
366
|
+
<div class="pf-c-card pf-m-selectable" id="card-selectable-example">
|
|
367
|
+
<div class="pf-c-card__header">
|
|
368
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
369
|
+
<div class="pf-c-card__selectable-actions">
|
|
370
|
+
<div class="pf-c-check pf-m-standalone">
|
|
371
|
+
<input
|
|
372
|
+
class="pf-c-check__input"
|
|
373
|
+
type="checkbox"
|
|
374
|
+
id="card-selectable-example-check"
|
|
375
|
+
name="card-selectable-example-check"
|
|
376
|
+
aria-labelledby="card-selectable-example"
|
|
377
|
+
/>
|
|
378
|
+
|
|
379
|
+
<label
|
|
380
|
+
class="pf-c-check__label"
|
|
381
|
+
id="card-selectable-example-check-label"
|
|
382
|
+
name="card-selectable-example-check"
|
|
383
|
+
for="card-selectable-example-check"
|
|
384
|
+
></label>
|
|
385
|
+
</div>
|
|
386
|
+
</div>
|
|
387
|
+
</div>
|
|
388
|
+
<div class="pf-c-card__header-main">
|
|
389
|
+
<div class="pf-c-card__title">
|
|
390
|
+
<h2 class="pf-c-card__title-text">Title</h2>
|
|
391
|
+
</div>
|
|
392
|
+
</div>
|
|
393
|
+
</div>
|
|
394
|
+
<div class="pf-c-card__body">Body</div>
|
|
395
|
+
<div class="pf-c-card__footer">Footer</div>
|
|
396
|
+
</div>
|
|
397
|
+
|
|
398
|
+
<div
|
|
399
|
+
class="pf-c-card pf-m-selectable pf-m-disabled"
|
|
400
|
+
id="card-selectable-example-disabled"
|
|
401
|
+
>
|
|
402
|
+
<div class="pf-c-card__header">
|
|
403
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
404
|
+
<div class="pf-c-card__selectable-actions">
|
|
405
|
+
<div class="pf-c-check pf-m-standalone">
|
|
406
|
+
<input
|
|
407
|
+
class="pf-c-check__input"
|
|
408
|
+
type="checkbox"
|
|
409
|
+
disabled
|
|
410
|
+
id="card-selectable-example-disabled-check"
|
|
411
|
+
name="card-selectable-example-disabled-check"
|
|
412
|
+
aria-labelledby="card-selectable-example-disabled"
|
|
413
|
+
/>
|
|
414
|
+
|
|
415
|
+
<label
|
|
416
|
+
class="pf-c-check__label pf-m-disabled"
|
|
417
|
+
id="card-selectable-example-disabled-check-label"
|
|
418
|
+
name="card-selectable-example-disabled-check"
|
|
419
|
+
for="card-selectable-example-disabled-check"
|
|
420
|
+
></label>
|
|
421
|
+
</div>
|
|
422
|
+
</div>
|
|
423
|
+
</div>
|
|
424
|
+
<div class="pf-c-card__header-main">
|
|
425
|
+
<div
|
|
426
|
+
class="pf-c-card__title"
|
|
427
|
+
id="card-selectable-example-disabled-title"
|
|
428
|
+
>
|
|
429
|
+
<h2 class="pf-c-card__title-text">Disabled card</h2>
|
|
430
|
+
</div>
|
|
431
|
+
</div>
|
|
432
|
+
</div>
|
|
433
|
+
<div class="pf-c-card__body">Body</div>
|
|
434
|
+
<div class="pf-c-card__footer">Footer</div>
|
|
435
|
+
</div>
|
|
436
|
+
|
|
437
|
+
<div
|
|
438
|
+
class="pf-c-card pf-m-selectable pf-m-selected pf-m-disabled"
|
|
439
|
+
id="card-selectable-example-selected-disabled"
|
|
440
|
+
>
|
|
441
|
+
<div class="pf-c-card__header">
|
|
442
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
443
|
+
<div class="pf-c-card__selectable-actions">
|
|
444
|
+
<div class="pf-c-check pf-m-standalone">
|
|
445
|
+
<input
|
|
446
|
+
class="pf-c-check__input"
|
|
447
|
+
type="checkbox"
|
|
448
|
+
checked
|
|
449
|
+
disabled
|
|
450
|
+
id="card-selectable-example-selected-disabled-check"
|
|
451
|
+
name="card-selectable-example-selected-disabled-check"
|
|
452
|
+
aria-labelledby="card-selectable-example-selected-disabled"
|
|
453
|
+
/>
|
|
454
|
+
|
|
455
|
+
<label
|
|
456
|
+
class="pf-c-check__label pf-m-disabled"
|
|
457
|
+
id="card-selectable-example-selected-disabled-check-label"
|
|
458
|
+
name="card-selectable-example-selected-disabled-check"
|
|
459
|
+
for="card-selectable-example-selected-disabled-check"
|
|
460
|
+
></label>
|
|
461
|
+
</div>
|
|
462
|
+
</div>
|
|
463
|
+
</div>
|
|
464
|
+
<div class="pf-c-card__header-main">
|
|
465
|
+
<div
|
|
466
|
+
class="pf-c-card__title"
|
|
467
|
+
id="card-selectable-example-selected-disabled-title"
|
|
468
|
+
>
|
|
469
|
+
<h2 class="pf-c-card__title-text">Selected but disabled card</h2>
|
|
470
|
+
</div>
|
|
471
|
+
</div>
|
|
472
|
+
</div>
|
|
473
|
+
<div class="pf-c-card__body">Body</div>
|
|
474
|
+
<div class="pf-c-card__footer">Footer</div>
|
|
368
475
|
</div>
|
|
369
|
-
<div class="pf-c-card__body">Body</div>
|
|
370
|
-
<div class="pf-c-card__footer">Footer</div>
|
|
371
476
|
</div>
|
|
372
477
|
|
|
373
478
|
```
|
|
374
479
|
|
|
375
|
-
### Selectable
|
|
480
|
+
### Single Selectable
|
|
376
481
|
|
|
377
482
|
```html
|
|
378
|
-
<div
|
|
379
|
-
class="pf-c-card pf-m-selectable-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
>
|
|
383
|
-
|
|
384
|
-
|
|
483
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
484
|
+
<div class="pf-c-card pf-m-selectable" id="card-single-selectable-example">
|
|
485
|
+
<div class="pf-c-card__header">
|
|
486
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
487
|
+
<div class="pf-c-card__selectable-actions">
|
|
488
|
+
<div class="pf-c-radio pf-m-standalone">
|
|
489
|
+
<input
|
|
490
|
+
class="pf-c-radio__input"
|
|
491
|
+
type="radio"
|
|
492
|
+
id="card-single-selectable-example-radio"
|
|
493
|
+
name="card-single-selectable-example-radio"
|
|
494
|
+
aria-labelledby="card-single-selectable-example"
|
|
495
|
+
/>
|
|
496
|
+
|
|
497
|
+
<label
|
|
498
|
+
class="pf-c-radio__label"
|
|
499
|
+
id="card-single-selectable-example-radio-label"
|
|
500
|
+
name="card-single-selectable-example-radio"
|
|
501
|
+
for="card-single-selectable-example-radio"
|
|
502
|
+
></label>
|
|
503
|
+
</div>
|
|
504
|
+
</div>
|
|
505
|
+
</div>
|
|
506
|
+
<div class="pf-c-card__header-main">
|
|
507
|
+
<div class="pf-c-card__title" id="card-single-selectable-example-title">
|
|
508
|
+
<h2 class="pf-c-card__title-text">Title</h2>
|
|
509
|
+
</div>
|
|
510
|
+
</div>
|
|
511
|
+
</div>
|
|
512
|
+
<div class="pf-c-card__body">Body</div>
|
|
513
|
+
<div class="pf-c-card__footer">Footer</div>
|
|
514
|
+
</div>
|
|
515
|
+
|
|
516
|
+
<div
|
|
517
|
+
class="pf-c-card pf-m-selectable pf-m-disabled"
|
|
518
|
+
id="card-single-selectable-example-disabled"
|
|
519
|
+
>
|
|
520
|
+
<div class="pf-c-card__header">
|
|
521
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
522
|
+
<div class="pf-c-card__selectable-actions">
|
|
523
|
+
<div class="pf-c-radio pf-m-standalone">
|
|
524
|
+
<input
|
|
525
|
+
class="pf-c-radio__input"
|
|
526
|
+
type="radio"
|
|
527
|
+
id="card-single-selectable-example-disabled-radio"
|
|
528
|
+
name="card-single-selectable-example-disabled-radio"
|
|
529
|
+
aria-labelledby="card-single-selectable-example-disabled"
|
|
530
|
+
disabled
|
|
531
|
+
/>
|
|
532
|
+
|
|
533
|
+
<label
|
|
534
|
+
class="pf-c-radio__label pf-m-disabled"
|
|
535
|
+
id="card-single-selectable-example-disabled-radio-label"
|
|
536
|
+
name="card-single-selectable-example-disabled-radio"
|
|
537
|
+
for="card-single-selectable-example-disabled-radio"
|
|
538
|
+
></label>
|
|
539
|
+
</div>
|
|
540
|
+
</div>
|
|
541
|
+
</div>
|
|
542
|
+
<div class="pf-c-card__header-main">
|
|
543
|
+
<div
|
|
544
|
+
class="pf-c-card__title"
|
|
545
|
+
id="card-single-selectable-example-disabled-title"
|
|
546
|
+
>
|
|
547
|
+
<h2 class="pf-c-card__title-text">Disabled card</h2>
|
|
548
|
+
</div>
|
|
549
|
+
</div>
|
|
550
|
+
</div>
|
|
551
|
+
<div class="pf-c-card__body">Body</div>
|
|
552
|
+
<div class="pf-c-card__footer">Footer</div>
|
|
553
|
+
</div>
|
|
554
|
+
|
|
555
|
+
<div
|
|
556
|
+
class="pf-c-card pf-m-selectable pf-m-selected pf-m-disabled"
|
|
557
|
+
id="card-single-selectable-example-selected-disabled"
|
|
558
|
+
>
|
|
559
|
+
<div class="pf-c-card__header">
|
|
560
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
561
|
+
<div class="pf-c-card__selectable-actions">
|
|
562
|
+
<div class="pf-c-radio pf-m-standalone">
|
|
563
|
+
<input
|
|
564
|
+
class="pf-c-radio__input"
|
|
565
|
+
type="radio"
|
|
566
|
+
id="card-single-selectable-example-selected-disabled-radio"
|
|
567
|
+
name="card-single-selectable-example-selected-disabled-radio"
|
|
568
|
+
aria-labelledby="card-single-selectable-example-selected-disabled"
|
|
569
|
+
disabled
|
|
570
|
+
checked
|
|
571
|
+
/>
|
|
572
|
+
|
|
573
|
+
<label
|
|
574
|
+
class="pf-c-radio__label pf-m-disabled"
|
|
575
|
+
id="card-single-selectable-example-selected-disabled-radio-label"
|
|
576
|
+
name="card-single-selectable-example-selected-disabled-radio"
|
|
577
|
+
for="card-single-selectable-example-selected-disabled-radio"
|
|
578
|
+
></label>
|
|
579
|
+
</div>
|
|
580
|
+
</div>
|
|
581
|
+
</div>
|
|
582
|
+
<div class="pf-c-card__header-main">
|
|
583
|
+
<div
|
|
584
|
+
class="pf-c-card__title"
|
|
585
|
+
id="card-single-selectable-example-selected-disabled-title"
|
|
586
|
+
>
|
|
587
|
+
<h2 class="pf-c-card__title-text">Selected but disabled card</h2>
|
|
588
|
+
</div>
|
|
589
|
+
</div>
|
|
590
|
+
</div>
|
|
591
|
+
<div class="pf-c-card__body">Body</div>
|
|
592
|
+
<div class="pf-c-card__footer">Footer</div>
|
|
385
593
|
</div>
|
|
386
|
-
<div class="pf-c-card__body">Body</div>
|
|
387
|
-
<div class="pf-c-card__footer">Footer</div>
|
|
388
594
|
</div>
|
|
389
595
|
|
|
390
596
|
```
|
|
391
597
|
|
|
392
|
-
###
|
|
598
|
+
### Clickable
|
|
393
599
|
|
|
394
600
|
```html
|
|
395
|
-
<div
|
|
396
|
-
class="pf-c-card pf-m-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
>
|
|
400
|
-
|
|
401
|
-
|
|
601
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
602
|
+
<div class="pf-c-card pf-m-clickable" id="card-clickable-example">
|
|
603
|
+
<div class="pf-c-card__header">
|
|
604
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
605
|
+
<div class="pf-c-card__selectable-actions">
|
|
606
|
+
<div class="pf-c-radio pf-m-standalone">
|
|
607
|
+
<input
|
|
608
|
+
class="pf-c-radio__input pf-screen-reader"
|
|
609
|
+
type="radio"
|
|
610
|
+
id="card-clickable-example-sr-only-radio"
|
|
611
|
+
name="card-clickable-example-sr-only-radio"
|
|
612
|
+
aria-labelledby="card-clickable-example"
|
|
613
|
+
/>
|
|
614
|
+
|
|
615
|
+
<label
|
|
616
|
+
class="pf-c-radio__label"
|
|
617
|
+
id="card-clickable-example-sr-only-radio-label"
|
|
618
|
+
name="card-clickable-example-sr-only-radio"
|
|
619
|
+
for="card-clickable-example-sr-only-radio"
|
|
620
|
+
></label>
|
|
621
|
+
</div>
|
|
622
|
+
</div>
|
|
623
|
+
</div>
|
|
624
|
+
<div class="pf-c-card__header-main">
|
|
625
|
+
<div class="pf-c-card__title" id="card-clickable-example-title">
|
|
626
|
+
<h2 class="pf-c-card__title-text">Title</h2>
|
|
627
|
+
</div>
|
|
628
|
+
</div>
|
|
629
|
+
</div>
|
|
630
|
+
<div class="pf-c-card__body">Body</div>
|
|
631
|
+
<div class="pf-c-card__footer">Footer</div>
|
|
632
|
+
</div>
|
|
633
|
+
|
|
634
|
+
<div
|
|
635
|
+
class="pf-c-card pf-m-clickable pf-m-disabled"
|
|
636
|
+
id="card-clickable-example-disabled"
|
|
637
|
+
>
|
|
638
|
+
<div class="pf-c-card__header">
|
|
639
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
640
|
+
<div class="pf-c-card__selectable-actions">
|
|
641
|
+
<div class="pf-c-radio pf-m-standalone">
|
|
642
|
+
<input
|
|
643
|
+
class="pf-c-radio__input pf-screen-reader"
|
|
644
|
+
type="radio"
|
|
645
|
+
id="card-clickable-example-disabled-sr-only-radio"
|
|
646
|
+
name="card-clickable-example-disabled-sr-only-radio"
|
|
647
|
+
aria-labelledby="card-clickable-example-disabled"
|
|
648
|
+
disabled
|
|
649
|
+
/>
|
|
650
|
+
|
|
651
|
+
<label
|
|
652
|
+
class="pf-c-radio__label pf-m-disabled"
|
|
653
|
+
id="card-clickable-example-disabled-sr-only-radio-label"
|
|
654
|
+
name="card-clickable-example-disabled-sr-only-radio"
|
|
655
|
+
for="card-clickable-example-disabled-sr-only-radio"
|
|
656
|
+
></label>
|
|
657
|
+
</div>
|
|
658
|
+
</div>
|
|
659
|
+
</div>
|
|
660
|
+
<div class="pf-c-card__header-main">
|
|
661
|
+
<div
|
|
662
|
+
class="pf-c-card__title"
|
|
663
|
+
id="card-clickable-example-disabled-title"
|
|
664
|
+
>
|
|
665
|
+
<h2 class="pf-c-card__title-text">Disabled card</h2>
|
|
666
|
+
</div>
|
|
667
|
+
</div>
|
|
668
|
+
</div>
|
|
669
|
+
<div class="pf-c-card__body">Body</div>
|
|
670
|
+
<div class="pf-c-card__footer">Footer</div>
|
|
671
|
+
</div>
|
|
672
|
+
|
|
673
|
+
<div
|
|
674
|
+
class="pf-c-card pf-m-clickable pf-m-selected pf-m-disabled"
|
|
675
|
+
id="card-clickable-example-selected-disabled"
|
|
676
|
+
>
|
|
677
|
+
<div class="pf-c-card__header">
|
|
678
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
679
|
+
<div class="pf-c-card__selectable-actions">
|
|
680
|
+
<div class="pf-c-radio pf-m-standalone">
|
|
681
|
+
<input
|
|
682
|
+
class="pf-c-radio__input pf-screen-reader"
|
|
683
|
+
type="radio"
|
|
684
|
+
id="card-clickable-example-selected-disabled-sr-only-radio"
|
|
685
|
+
name="card-clickable-example-selected-disabled-sr-only-radio"
|
|
686
|
+
aria-labelledby="card-clickable-example-selected-disabled"
|
|
687
|
+
disabled
|
|
688
|
+
/>
|
|
689
|
+
|
|
690
|
+
<label
|
|
691
|
+
class="pf-c-radio__label pf-m-disabled"
|
|
692
|
+
id="card-clickable-example-selected-disabled-sr-only-radio-label"
|
|
693
|
+
name="card-clickable-example-selected-disabled-sr-only-radio"
|
|
694
|
+
for="card-clickable-example-selected-disabled-sr-only-radio"
|
|
695
|
+
></label>
|
|
696
|
+
</div>
|
|
697
|
+
</div>
|
|
698
|
+
</div>
|
|
699
|
+
<div class="pf-c-card__header-main">
|
|
700
|
+
<div
|
|
701
|
+
class="pf-c-card__title"
|
|
702
|
+
id="card-clickable-example-selected-disabled-title"
|
|
703
|
+
>
|
|
704
|
+
<h2 class="pf-c-card__title-text">Selected but disabled card</h2>
|
|
705
|
+
</div>
|
|
706
|
+
</div>
|
|
707
|
+
</div>
|
|
708
|
+
<div class="pf-c-card__body">Body</div>
|
|
709
|
+
<div class="pf-c-card__footer">Footer</div>
|
|
402
710
|
</div>
|
|
403
|
-
<div class="pf-c-card__body">Body</div>
|
|
404
|
-
<div class="pf-c-card__footer">Footer</div>
|
|
405
711
|
</div>
|
|
406
712
|
|
|
407
713
|
```
|
|
408
714
|
|
|
409
|
-
###
|
|
715
|
+
### Clickable and Selectable
|
|
410
716
|
|
|
411
717
|
```html
|
|
412
|
-
<
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
<div
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
718
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
719
|
+
<div
|
|
720
|
+
class="pf-c-card pf-m-clickable pf-m-selectable"
|
|
721
|
+
id="card-clickable-selectable-example"
|
|
722
|
+
>
|
|
723
|
+
<div class="pf-c-card__header">
|
|
724
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
725
|
+
<div class="pf-c-card__selectable-actions">
|
|
726
|
+
<div class="pf-c-check pf-m-standalone">
|
|
727
|
+
<input
|
|
728
|
+
class="pf-c-check__input"
|
|
729
|
+
type="checkbox"
|
|
730
|
+
id="card-clickable-selectable-example-check"
|
|
731
|
+
name="card-clickable-selectable-example-check"
|
|
732
|
+
aria-labelledby="card-clickable-selectable-example"
|
|
733
|
+
/>
|
|
734
|
+
|
|
735
|
+
<label
|
|
736
|
+
class="pf-c-check__label"
|
|
737
|
+
id="card-clickable-selectable-example-check-label"
|
|
738
|
+
name="card-clickable-selectable-example-check"
|
|
739
|
+
for="card-clickable-selectable-example-check"
|
|
740
|
+
></label>
|
|
741
|
+
</div>
|
|
742
|
+
</div>
|
|
743
|
+
</div>
|
|
744
|
+
<div class="pf-c-card__header-main">
|
|
745
|
+
<div
|
|
746
|
+
class="pf-c-card__title"
|
|
747
|
+
id="card-clickable-selectable-example-title"
|
|
748
|
+
>
|
|
749
|
+
<button class="pf-c-button pf-m-link pf-m-inline" type="button">Title</button>
|
|
750
|
+
</div>
|
|
751
|
+
</div>
|
|
752
|
+
</div>
|
|
753
|
+
<div class="pf-c-card__body">Body</div>
|
|
754
|
+
<div class="pf-c-card__footer">Footer</div>
|
|
755
|
+
</div>
|
|
756
|
+
|
|
757
|
+
<div
|
|
758
|
+
class="pf-c-card pf-m-clickable pf-m-selectable pf-m-current"
|
|
759
|
+
id="card-clickable-selectable-current-example"
|
|
760
|
+
>
|
|
761
|
+
<div class="pf-c-card__header">
|
|
762
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
763
|
+
<div class="pf-c-card__selectable-actions">
|
|
764
|
+
<div class="pf-c-check pf-m-standalone">
|
|
765
|
+
<input
|
|
766
|
+
class="pf-c-check__input"
|
|
767
|
+
type="checkbox"
|
|
768
|
+
id="card-clickable-selectable-current-example-check"
|
|
769
|
+
name="card-clickable-selectable-current-example-check"
|
|
770
|
+
aria-labelledby="card-clickable-selectable-current-example"
|
|
771
|
+
/>
|
|
772
|
+
|
|
773
|
+
<label
|
|
774
|
+
class="pf-c-check__label"
|
|
775
|
+
id="card-clickable-selectable-current-example-check-label"
|
|
776
|
+
name="card-clickable-selectable-current-example-check"
|
|
777
|
+
for="card-clickable-selectable-current-example-check"
|
|
778
|
+
></label>
|
|
779
|
+
</div>
|
|
780
|
+
</div>
|
|
781
|
+
</div>
|
|
782
|
+
<div class="pf-c-card__header-main">
|
|
783
|
+
<div
|
|
784
|
+
class="pf-c-card__title"
|
|
785
|
+
id="card-clickable-selectable-current-example-title"
|
|
786
|
+
>
|
|
787
|
+
<button
|
|
788
|
+
class="pf-c-button pf-m-link pf-m-inline"
|
|
789
|
+
type="button"
|
|
790
|
+
>Current card (clicked)</button>
|
|
791
|
+
</div>
|
|
792
|
+
</div>
|
|
793
|
+
</div>
|
|
794
|
+
<div class="pf-c-card__body">Body</div>
|
|
795
|
+
<div class="pf-c-card__footer">Footer</div>
|
|
796
|
+
</div>
|
|
797
|
+
|
|
798
|
+
<div
|
|
799
|
+
class="pf-c-card pf-m-clickable pf-m-selectable pf-m-disabled"
|
|
800
|
+
id="card-clickable-selectable-example-disabled"
|
|
801
|
+
>
|
|
802
|
+
<div class="pf-c-card__header">
|
|
803
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
804
|
+
<div class="pf-c-card__selectable-actions">
|
|
805
|
+
<div class="pf-c-check pf-m-standalone">
|
|
806
|
+
<input
|
|
807
|
+
class="pf-c-check__input"
|
|
808
|
+
type="checkbox"
|
|
809
|
+
disabled
|
|
810
|
+
id="card-clickable-selectable-example-disabled-check"
|
|
811
|
+
name="card-clickable-selectable-example-disabled-check"
|
|
812
|
+
aria-labelledby="card-clickable-selectable-example-disabled"
|
|
813
|
+
/>
|
|
814
|
+
|
|
815
|
+
<label
|
|
816
|
+
class="pf-c-check__label pf-m-disabled"
|
|
817
|
+
id="card-clickable-selectable-example-disabled-check-label"
|
|
818
|
+
name="card-clickable-selectable-example-disabled-check"
|
|
819
|
+
for="card-clickable-selectable-example-disabled-check"
|
|
820
|
+
></label>
|
|
821
|
+
</div>
|
|
822
|
+
</div>
|
|
823
|
+
</div>
|
|
824
|
+
<div class="pf-c-card__header-main">
|
|
825
|
+
<div
|
|
826
|
+
class="pf-c-card__title"
|
|
827
|
+
id="card-clickable-selectable-example-disabled-title"
|
|
828
|
+
>
|
|
829
|
+
<button
|
|
830
|
+
class="pf-c-button pf-m-link pf-m-inline pf-m-disabled"
|
|
831
|
+
type="button"
|
|
832
|
+
disabled
|
|
833
|
+
>Disabled card</button>
|
|
834
|
+
</div>
|
|
835
|
+
</div>
|
|
836
|
+
</div>
|
|
837
|
+
<div class="pf-c-card__body">Body</div>
|
|
838
|
+
<div class="pf-c-card__footer">Footer</div>
|
|
839
|
+
</div>
|
|
840
|
+
|
|
841
|
+
<div
|
|
842
|
+
class="pf-c-card pf-m-clickable pf-m-selectable pf-m-selected pf-m-disabled"
|
|
843
|
+
id="card-clickable-selectable-example-selected-disabled"
|
|
844
|
+
>
|
|
845
|
+
<div class="pf-c-card__header">
|
|
846
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
847
|
+
<div class="pf-c-card__selectable-actions">
|
|
848
|
+
<div class="pf-c-check pf-m-standalone">
|
|
849
|
+
<input
|
|
850
|
+
class="pf-c-check__input"
|
|
851
|
+
type="checkbox"
|
|
852
|
+
checked
|
|
853
|
+
disabled
|
|
854
|
+
id="card-clickable-selectable-example-selected-disabled-check"
|
|
855
|
+
name="card-clickable-selectable-example-selected-disabled-check"
|
|
856
|
+
aria-labelledby="card-clickable-selectable-example-selected-disabled"
|
|
857
|
+
/>
|
|
858
|
+
|
|
859
|
+
<label
|
|
860
|
+
class="pf-c-check__label pf-m-disabled"
|
|
861
|
+
id="card-clickable-selectable-example-selected-disabled-check-label"
|
|
862
|
+
name="card-clickable-selectable-example-selected-disabled-check"
|
|
863
|
+
for="card-clickable-selectable-example-selected-disabled-check"
|
|
864
|
+
></label>
|
|
865
|
+
</div>
|
|
866
|
+
</div>
|
|
867
|
+
</div>
|
|
868
|
+
<div class="pf-c-card__header-main">
|
|
869
|
+
<div
|
|
870
|
+
class="pf-c-card__title"
|
|
871
|
+
id="card-clickable-selectable-example-selected-disabled-title"
|
|
872
|
+
>
|
|
873
|
+
<button
|
|
874
|
+
class="pf-c-button pf-m-link pf-m-inline pf-m-disabled"
|
|
875
|
+
type="button"
|
|
876
|
+
disabled
|
|
877
|
+
>Selected but disabled card</button>
|
|
878
|
+
</div>
|
|
879
|
+
</div>
|
|
880
|
+
</div>
|
|
881
|
+
<div class="pf-c-card__body">Body</div>
|
|
882
|
+
<div class="pf-c-card__footer">Footer</div>
|
|
883
|
+
</div>
|
|
884
|
+
</div>
|
|
885
|
+
|
|
886
|
+
```
|
|
887
|
+
|
|
888
|
+
### Hoverable raised (deprecated)
|
|
889
|
+
|
|
890
|
+
```html
|
|
891
|
+
<div class="pf-c-card pf-m-hoverable-raised" id="card-hoverable-example">
|
|
423
892
|
<div class="pf-c-card__title">
|
|
424
893
|
<h2 class="pf-c-card__title-text">Title</h2>
|
|
425
894
|
</div>
|
|
@@ -429,12 +898,13 @@ cssPrefix: pf-c-card
|
|
|
429
898
|
|
|
430
899
|
```
|
|
431
900
|
|
|
432
|
-
###
|
|
901
|
+
### Selectable raised (deprecated)
|
|
433
902
|
|
|
434
903
|
```html
|
|
435
904
|
<div
|
|
436
|
-
class="pf-c-card pf-m-
|
|
437
|
-
|
|
905
|
+
class="pf-c-card pf-m-selectable-raised"
|
|
906
|
+
tabindex="0"
|
|
907
|
+
id="card-selectable-raised-example"
|
|
438
908
|
>
|
|
439
909
|
<div class="pf-c-card__title">
|
|
440
910
|
<h2 class="pf-c-card__title-text">Title</h2>
|
|
@@ -445,10 +915,14 @@ cssPrefix: pf-c-card
|
|
|
445
915
|
|
|
446
916
|
```
|
|
447
917
|
|
|
448
|
-
###
|
|
918
|
+
### Selected raised (deprecated)
|
|
449
919
|
|
|
450
920
|
```html
|
|
451
|
-
<div
|
|
921
|
+
<div
|
|
922
|
+
class="pf-c-card pf-m-selectable-raised pf-m-selected-raised"
|
|
923
|
+
tabindex="0"
|
|
924
|
+
id="card-selected-raised-example"
|
|
925
|
+
>
|
|
452
926
|
<div class="pf-c-card__title">
|
|
453
927
|
<h2 class="pf-c-card__title-text">Title</h2>
|
|
454
928
|
</div>
|
|
@@ -458,13 +932,19 @@ cssPrefix: pf-c-card
|
|
|
458
932
|
|
|
459
933
|
```
|
|
460
934
|
|
|
461
|
-
### Selectable (
|
|
935
|
+
### Selectable raised with a hidden input for improved screen reader accessibility (deprecated)
|
|
462
936
|
|
|
463
937
|
```html
|
|
938
|
+
<input
|
|
939
|
+
class="pf-c-card__sr-input pf-screen-reader"
|
|
940
|
+
type="checkbox"
|
|
941
|
+
tabindex="-1"
|
|
942
|
+
aria-label="Checkbox to improve screen reader accessibility of a selectable card"
|
|
943
|
+
/>
|
|
464
944
|
<div
|
|
465
|
-
class="pf-c-card pf-m-selectable"
|
|
945
|
+
class="pf-c-card pf-m-selectable-raised"
|
|
466
946
|
tabindex="0"
|
|
467
|
-
id="card-selectable-
|
|
947
|
+
id="card-selectable-raised-with-input-example"
|
|
468
948
|
>
|
|
469
949
|
<div class="pf-c-card__title">
|
|
470
950
|
<h2 class="pf-c-card__title-text">Title</h2>
|
|
@@ -475,13 +955,12 @@ cssPrefix: pf-c-card
|
|
|
475
955
|
|
|
476
956
|
```
|
|
477
957
|
|
|
478
|
-
###
|
|
958
|
+
### Non selectable raised (deprecated)
|
|
479
959
|
|
|
480
960
|
```html
|
|
481
961
|
<div
|
|
482
|
-
class="pf-c-card pf-m-selectable
|
|
483
|
-
|
|
484
|
-
id="card-selected-legacy-example"
|
|
962
|
+
class="pf-c-card pf-m-non-selectable-raised"
|
|
963
|
+
id="card-non-selectable-raised-example"
|
|
485
964
|
>
|
|
486
965
|
<div class="pf-c-card__title">
|
|
487
966
|
<h2 class="pf-c-card__title-text">Title</h2>
|
|
@@ -598,7 +1077,7 @@ cssPrefix: pf-c-card
|
|
|
598
1077
|
type="checkbox"
|
|
599
1078
|
id="card-expandable-example-check"
|
|
600
1079
|
name="card-expandable-example-check"
|
|
601
|
-
aria-
|
|
1080
|
+
aria-labelledby="card-expandable-example"
|
|
602
1081
|
/>
|
|
603
1082
|
</div>
|
|
604
1083
|
</div>
|
|
@@ -689,7 +1168,7 @@ cssPrefix: pf-c-card
|
|
|
689
1168
|
type="checkbox"
|
|
690
1169
|
id="card-expandable-image-example-check"
|
|
691
1170
|
name="card-expandable-image-example-check"
|
|
692
|
-
aria-
|
|
1171
|
+
aria-labelledby="card-expandable-image-example"
|
|
693
1172
|
/>
|
|
694
1173
|
</div>
|
|
695
1174
|
</div>
|
|
@@ -765,7 +1244,7 @@ cssPrefix: pf-c-card
|
|
|
765
1244
|
type="checkbox"
|
|
766
1245
|
id="card-expanded-example-check"
|
|
767
1246
|
name="card-expanded-example-check"
|
|
768
|
-
aria-
|
|
1247
|
+
aria-labelledby="card-expanded-example"
|
|
769
1248
|
/>
|
|
770
1249
|
</div>
|
|
771
1250
|
</div>
|
|
@@ -835,7 +1314,7 @@ cssPrefix: pf-c-card
|
|
|
835
1314
|
type="checkbox"
|
|
836
1315
|
id="card-full-height-example-check"
|
|
837
1316
|
name="card-full-height-example-check"
|
|
838
|
-
aria-
|
|
1317
|
+
aria-labelledby="card-full-height-example"
|
|
839
1318
|
/>
|
|
840
1319
|
</div>
|
|
841
1320
|
</div>
|
|
@@ -908,7 +1387,7 @@ cssPrefix: pf-c-card
|
|
|
908
1387
|
type="checkbox"
|
|
909
1388
|
id="card-toggle-on-right-example-check"
|
|
910
1389
|
name="card-toggle-on-right-example-check"
|
|
911
|
-
aria-
|
|
1390
|
+
aria-labelledby="card-toggle-on-right-example"
|
|
912
1391
|
/>
|
|
913
1392
|
</div>
|
|
914
1393
|
</div>
|
|
@@ -974,12 +1453,18 @@ A card is a generic rectangular container that can be used to build other compon
|
|
|
974
1453
|
| `.pf-c-card__header-toggle` | `<div>` | Creates the expandable card toggle. |
|
|
975
1454
|
| `.pf-c-card__header-toggle-icon` | `<span>` | Creates the expandable card toggle icon. |
|
|
976
1455
|
| `.pf-c-card__actions` | `<div>` | Creates an actions element to be used in the card header. |
|
|
1456
|
+
| `.pf-c-card__selectable-actions` | `<div>` | Creates an element to hold a checkbox or radio and the related label used to make a card selectable or clickable. |
|
|
977
1457
|
| `.pf-c-card__header-main` | `<div>` | Creates a wrapper element to be used in the card header when using an image, logo, or text. **Required if `.pf-c-card__header` has content outside of a card header toggle or card header actions** |
|
|
978
1458
|
| `.pf-c-card__expandable-content` | `<div>` | Creates the expandable card's expandable content. |
|
|
979
1459
|
| `.pf-c-card__sr-input` | `<input>` | Creates an input which, when focused, makes a following `.pf-c-card` appear focused. |
|
|
980
1460
|
| `.pf-m-compact` | `.pf-c-card` | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred. |
|
|
981
1461
|
| `.pf-m-display-lg` | `.pf-c-card` | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases. |
|
|
982
|
-
| `.pf-m-no-fill` | `.pf-c-card__body` | Sets a `.pf-c-card__body` to
|
|
1462
|
+
| `.pf-m-no-fill` | `.pf-c-card__body` | Sets a `.pf-c-card__body` not to fill the available space in `.pf-c-card`. `.pf-m-no-fill` can be added to multiple card bodies. |
|
|
1463
|
+
| `.pf-m-selectable` | `.pf-c-card` | Modifies a card to be selectable. |
|
|
1464
|
+
| `.pf-m-clickable` | `.pf-c-card` | Modifies a card to be clickable. |
|
|
1465
|
+
| `.pf-m-selected` | `.pf-c-card` | Modifies a selectable card for selected state styling. Can be used in addition to indicating selection via the `.pf-c-card__input`. |
|
|
1466
|
+
| `.pf-m-current` | `.pf-c-card` | Modifies a card that is both clickable and selectable for clicked state styling. |
|
|
1467
|
+
| `.pf-m-disabled` | `.pf-c-card` | Modifies a card so it is not selectable or clickable. |
|
|
983
1468
|
| `.pf-m-hoverable-raised` | `.pf-c-card` | Modifies the card to include hover styles on `:hover`. |
|
|
984
1469
|
| `.pf-m-selectable-raised` | `.pf-c-card` | Modifies a selectable card so that it is selectable. |
|
|
985
1470
|
| `.pf-m-selected-raised` | `.pf-c-card.pf-m-selectable-raised` | Modifies a selectable card for the selected state. |
|