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 (
-    <Hyperlink destination="https://www.edx.org">
-      <Card style={{ width: isExtraSmall ? "100%" : "18rem" }} isClickable>
-        <Card.ImageCap
-          src="https://picsum.photos/360/200/"
-          srcAlt="Card image"
-        />
-        <Card.Header title="Card Title"/>
-        <Card.Section>
-          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.
-        </Card.Section>
-        <Card.Footer>
-          <Button>Action 1</Button>
-        </Card.Footer>
-      </Card>
-    </Hyperlink>
+    <Card
+      as={Hyperlink}
+      destination="https://www.edx.org"
+      style={{ width: isExtraSmall ? "100%" : "18rem" }}
+      isClickable
+    >
+      <Card.ImageCap
+        src="https://picsum.photos/360/200/"
+        srcAlt="Card image"
+      />
+      <Card.Header title="Card Title"/>
+      <Card.Section>
+        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.
+      </Card.Section>
+      <Card.Footer>
+        <Button>Action 1</Button>
+      </Card.Footer>
+    </Card>
 )}
 ```