@patternfly/patternfly 6.0.0-alpha.60 → 6.0.0-alpha.62
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 +97 -194
- package/components/Card/card.scss +114 -238
- package/docs/components/Card/examples/Card.md +422 -111
- package/package.json +2 -2
- package/patternfly-no-globals.css +97 -198
- package/patternfly-theme-dark-unversioned.css +97 -198
- package/patternfly.css +97 -198
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/components/Card/themes/dark/card.scss +0 -20
|
@@ -618,6 +618,124 @@ cssPrefix: pf-v5-c-card
|
|
|
618
618
|
|
|
619
619
|
```
|
|
620
620
|
|
|
621
|
+
### Selectable Secondary style
|
|
622
|
+
|
|
623
|
+
```html
|
|
624
|
+
<div class="pf-v5-l-gallery pf-m-gutter">
|
|
625
|
+
<div
|
|
626
|
+
class="pf-v5-c-card pf-m-selectable pf-m-secondary"
|
|
627
|
+
id="card-selectable-secondary-example"
|
|
628
|
+
>
|
|
629
|
+
<div class="pf-v5-c-card__header">
|
|
630
|
+
<div class="pf-v5-c-card__actions pf-m-no-offset">
|
|
631
|
+
<div class="pf-v5-c-card__selectable-actions">
|
|
632
|
+
<div class="pf-v5-c-check">
|
|
633
|
+
<input
|
|
634
|
+
class="pf-v5-c-check__input"
|
|
635
|
+
type="checkbox"
|
|
636
|
+
id="card-selectable-secondary-example-check"
|
|
637
|
+
name="card-selectable-secondary-example-check"
|
|
638
|
+
aria-labelledby="card-selectable-secondary-example"
|
|
639
|
+
/>
|
|
640
|
+
<label
|
|
641
|
+
class="pf-v5-c-check__label"
|
|
642
|
+
for="card-selectable-secondary-example-check"
|
|
643
|
+
id="card-selectable-secondary-example-check-label"
|
|
644
|
+
name="card-selectable-secondary-example-check"
|
|
645
|
+
></label>
|
|
646
|
+
</div>
|
|
647
|
+
</div>
|
|
648
|
+
</div>
|
|
649
|
+
<div class="pf-v5-c-card__header-main">
|
|
650
|
+
<div class="pf-v5-c-card__title">
|
|
651
|
+
<h2 class="pf-v5-c-card__title-text">Title</h2>
|
|
652
|
+
</div>
|
|
653
|
+
</div>
|
|
654
|
+
</div>
|
|
655
|
+
<div class="pf-v5-c-card__body">Body</div>
|
|
656
|
+
<div class="pf-v5-c-card__footer">Footer</div>
|
|
657
|
+
</div>
|
|
658
|
+
|
|
659
|
+
<div
|
|
660
|
+
class="pf-v5-c-card pf-m-selectable pf-m-disabled pf-m-secondary"
|
|
661
|
+
id="card-selectable-secondary-example-disabled"
|
|
662
|
+
>
|
|
663
|
+
<div class="pf-v5-c-card__header">
|
|
664
|
+
<div class="pf-v5-c-card__actions pf-m-no-offset">
|
|
665
|
+
<div class="pf-v5-c-card__selectable-actions">
|
|
666
|
+
<div class="pf-v5-c-check">
|
|
667
|
+
<input
|
|
668
|
+
class="pf-v5-c-check__input"
|
|
669
|
+
type="checkbox"
|
|
670
|
+
disabled
|
|
671
|
+
id="card-selectable-secondary-example-disabled-check"
|
|
672
|
+
name="card-selectable-secondary-example-disabled-check"
|
|
673
|
+
aria-labelledby="card-selectable-secondary-example-disabled"
|
|
674
|
+
/>
|
|
675
|
+
<label
|
|
676
|
+
class="pf-v5-c-check__label pf-m-disabled"
|
|
677
|
+
for="card-selectable-secondary-example-disabled-check"
|
|
678
|
+
id="card-selectable-secondary-example-disabled-check-label"
|
|
679
|
+
name="card-selectable-secondary-example-disabled-check"
|
|
680
|
+
></label>
|
|
681
|
+
</div>
|
|
682
|
+
</div>
|
|
683
|
+
</div>
|
|
684
|
+
<div class="pf-v5-c-card__header-main">
|
|
685
|
+
<div
|
|
686
|
+
class="pf-v5-c-card__title"
|
|
687
|
+
id="card-selectable-secondary-example-disabled-title"
|
|
688
|
+
>
|
|
689
|
+
<h2 class="pf-v5-c-card__title-text">Disabled card</h2>
|
|
690
|
+
</div>
|
|
691
|
+
</div>
|
|
692
|
+
</div>
|
|
693
|
+
<div class="pf-v5-c-card__body">Body</div>
|
|
694
|
+
<div class="pf-v5-c-card__footer">Footer</div>
|
|
695
|
+
</div>
|
|
696
|
+
|
|
697
|
+
<div
|
|
698
|
+
class="pf-v5-c-card pf-m-selectable pf-m-selected pf-m-disabled pf-m-secondary"
|
|
699
|
+
id="card-selectable-secondary-example-selected-disabled"
|
|
700
|
+
>
|
|
701
|
+
<div class="pf-v5-c-card__header">
|
|
702
|
+
<div class="pf-v5-c-card__actions pf-m-no-offset">
|
|
703
|
+
<div class="pf-v5-c-card__selectable-actions">
|
|
704
|
+
<div class="pf-v5-c-check">
|
|
705
|
+
<input
|
|
706
|
+
class="pf-v5-c-check__input"
|
|
707
|
+
type="checkbox"
|
|
708
|
+
checked
|
|
709
|
+
disabled
|
|
710
|
+
id="card-selectable-secondary-example-selected-disabled-check"
|
|
711
|
+
name="card-selectable-secondary-example-selected-disabled-check"
|
|
712
|
+
aria-labelledby="card-selectable-secondary-example-selected-disabled"
|
|
713
|
+
/>
|
|
714
|
+
<label
|
|
715
|
+
class="pf-v5-c-check__label pf-m-disabled"
|
|
716
|
+
for="card-selectable-secondary-example-selected-disabled-check"
|
|
717
|
+
id="card-selectable-secondary-example-selected-disabled-check-label"
|
|
718
|
+
name="card-selectable-secondary-example-selected-disabled-check"
|
|
719
|
+
></label>
|
|
720
|
+
</div>
|
|
721
|
+
</div>
|
|
722
|
+
</div>
|
|
723
|
+
<div class="pf-v5-c-card__header-main">
|
|
724
|
+
<div
|
|
725
|
+
class="pf-v5-c-card__title"
|
|
726
|
+
id="card-selectable-secondary-example-selected-disabled-title"
|
|
727
|
+
>
|
|
728
|
+
<h2 class="pf-v5-c-card__title-text">Selected but disabled card</h2>
|
|
729
|
+
</div>
|
|
730
|
+
</div>
|
|
731
|
+
</div>
|
|
732
|
+
<div class="pf-v5-c-card__body">Body</div>
|
|
733
|
+
<div class="pf-v5-c-card__footer">Footer</div>
|
|
734
|
+
</div>
|
|
735
|
+
</div>
|
|
736
|
+
|
|
737
|
+
```
|
|
738
|
+
|
|
621
739
|
### Single selectable
|
|
622
740
|
|
|
623
741
|
```html
|
|
@@ -853,6 +971,129 @@ cssPrefix: pf-v5-c-card
|
|
|
853
971
|
|
|
854
972
|
```
|
|
855
973
|
|
|
974
|
+
### Clickable secondary style
|
|
975
|
+
|
|
976
|
+
```html
|
|
977
|
+
<div class="pf-v5-l-gallery pf-m-gutter">
|
|
978
|
+
<div
|
|
979
|
+
class="pf-v5-c-card pf-m-clickable pf-m-secondary"
|
|
980
|
+
id="card-clickable-secondary-example"
|
|
981
|
+
>
|
|
982
|
+
<div class="pf-v5-c-card__header">
|
|
983
|
+
<div class="pf-v5-c-card__actions pf-m-no-offset">
|
|
984
|
+
<div class="pf-v5-c-card__selectable-actions">
|
|
985
|
+
<div class="pf-v5-c-radio pf-m-standalone">
|
|
986
|
+
<input
|
|
987
|
+
class="pf-v5-c-radio__input pf-v5-screen-reader"
|
|
988
|
+
type="radio"
|
|
989
|
+
id="card-clickable-secondary-example-sr-only-radio"
|
|
990
|
+
name="card-clickable-secondary-example-sr-only-radio"
|
|
991
|
+
aria-labelledby="card-clickable-secondary-example"
|
|
992
|
+
/>
|
|
993
|
+
|
|
994
|
+
<label
|
|
995
|
+
class="pf-v5-c-radio__label"
|
|
996
|
+
for="card-clickable-secondary-example-sr-only-radio"
|
|
997
|
+
id="card-clickable-secondary-example-sr-only-radio-label"
|
|
998
|
+
name="card-clickable-secondary-example-sr-only-radio"
|
|
999
|
+
></label>
|
|
1000
|
+
</div>
|
|
1001
|
+
</div>
|
|
1002
|
+
</div>
|
|
1003
|
+
<div class="pf-v5-c-card__header-main">
|
|
1004
|
+
<div
|
|
1005
|
+
class="pf-v5-c-card__title"
|
|
1006
|
+
id="card-clickable-secondary-example-title"
|
|
1007
|
+
>
|
|
1008
|
+
<h2 class="pf-v5-c-card__title-text">Title</h2>
|
|
1009
|
+
</div>
|
|
1010
|
+
</div>
|
|
1011
|
+
</div>
|
|
1012
|
+
<div class="pf-v5-c-card__body">Body</div>
|
|
1013
|
+
<div class="pf-v5-c-card__footer">Footer</div>
|
|
1014
|
+
</div>
|
|
1015
|
+
|
|
1016
|
+
<div
|
|
1017
|
+
class="pf-v5-c-card pf-m-clickable pf-m-disabled pf-m-secondary"
|
|
1018
|
+
id="card-clickable-secondary-example-disabled"
|
|
1019
|
+
>
|
|
1020
|
+
<div class="pf-v5-c-card__header">
|
|
1021
|
+
<div class="pf-v5-c-card__actions pf-m-no-offset">
|
|
1022
|
+
<div class="pf-v5-c-card__selectable-actions">
|
|
1023
|
+
<div class="pf-v5-c-radio pf-m-standalone">
|
|
1024
|
+
<input
|
|
1025
|
+
class="pf-v5-c-radio__input pf-v5-screen-reader"
|
|
1026
|
+
type="radio"
|
|
1027
|
+
id="card-clickable-secondary-example-disabled-sr-only-radio"
|
|
1028
|
+
name="card-clickable-secondary-example-disabled-sr-only-radio"
|
|
1029
|
+
aria-labelledby="card-clickable-secondary-example-disabled"
|
|
1030
|
+
disabled
|
|
1031
|
+
/>
|
|
1032
|
+
|
|
1033
|
+
<label
|
|
1034
|
+
class="pf-v5-c-radio__label pf-m-disabled"
|
|
1035
|
+
for="card-clickable-secondary-example-disabled-sr-only-radio"
|
|
1036
|
+
id="card-clickable-secondary-example-disabled-sr-only-radio-label"
|
|
1037
|
+
name="card-clickable-secondary-example-disabled-sr-only-radio"
|
|
1038
|
+
></label>
|
|
1039
|
+
</div>
|
|
1040
|
+
</div>
|
|
1041
|
+
</div>
|
|
1042
|
+
<div class="pf-v5-c-card__header-main">
|
|
1043
|
+
<div
|
|
1044
|
+
class="pf-v5-c-card__title"
|
|
1045
|
+
id="card-clickable-secondary-example-disabled-title"
|
|
1046
|
+
>
|
|
1047
|
+
<h2 class="pf-v5-c-card__title-text">Disabled card</h2>
|
|
1048
|
+
</div>
|
|
1049
|
+
</div>
|
|
1050
|
+
</div>
|
|
1051
|
+
<div class="pf-v5-c-card__body">Body</div>
|
|
1052
|
+
<div class="pf-v5-c-card__footer">Footer</div>
|
|
1053
|
+
</div>
|
|
1054
|
+
|
|
1055
|
+
<div
|
|
1056
|
+
class="pf-v5-c-card pf-m-clickable pf-m-selected pf-m-disabled pf-m-secondary"
|
|
1057
|
+
id="card-clickable-secondary-example-selected-disabled"
|
|
1058
|
+
>
|
|
1059
|
+
<div class="pf-v5-c-card__header">
|
|
1060
|
+
<div class="pf-v5-c-card__actions pf-m-no-offset">
|
|
1061
|
+
<div class="pf-v5-c-card__selectable-actions">
|
|
1062
|
+
<div class="pf-v5-c-radio pf-m-standalone">
|
|
1063
|
+
<input
|
|
1064
|
+
class="pf-v5-c-radio__input pf-v5-screen-reader"
|
|
1065
|
+
type="radio"
|
|
1066
|
+
id="card-clickable-secondary-example-selected-disabled-sr-only-radio"
|
|
1067
|
+
name="card-clickable-secondary-example-selected-disabled-sr-only-radio"
|
|
1068
|
+
aria-labelledby="card-clickable-secondary-example-selected-disabled"
|
|
1069
|
+
disabled
|
|
1070
|
+
/>
|
|
1071
|
+
|
|
1072
|
+
<label
|
|
1073
|
+
class="pf-v5-c-radio__label pf-m-disabled"
|
|
1074
|
+
for="card-clickable-secondary-example-selected-disabled-sr-only-radio"
|
|
1075
|
+
id="card-clickable-secondary-example-selected-disabled-sr-only-radio-label"
|
|
1076
|
+
name="card-clickable-secondary-example-selected-disabled-sr-only-radio"
|
|
1077
|
+
></label>
|
|
1078
|
+
</div>
|
|
1079
|
+
</div>
|
|
1080
|
+
</div>
|
|
1081
|
+
<div class="pf-v5-c-card__header-main">
|
|
1082
|
+
<div
|
|
1083
|
+
class="pf-v5-c-card__title"
|
|
1084
|
+
id="card-clickable-secondary-example-selected-disabled-title"
|
|
1085
|
+
>
|
|
1086
|
+
<h2 class="pf-v5-c-card__title-text">Selected but disabled card</h2>
|
|
1087
|
+
</div>
|
|
1088
|
+
</div>
|
|
1089
|
+
</div>
|
|
1090
|
+
<div class="pf-v5-c-card__body">Body</div>
|
|
1091
|
+
<div class="pf-v5-c-card__footer">Footer</div>
|
|
1092
|
+
</div>
|
|
1093
|
+
</div>
|
|
1094
|
+
|
|
1095
|
+
```
|
|
1096
|
+
|
|
856
1097
|
### Clickable and selectable
|
|
857
1098
|
|
|
858
1099
|
```html
|
|
@@ -886,10 +1127,9 @@ cssPrefix: pf-v5-c-card
|
|
|
886
1127
|
class="pf-v5-c-card__title"
|
|
887
1128
|
id="card-clickable-selectable-example-title"
|
|
888
1129
|
>
|
|
889
|
-
<
|
|
890
|
-
class="pf-v5-c-button pf-m-link pf-m-inline"
|
|
891
|
-
|
|
892
|
-
>Title</button>
|
|
1130
|
+
<h2 class="pf-v5-c-card__title-text">
|
|
1131
|
+
<button class="pf-v5-c-button pf-m-link pf-m-inline">Title</button>
|
|
1132
|
+
</h2>
|
|
893
1133
|
</div>
|
|
894
1134
|
</div>
|
|
895
1135
|
</div>
|
|
@@ -926,10 +1166,11 @@ cssPrefix: pf-v5-c-card
|
|
|
926
1166
|
class="pf-v5-c-card__title"
|
|
927
1167
|
id="card-clickable-selectable-current-example-title"
|
|
928
1168
|
>
|
|
929
|
-
<
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
1169
|
+
<h2 class="pf-v5-c-card__title-text">
|
|
1170
|
+
<button
|
|
1171
|
+
class="pf-v5-c-button pf-m-link pf-m-inline"
|
|
1172
|
+
>Current card (clicked)</button>
|
|
1173
|
+
</h2>
|
|
933
1174
|
</div>
|
|
934
1175
|
</div>
|
|
935
1176
|
</div>
|
|
@@ -967,11 +1208,11 @@ cssPrefix: pf-v5-c-card
|
|
|
967
1208
|
class="pf-v5-c-card__title"
|
|
968
1209
|
id="card-clickable-selectable-example-disabled-title"
|
|
969
1210
|
>
|
|
970
|
-
<
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
1211
|
+
<h2 class="pf-v5-c-card__title-text">
|
|
1212
|
+
<button
|
|
1213
|
+
class="pf-v5-c-button pf-m-link pf-m-inline pf-m-disabled"
|
|
1214
|
+
>Disabled card</button>
|
|
1215
|
+
</h2>
|
|
975
1216
|
</div>
|
|
976
1217
|
</div>
|
|
977
1218
|
</div>
|
|
@@ -1010,11 +1251,11 @@ cssPrefix: pf-v5-c-card
|
|
|
1010
1251
|
class="pf-v5-c-card__title"
|
|
1011
1252
|
id="card-clickable-selectable-example-selected-disabled-title"
|
|
1012
1253
|
>
|
|
1013
|
-
<
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
disabled
|
|
1017
|
-
|
|
1254
|
+
<h2 class="pf-v5-c-card__title-text">
|
|
1255
|
+
<button
|
|
1256
|
+
class="pf-v5-c-button pf-m-link pf-m-inline pf-m-disabled"
|
|
1257
|
+
>Selected but disabled card</button>
|
|
1258
|
+
</h2>
|
|
1018
1259
|
</div>
|
|
1019
1260
|
</div>
|
|
1020
1261
|
</div>
|
|
@@ -1025,109 +1266,182 @@ cssPrefix: pf-v5-c-card
|
|
|
1025
1266
|
|
|
1026
1267
|
```
|
|
1027
1268
|
|
|
1028
|
-
###
|
|
1269
|
+
### Clickable and selectable secondary style
|
|
1029
1270
|
|
|
1030
|
-
```html
|
|
1031
|
-
<div class="pf-v5-
|
|
1032
|
-
<div
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
</div>
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
<
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
>
|
|
1066
|
-
|
|
1067
|
-
<
|
|
1271
|
+
```html
|
|
1272
|
+
<div class="pf-v5-l-gallery pf-m-gutter">
|
|
1273
|
+
<div
|
|
1274
|
+
class="pf-v5-c-card pf-m-clickable pf-m-selectable pf-m-secondary"
|
|
1275
|
+
id="card-clickable-selectable-secondary-example"
|
|
1276
|
+
>
|
|
1277
|
+
<div class="pf-v5-c-card__header">
|
|
1278
|
+
<div class="pf-v5-c-card__actions pf-m-no-offset">
|
|
1279
|
+
<div class="pf-v5-c-card__selectable-actions">
|
|
1280
|
+
<div class="pf-v5-c-check">
|
|
1281
|
+
<input
|
|
1282
|
+
class="pf-v5-c-check__input"
|
|
1283
|
+
type="checkbox"
|
|
1284
|
+
id="card-clickable-selectable-secondary-example-check"
|
|
1285
|
+
name="card-clickable-selectable-secondary-example-check"
|
|
1286
|
+
aria-labelledby="card-clickable-selectable-secondary-example"
|
|
1287
|
+
/>
|
|
1288
|
+
<label
|
|
1289
|
+
class="pf-v5-c-check__label"
|
|
1290
|
+
for="card-clickable-selectable-secondary-example-check"
|
|
1291
|
+
id="card-clickable-selectable-secondary-example-check-label"
|
|
1292
|
+
name="card-clickable-selectable-secondary-example-check"
|
|
1293
|
+
></label>
|
|
1294
|
+
</div>
|
|
1295
|
+
</div>
|
|
1296
|
+
</div>
|
|
1297
|
+
<div class="pf-v5-c-card__header-main">
|
|
1298
|
+
<div
|
|
1299
|
+
class="pf-v5-c-card__title"
|
|
1300
|
+
id="card-clickable-selectable-secondary-example-title"
|
|
1301
|
+
>
|
|
1302
|
+
<h2 class="pf-v5-c-card__title-text">
|
|
1303
|
+
<button class="pf-v5-c-button pf-m-link pf-m-inline">Title</button>
|
|
1304
|
+
</h2>
|
|
1305
|
+
</div>
|
|
1306
|
+
</div>
|
|
1307
|
+
</div>
|
|
1308
|
+
<div class="pf-v5-c-card__body">Body</div>
|
|
1309
|
+
<div class="pf-v5-c-card__footer">Footer</div>
|
|
1068
1310
|
</div>
|
|
1069
|
-
<div class="pf-v5-c-card__body">Body</div>
|
|
1070
|
-
<div class="pf-v5-c-card__footer">Footer</div>
|
|
1071
|
-
</div>
|
|
1072
1311
|
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
<
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1312
|
+
<div
|
|
1313
|
+
class="pf-v5-c-card pf-m-clickable pf-m-selectable pf-m-current pf-m-secondary"
|
|
1314
|
+
id="card-clickable-selectable-secondary-current-example"
|
|
1315
|
+
>
|
|
1316
|
+
<div class="pf-v5-c-card__header">
|
|
1317
|
+
<div class="pf-v5-c-card__actions pf-m-no-offset">
|
|
1318
|
+
<div class="pf-v5-c-card__selectable-actions">
|
|
1319
|
+
<div class="pf-v5-c-check">
|
|
1320
|
+
<input
|
|
1321
|
+
class="pf-v5-c-check__input"
|
|
1322
|
+
type="checkbox"
|
|
1323
|
+
id="card-clickable-selectable-secondary-current-example-check"
|
|
1324
|
+
name="card-clickable-selectable-secondary-current-example-check"
|
|
1325
|
+
aria-labelledby="card-clickable-selectable-secondary-current-example"
|
|
1326
|
+
/>
|
|
1327
|
+
<label
|
|
1328
|
+
class="pf-v5-c-check__label"
|
|
1329
|
+
for="card-clickable-selectable-secondary-current-example-check"
|
|
1330
|
+
id="card-clickable-selectable-secondary-current-example-check-label"
|
|
1331
|
+
name="card-clickable-selectable-secondary-current-example-check"
|
|
1332
|
+
></label>
|
|
1333
|
+
</div>
|
|
1334
|
+
</div>
|
|
1335
|
+
</div>
|
|
1336
|
+
<div class="pf-v5-c-card__header-main">
|
|
1337
|
+
<div
|
|
1338
|
+
class="pf-v5-c-card__title"
|
|
1339
|
+
id="card-clickable-selectable-secondary-current-example-title"
|
|
1340
|
+
>
|
|
1341
|
+
<h2 class="pf-v5-c-card__title-text">
|
|
1342
|
+
<button
|
|
1343
|
+
class="pf-v5-c-button pf-m-link pf-m-inline"
|
|
1344
|
+
>Current card (clicked)</button>
|
|
1345
|
+
</h2>
|
|
1346
|
+
</div>
|
|
1347
|
+
</div>
|
|
1348
|
+
</div>
|
|
1349
|
+
<div class="pf-v5-c-card__body">Body</div>
|
|
1350
|
+
<div class="pf-v5-c-card__footer">Footer</div>
|
|
1091
1351
|
</div>
|
|
1092
|
-
<div class="pf-v5-c-card__body">Body</div>
|
|
1093
|
-
<div class="pf-v5-c-card__footer">Footer</div>
|
|
1094
|
-
</div>
|
|
1095
|
-
|
|
1096
|
-
```
|
|
1097
1352
|
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
>
|
|
1105
|
-
|
|
1106
|
-
|
|
1353
|
+
<div
|
|
1354
|
+
class="pf-v5-c-card pf-m-clickable pf-m-selectable pf-m-disabled pf-m-secondary"
|
|
1355
|
+
id="card-clickable-selectable-secondary-example-disabled"
|
|
1356
|
+
>
|
|
1357
|
+
<div class="pf-v5-c-card__header">
|
|
1358
|
+
<div class="pf-v5-c-card__actions pf-m-no-offset">
|
|
1359
|
+
<div class="pf-v5-c-card__selectable-actions">
|
|
1360
|
+
<div class="pf-v5-c-check">
|
|
1361
|
+
<input
|
|
1362
|
+
class="pf-v5-c-check__input"
|
|
1363
|
+
type="checkbox"
|
|
1364
|
+
disabled
|
|
1365
|
+
id="card-clickable-selectable-secondary-example-disabled-check"
|
|
1366
|
+
name="card-clickable-selectable-secondary-example-disabled-check"
|
|
1367
|
+
aria-labelledby="card-clickable-selectable-secondary-example-disabled"
|
|
1368
|
+
/>
|
|
1369
|
+
<label
|
|
1370
|
+
class="pf-v5-c-check__label pf-m-disabled"
|
|
1371
|
+
for="card-clickable-selectable-secondary-example-disabled-check"
|
|
1372
|
+
id="card-clickable-selectable-secondary-example-disabled-check-label"
|
|
1373
|
+
name="card-clickable-selectable-secondary-example-disabled-check"
|
|
1374
|
+
></label>
|
|
1375
|
+
</div>
|
|
1376
|
+
</div>
|
|
1377
|
+
</div>
|
|
1378
|
+
<div class="pf-v5-c-card__header-main">
|
|
1379
|
+
<div
|
|
1380
|
+
class="pf-v5-c-card__title"
|
|
1381
|
+
id="card-clickable-selectable-secondary-example-disabled-title"
|
|
1382
|
+
>
|
|
1383
|
+
<h2 class="pf-v5-c-card__title-text">
|
|
1384
|
+
<button
|
|
1385
|
+
class="pf-v5-c-button pf-m-link pf-m-inline pf-m-disabled"
|
|
1386
|
+
>Disabled card</button>
|
|
1387
|
+
</h2>
|
|
1388
|
+
</div>
|
|
1389
|
+
</div>
|
|
1390
|
+
</div>
|
|
1391
|
+
<div class="pf-v5-c-card__body">Body</div>
|
|
1392
|
+
<div class="pf-v5-c-card__footer">Footer</div>
|
|
1107
1393
|
</div>
|
|
1108
|
-
<div class="pf-v5-c-card__body">Body</div>
|
|
1109
|
-
<div class="pf-v5-c-card__footer">Footer</div>
|
|
1110
|
-
</div>
|
|
1111
|
-
|
|
1112
|
-
```
|
|
1113
1394
|
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1395
|
+
<div
|
|
1396
|
+
class="pf-v5-c-card pf-m-clickable pf-m-selectable pf-m-selected pf-m-disabled pf-m-secondary"
|
|
1397
|
+
id="card-clickable-selectable-secondary-example-selected-disabled"
|
|
1398
|
+
>
|
|
1399
|
+
<div class="pf-v5-c-card__header">
|
|
1400
|
+
<div class="pf-v5-c-card__actions pf-m-no-offset">
|
|
1401
|
+
<div class="pf-v5-c-card__selectable-actions">
|
|
1402
|
+
<div class="pf-v5-c-check">
|
|
1403
|
+
<input
|
|
1404
|
+
class="pf-v5-c-check__input"
|
|
1405
|
+
type="checkbox"
|
|
1406
|
+
checked
|
|
1407
|
+
disabled
|
|
1408
|
+
id="card-clickable-selectable-secondary-example-selected-disabled-check"
|
|
1409
|
+
name="card-clickable-selectable-secondary-example-selected-disabled-check"
|
|
1410
|
+
aria-labelledby="card-clickable-selectable-secondary-example-selected-disabled"
|
|
1411
|
+
/>
|
|
1412
|
+
<label
|
|
1413
|
+
class="pf-v5-c-check__label pf-m-disabled"
|
|
1414
|
+
for="card-clickable-selectable-secondary-example-selected-disabled-check"
|
|
1415
|
+
id="card-clickable-selectable-secondary-example-selected-disabled-check-label"
|
|
1416
|
+
name="card-clickable-selectable-secondary-example-selected-disabled-check"
|
|
1417
|
+
></label>
|
|
1418
|
+
</div>
|
|
1419
|
+
</div>
|
|
1420
|
+
</div>
|
|
1421
|
+
<div class="pf-v5-c-card__header-main">
|
|
1422
|
+
<div
|
|
1423
|
+
class="pf-v5-c-card__title"
|
|
1424
|
+
id="card-clickable-selectable-secondary-example-selected-disabled-title"
|
|
1425
|
+
>
|
|
1426
|
+
<h2 class="pf-v5-c-card__title-text">
|
|
1427
|
+
<button
|
|
1428
|
+
class="pf-v5-c-button pf-m-link pf-m-inline pf-m-disabled"
|
|
1429
|
+
>Selected but disabled card</button>
|
|
1430
|
+
</h2>
|
|
1431
|
+
</div>
|
|
1432
|
+
</div>
|
|
1433
|
+
</div>
|
|
1434
|
+
<div class="pf-v5-c-card__body">Body</div>
|
|
1435
|
+
<div class="pf-v5-c-card__footer">Footer</div>
|
|
1120
1436
|
</div>
|
|
1121
|
-
<div class="pf-v5-c-card__body">Body</div>
|
|
1122
|
-
<div class="pf-v5-c-card__footer">Footer</div>
|
|
1123
1437
|
</div>
|
|
1124
1438
|
|
|
1125
1439
|
```
|
|
1126
1440
|
|
|
1127
|
-
###
|
|
1441
|
+
### Secondary
|
|
1128
1442
|
|
|
1129
1443
|
```html
|
|
1130
|
-
<div class="pf-v5-c-card pf-m-
|
|
1444
|
+
<div class="pf-v5-c-card pf-m-secondary" id="card-secondary-example">
|
|
1131
1445
|
<div class="pf-v5-c-card__title">
|
|
1132
1446
|
<h2 class="pf-v5-c-card__title-text">Title</h2>
|
|
1133
1447
|
</div>
|
|
@@ -1668,10 +1982,7 @@ A card is a generic rectangular container that can be used to build other compon
|
|
|
1668
1982
|
| `.pf-m-selected` | `.pf-v5-c-card` | Modifies a selectable card for selected state styling. Can be used in addition to indicating selection via the `.pf-v5-c-card__input`. |
|
|
1669
1983
|
| `.pf-m-current` | `.pf-v5-c-card` | Modifies a card that is both clickable and selectable for clicked state styling. |
|
|
1670
1984
|
| `.pf-m-disabled` | `.pf-v5-c-card` | Modifies a card so it is not selectable or clickable. |
|
|
1671
|
-
| `.pf-m-
|
|
1672
|
-
| `.pf-m-selectable-raised` | `.pf-v5-c-card` | Modifies a selectable card so that it is selectable. |
|
|
1673
|
-
| `.pf-m-selected-raised` | `.pf-v5-c-card.pf-m-selectable-raised` | Modifies a selectable card for the selected state. |
|
|
1674
|
-
| `.pf-m-non-selectable-raised` | `.pf-v5-c-card` | Modifies a selectable card so that it is not selectable. |
|
|
1985
|
+
| `.pf-m-secondary` | `.pf-v5-c-card` | Modifies the card to have secondary styling. |
|
|
1675
1986
|
| `.pf-m-flat` | `.pf-v5-c-card` | Modifies the card to have a border instead of a shadow. `.pf-m-flat` is for use in layouts where cards are against a white background. |
|
|
1676
1987
|
| `.pf-m-rounded` | `.pf-v5-c-card` | Modifies the card to have rounded corners. |
|
|
1677
1988
|
| `.pf-m-plain` | `.pf-v5-c-card` | Modifies the card to have no box shadow and no background color. |
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/patternfly",
|
|
3
3
|
"description": "Assets, source, tooling, and content for PatternFly 4",
|
|
4
|
-
"version": "6.0.0-alpha.
|
|
4
|
+
"version": "6.0.0-alpha.62",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"scripts": {
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"@commitlint/config-conventional": "^18.4.3",
|
|
46
46
|
"@fortawesome/fontawesome": "^1.1.8",
|
|
47
47
|
"@octokit/rest": "^20.0.2",
|
|
48
|
-
"@patternfly/documentation-framework": "5.3.
|
|
48
|
+
"@patternfly/documentation-framework": "5.3.18",
|
|
49
49
|
"@patternfly/patternfly-a11y": "4.3.1",
|
|
50
50
|
"@patternfly/react-code-editor": "5.1.2",
|
|
51
51
|
"@patternfly/react-core": "5.1.2",
|