diff --git a/src/Card/Card.scss b/src/Card/Card.scss
index c754ce445f..223b81a8ec 100644
--- a/src/Card/Card.scss
+++ b/src/Card/Card.scss
@@ -1,59 +1,11 @@
@import "variables";
@import "~bootstrap/scss/card";
-.pgn__card,
-.pgn__card-body {
- width: 100%;
- border: 0;
-
- %dark-variant-content {
- color: $white;
-
- a {
- color: $white;
- }
- }
-
- &.pgn__card-dark {
- background-color: $card-bg-dark;
-
- @extend %dark-variant-content;
-
- .pgn__card-header {
- @extend %dark-variant-content;
-
- .pgn__card-header-title,
- .pgn__card-header-title-sm,
- .pgn__card-header-title-md,
- .pgn__card-header-subtitle,
- .pgn__card-header-subtitle-sm,
- .pgn__card-header-subtitle-md {
- @extend %dark-variant-content;
- }
- }
-
- .pgn__card-section {
- @extend %dark-variant-content;
-
- .pgn__card-section-title {
- @extend %dark-variant-content;
- }
- }
-
- .pgn__card-footer,
- .pgn__card-footer-text {
- @extend %dark-variant-content;
- }
- }
-
- &.pgn__card-muted {
- background-color: $card-bg-muted;
- }
-}
-
-a .pgn__card {
+a .pgn__card,
+a.pgn__card {
color: $gray-700;
display: inline-block;
+ text-decoration: none;
}
.pgn__card-grid {
@@ -115,365 +67,414 @@ a .pgn__card {
}
}
-.pgn__card-header {
- padding: 0 $card-spacer-x;
- display: flex;
- justify-content: space-between;
+%pgn__card-focused {
+ outline: none;
- .pgn__card-header-content {
- display: flex;
- flex-direction: column;
- margin-top: map_get($spacers, 4\.5);
- overflow: auto;
- text-align: start;
- width: 100%;
+ &::before {
+ content: "";
+ position: absolute;
+ top: calc(-1 * #{$card-focus-border-offset});
+ right: calc(-1 * #{$card-focus-border-offset});
+ bottom: calc(-1 * #{$card-focus-border-offset});
+ left: calc(-1 * #{$card-focus-border-offset});
+ border: solid $card-focus-border-width $card-border-focus-color;
+ border-radius: $card-focus-border-radius;
}
- %header-title {
- color: $black;
- font-weight: $font-weight-bold;
- text-align: start;
+ &.pgn__card-dark::before {
+ border: solid $card-focus-border-width $card-border-focus-color-dark;
}
+}
- .pgn__card-header-title,
- .pgn__card-header-title-sm,
- .pgn__card-header-title-md {
- @extend %header-title;
- }
+.pgn__card {
+ outline: none;
- .pgn__card-header-title-sm {
- font-size: $h4-font-size;
- }
+ @include pgn-box-shadow(1, "down");
- .pgn__card-header-title-md {
- font-size: $h3-font-size;
- }
+ &.clickable {
+ &:hover,
+ &:focus,
+ &.focus {
+ cursor: pointer;
- %header-subtitle {
- color: $gray-700;
- margin-top: map_get($spacers, 1);
- }
+ @include pgn-box-shadow(2, "down");
+ }
- .pgn__card-header-subtitle,
- .pgn__card-header-subtitle-sm,
- .pgn__card-header-subtitle-md {
- @extend %header-subtitle;
+ &:focus,
+ &.focus {
+ @extend %pgn__card-focused;
+ }
}
- .pgn__card-header-subtitle-sm {
- font-size: $h5-font-size;
+ &.horizontal {
+ flex-direction: row;
}
- .pgn__card-header-subtitle-md {
- font-size: $h4-font-size;
- }
+ .pgn__card-header {
+ padding: 0 $card-spacer-x;
+ display: flex;
+ justify-content: space-between;
- .pgn__card-header-actions {
- margin-top: $spacer;
- margin-inline-start: $spacer;
- flex-shrink: 0;
- }
+ .pgn__card-header-content {
+ display: flex;
+ flex-direction: column;
+ margin-top: map_get($spacers, 4\.5);
+ overflow: auto;
+ text-align: start;
+ width: 100%;
+ }
- .pgn__card-header-loader {
- width: 100%;
+ %header-title {
+ color: $black;
+ font-weight: $font-weight-bold;
+ text-align: start;
+ }
- .react-loading-skeleton {
- margin-top: map-get($spacers, 4);
+ .pgn__card-header-title,
+ .pgn__card-header-title-sm,
+ .pgn__card-header-title-md {
+ @extend %header-title;
}
- }
-}
-.pgn__card-divider {
- border-top: 1px solid $card-divider-bg;
- height: 0;
-}
+ .pgn__card-header-title-sm {
+ font-size: $h4-font-size;
+ }
-.pgn__card-section {
- padding: $card-spacer-x;
- flex-grow: 1;
- text-align: start;
+ .pgn__card-header-title-md {
+ font-size: $h3-font-size;
+ }
- &.is-muted {
- background-color: $light-200;
- }
+ %header-subtitle {
+ color: $gray-700;
+ margin-top: map_get($spacers, 1);
+ }
- .pgn__card-section-title {
- color: $black;
- font-weight: $font-weight-bold;
- font-size: $h5-font-size;
- margin-bottom: $card-spacer-y;
- }
+ .pgn__card-header-subtitle,
+ .pgn__card-header-subtitle-sm,
+ .pgn__card-header-subtitle-md {
+ @extend %header-subtitle;
+ }
- .pgn__card-section-actions {
- display: flex;
- justify-content: flex-end;
- margin-top: $card-spacer-y;
- }
+ .pgn__card-header-subtitle-sm {
+ font-size: $h5-font-size;
+ }
- dd {
- [dir="rtl"] & {
- margin-right: 0;
- margin-left: 40px;
+ .pgn__card-header-subtitle-md {
+ font-size: $h4-font-size;
}
- }
-}
-.pgn__card-footer {
- width: 100%;
- padding: $card-spacer-x;
- display: flex;
- align-items: center;
- justify-content: center;
+ .pgn__card-header-actions {
+ margin-top: $spacer;
+ margin-inline-start: $spacer;
+ flex-shrink: 0;
+ }
- &.vertical {
- justify-content: flex-end;
- padding-top: 0;
+ .pgn__card-header-loader {
+ width: 100%;
- & > * + * {
- margin-inline-start: $card-footer-actions-gap;
+ .react-loading-skeleton {
+ margin-top: map-get($spacers, 4);
+ }
}
}
- .pgn__card-footer-loader {
+ .pgn__card-footer {
width: 100%;
- margin-inline-start: 0;
- }
+ padding: $card-spacer-x;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &.vertical {
+ justify-content: flex-end;
+ padding-top: 0;
- &.vertical-stacked {
- flex-direction: column-reverse;
- padding-top: $card-spacer-x - $card-footer-actions-gap;
+ & > * + * {
+ margin-inline-start: $card-footer-actions-gap;
+ }
+ }
- & > * {
+ .pgn__card-footer-loader {
width: 100%;
- margin-top: $card-footer-actions-gap;
+ margin-inline-start: 0;
}
- }
- &.horizontal {
- flex-wrap: wrap;
+ &.vertical-stacked {
+ flex-direction: column-reverse;
+ padding-top: $card-spacer-x - $card-footer-actions-gap;
- & > :not(:last-child) {
- margin-inline-end: $card-footer-actions-gap;
+ & > * {
+ width: 100%;
+ margin-top: $card-footer-actions-gap;
+ }
}
- }
- &.horizontal-stacked {
- flex-direction: column-reverse;
- padding-top: $card-spacer-x - $card-footer-actions-gap;
+ &.horizontal {
+ flex-wrap: wrap;
- & > * {
- margin-top: $card-footer-actions-gap;
+ & > :not(:last-child) {
+ margin-inline-end: $card-footer-actions-gap;
+ }
}
- }
-}
-.pgn__card-footer-text {
- color: $gray-700;
- order: 1;
- font-size: $card-footer-text-font-size;
+ &.horizontal-stacked {
+ flex-direction: column-reverse;
+ padding-top: $card-spacer-x - $card-footer-actions-gap;
- &.vertical {
- margin-inline-end: auto;
- order: -1;
- }
+ & > * {
+ margin-top: $card-footer-actions-gap;
+ }
+ }
- &.vertical-stacked {
- margin-right: auto;
- }
+ .pgn__card-footer-text {
+ color: $gray-700;
+ order: 1;
+ font-size: $card-footer-text-font-size;
- &.horizontal {
- margin-top: $card-spacer-x;
- width: 100%;
- text-align: center;
+ &.vertical {
+ margin-inline-end: auto;
+ order: -1;
+ }
+
+ &.vertical-stacked {
+ margin-right: auto;
+ }
+
+ &.horizontal {
+ margin-top: $card-spacer-x;
+ width: 100%;
+ text-align: center;
+ }
+
+ &.horizontal-stacked {
+ margin-top: $card-spacer-x;
+ width: 100%;
+ text-align: center;
+ order: -1;
+ }
+ }
}
- &.horizontal-stacked {
- margin-top: $card-spacer-x;
- width: 100%;
- text-align: center;
- order: -1;
+ .pgn__card-divider {
+ border-top: 1px solid $card-divider-bg;
+ height: 0;
}
-}
-.pgn__card-wrapper-image-cap {
- position: relative;
+ .pgn__card-section {
+ padding: $card-spacer-x;
+ flex-grow: 1;
+ text-align: start;
- &.horizontal {
- max-width: $card-image-horizontal-max-width;
- min-width: $card-image-horizontal-min-width;
- overflow: hidden;
+ &.is-muted {
+ background-color: $light-200;
+ }
- .pgn__card-image-cap {
- height: 100%;
- max-width: inherit;
- width: auto;
- object-fit: cover;
+ .pgn__card-section-title {
+ color: $black;
+ font-weight: $font-weight-bold;
+ font-size: $h5-font-size;
+ margin-bottom: $card-spacer-y;
}
- .pgn__card-logo-cap {
- inset-inline-start: $card-logo-left-offset-horizontal;
- bottom: $card-logo-bottom-offset-horizontal;
+ .pgn__card-section-actions {
+ display: flex;
+ justify-content: flex-end;
+ margin-top: $card-spacer-y;
}
- .pgn__card-image-cap-loader {
- .react-loading-skeleton {
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
+ dd {
+ [dir="rtl"] & {
+ margin-right: 0;
+ margin-left: 40px;
}
}
}
- &.vertical {
- max-height: $card-image-vertical-max-height;
- }
+ .pgn__card-image-cap {
+ object-fit: cover;
+ max-height: inherit;
+ width: 100%;
+ display: none;
- .pgn__card-image-cap-loader {
- .react-loading-skeleton {
- margin-bottom: -$loading-skeleton-spacer;
- position: relative;
- top: -$loading-skeleton-spacer;
- height: 100%;
+ &.show {
+ display: block;
}
}
-}
-.pgn__card-image-cap {
- object-fit: cover;
- max-height: inherit;
- width: 100%;
- display: none;
+ .pgn__card-wrapper-image-cap {
+ position: relative;
- &.show {
- display: block;
- }
-}
+ &.horizontal {
+ max-width: $card-image-horizontal-max-width;
+ min-width: $card-image-horizontal-min-width;
+ overflow: hidden;
-.pgn__card-logo-cap {
- position: absolute;
- inset-inline-start: $card-logo-left-offset;
- bottom: #{-$card-logo-bottom-offset};
- width: $card-logo-width;
- height: $card-logo-height;
- border-radius: $card-logo-border-radius;
- box-shadow: $level-1-box-shadow;
- padding: map_get($spacers, 2);
- background-color: $white;
- display: none;
-
- &.show {
- display: block;
- }
-}
+ .pgn__card-image-cap {
+ height: 100%;
+ max-width: inherit;
+ width: auto;
+ object-fit: cover;
+ }
-%pgn__card-focused {
- outline: none;
+ .pgn__card-logo-cap {
+ inset-inline-start: $card-logo-left-offset-horizontal;
+ bottom: $card-logo-bottom-offset-horizontal;
+ }
- &::before {
- content: "";
- position: absolute;
- top: calc(-1 * #{$card-focus-border-offset});
- right: calc(-1 * #{$card-focus-border-offset});
- bottom: calc(-1 * #{$card-focus-border-offset});
- left: calc(-1 * #{$card-focus-border-offset});
- border: solid $card-focus-border-width $card-border-focus-color;
- border-radius: $card-focus-border-radius;
- }
+ .pgn__card-image-cap-loader {
+ .react-loading-skeleton {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+ }
+ }
+ }
- &.pgn__card-dark::before {
- border: solid $card-focus-border-width $card-border-focus-color-dark;
+ &.vertical {
+ max-height: $card-image-vertical-max-height;
+ }
+
+ .pgn__card-image-cap-loader {
+ .react-loading-skeleton {
+ margin-bottom: -$loading-skeleton-spacer;
+ position: relative;
+ top: -$loading-skeleton-spacer;
+ height: 100%;
+ }
+ }
+
+ .pgn__card-logo-cap {
+ position: absolute;
+ inset-inline-start: $card-logo-left-offset;
+ bottom: #{-$card-logo-bottom-offset};
+ width: $card-logo-width;
+ height: $card-logo-height;
+ border-radius: $card-logo-border-radius;
+ box-shadow: $level-1-box-shadow;
+ padding: map_get($spacers, 2);
+ background-color: $white;
+ display: none;
+
+ &.show {
+ display: block;
+ }
+ }
}
-}
-.pgn__card {
- outline: none;
- overflow: hidden;
+ .pgn__card-status {
+ box-shadow: none;
+ margin-bottom: 0;
+ font-size: $font-size-sm;
+ line-height: 1.5rem;
+ text-align: start;
+ position: relative;
+ padding: $card-spacer-y $card-spacer-x;
+ border: 0 solid transparent;
+ border-radius: 0 0 $card-border-radius $card-border-radius;
- @include pgn-box-shadow(1, "down");
+ .pgn__card-status__content {
+ display: flex;
+ }
- &.clickable {
- &:hover,
- &:focus,
- &.focus {
- cursor: pointer;
+ .pgn__card-status__message-content {
+ flex-grow: 1;
- @include pgn-box-shadow(2, "down");
+ & > :last-child {
+ margin-bottom: 0;
+ }
}
- &:focus,
- &.focus {
- @extend %pgn__card-focused;
+ .pgn__card-status__actions {
+ margin-top: map-get($spacers, 3);
}
- }
- &.horizontal {
- flex-direction: row;
- }
-}
+ .pgn__card-status__heading {
+ font-size: $h4-font-size;
+ color: $black;
+ display: flex;
+ font-weight: $font-weight-bold;
+ line-height: 1.5rem;
+ margin-bottom: .5rem;
+ }
-.pgn__card-status {
- box-shadow: none;
- margin-bottom: 0;
- font-size: $font-size-sm;
- line-height: 1.5rem;
- text-align: start;
- position: relative;
- padding: $card-spacer-y $card-spacer-x;
- border: 0 solid transparent;
- border-radius: 0 0 $card-border-radius $card-border-radius;
+ .pgn__card-status__content-icon {
+ margin-inline-end: .8rem;
+ width: 1.5rem;
+ height: 1.5rem;
+ flex-shrink: 0;
+ }
- .pgn__card-status__content {
- display: flex;
- }
+ @each $color, $value in $theme-colors {
+ &.pgn__card-status__#{$color} {
+ color: inherit;
+ background-color: theme-color($color, "background");
+ border-color: theme-color($color, "border");
- .pgn__card-status__message-content {
- flex-grow: 1;
+ .pgn__card-status__content-icon {
+ color: theme-color($color, "default");
+ }
+ }
+ }
- & > :last-child {
- margin-bottom: 0;
+ &.pgn__card-status__primary {
+ color: $white;
+ background-color: $primary-500;
+ border-color: $primary-500;
+ box-shadow: 0 0 0 1px $primary-500;
+
+ .pgn__card-status__content-icon {
+ color: $white;
+ }
}
}
+}
- .pgn__card-status__actions {
- margin-top: map-get($spacers, 3);
- }
+.pgn__card,
+.pgn__card-body {
+ width: 100%;
+ border: 0;
- .pgn__card-status__heading {
- font-size: $h4-font-size;
- color: $black;
- display: flex;
- font-weight: $font-weight-bold;
- line-height: 1.5rem;
- margin-bottom: .5rem;
- }
+ %dark-variant-content {
+ color: $white;
- .pgn__card-status__content-icon {
- margin-inline-end: .8rem;
- width: 1.5rem;
- height: 1.5rem;
- flex-shrink: 0;
+ a {
+ color: $white;
+ }
}
- @each $color, $value in $theme-colors {
- &.pgn__card-status__#{$color} {
- color: inherit;
- background-color: theme-color($color, "background");
- border-color: theme-color($color, "border");
+ &.pgn__card-dark {
+ background-color: $card-bg-dark;
- .pgn__card-status__content-icon {
- color: theme-color($color, "default");
+ @extend %dark-variant-content;
+
+ .pgn__card-header {
+ @extend %dark-variant-content;
+
+ .pgn__card-header-title,
+ .pgn__card-header-title-sm,
+ .pgn__card-header-title-md,
+ .pgn__card-header-subtitle,
+ .pgn__card-header-subtitle-sm,
+ .pgn__card-header-subtitle-md {
+ @extend %dark-variant-content;
}
}
- }
- &.pgn__card-status__primary {
- color: $white;
- background-color: $primary-500;
- border-color: $primary-500;
- box-shadow: 0 0 0 1px $primary-500;
+ .pgn__card-section {
+ @extend %dark-variant-content;
- .pgn__card-status__content-icon {
- color: $white;
+ .pgn__card-section-title {
+ @extend %dark-variant-content;
+ }
}
+
+ .pgn__card-footer,
+ .pgn__card-footer-text {
+ @extend %dark-variant-content;
+ }
+ }
+
+ &.pgn__card-muted {
+ background-color: $card-bg-muted;
}
}
diff --git a/src/Card/README.md b/src/Card/README.md
index 47c0bff9c4..5ea83bbe88 100644
--- a/src/Card/README.md
+++ b/src/Card/README.md
@@ -121,30 +121,33 @@ You use `isClickable` prop to add additional `hover` and `focus` styling to the
```
### As link
-You can also use `Card` as a link by wrapping it into appropriate component, note that `Card` will override default
-link styling to make its content appear as a regular text.
+You can also use `Card` as a link by passing the value `HyperLink` (or `a`, `Link`) to the `as` property, note that
+`Card` will override the default link styling to make its content appear as regular text.
```jsx live
() => {
const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
return (
-
-
-
-
-
- This is a card section. It can contain anything but usually text, a list, or list of links.
- Multiple sections have a card divider between them.
-
-
-
-
-
-
+
+
+
+
+ This is a card section. It can contain anything but usually text, a list, or list of links.
+ Multiple sections have a card divider between them.
+
+
+
+
+
)}
```