@uqds/card 0.1.0-alpha.0 → 0.1.0-alpha.1

package/dist/css/main.css

@@ -1 +1 @@
-.uq-card{position:relative;display:flex;flex-direction:column;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5;height:100%;background-color:#fff;border:1px solid #dcdcdd;border-radius:.25rem;color:#3b383e;line-height:1.5rem;overflow-wrap:break-word;word-wrap:break-word}.uq-card__link{position:absolute;top:0;right:0;bottom:0;left:0;text-indent:-1000%;box-shadow:0 .25rem .25rem rgba(59,56,62,.05);transition:all ease .25s;z-index:10}.uq-card__link:hover,.uq-card__link:focus{box-shadow:0 .5rem 1rem rgba(59,56,62,.15)}.uq-card__image-wrapper{max-height:190px;overflow:hidden}@media(min-width: 37.5rem){.uq-card__image-wrapper{max-height:15rem}}.uq-card__image{position:relative;padding-bottom:70%;overflow:hidden}.uq-card__image img{position:absolute;top:50%;left:50%;width:100%;transform:translate(-50%, -50%);-o-object-fit:cover;object-fit:cover;z-index:0}.uq-card__content-wrapper{display:flex;flex-direction:column;flex-grow:1}.uq-card__content{flex-grow:1;padding:1.5rem}.uq-card__content :last-child .uq-card__title{margin-bottom:0}.uq-card__header :last-child{margin:0 0 .5rem}.uq-card__body p{margin-top:0}.uq-card__body p:last-child{margin-bottom:0}.uq-card__actions{padding:0 1.5rem 1.5rem}.uq-card__actions p:last-child{margin-bottom:0}.uq-card__title{font-size:1.25rem;color:#3b383e;margin:0 0 .5rem}@media(min-width: 37.5rem){.uq-card__title{font-size:1.5rem}}.uq-card__title-super{font-size:.875rem;font-weight:500;color:#962a8b;text-transform:uppercase;margin:0 0 .5rem}@media(min-width: 37.5rem){.uq-card__title-super{font-size:1rem}}.uq-card__title-super--grey{font-weight:400;color:#5e5b60}.uq-card--shaded{background-color:#f3f3f4}@media(max-width: 37.4375rem){.uq-grid__col:first-child:nth-last-child(3) .uq-card--story,.uq-grid__col:first-child:nth-last-child(3) .uq-card--event,.uq-grid__col:first-child:nth-last-child(3)~.uq-grid__col .uq-card--story,.uq-grid__col:first-child:nth-last-child(3)~.uq-grid__col .uq-card--event{flex-direction:row;padding-bottom:1rem;border:none;border-bottom:1px solid #dcdcdd;box-shadow:0 .25rem .25rem rgba(59,56,62,0)}.uq-grid__col:first-child:nth-last-child(3) .uq-card--story:hover,.uq-grid__col:first-child:nth-last-child(3) .uq-card--story:focus,.uq-grid__col:first-child:nth-last-child(3) .uq-card--event:hover,.uq-grid__col:first-child:nth-last-child(3) .uq-card--event:focus,.uq-grid__col:first-child:nth-last-child(3)~.uq-grid__col .uq-card--story:hover,.uq-grid__col:first-child:nth-last-child(3)~.uq-grid__col .uq-card--story:focus,.uq-grid__col:first-child:nth-last-child(3)~.uq-grid__col .uq-card--event:hover,.uq-grid__col:first-child:nth-last-child(3)~.uq-grid__col .uq-card--event:focus{box-shadow:0 .5rem .5rem rgba(59,56,62,.1)}.uq-grid__col:first-child:nth-last-child(3) .uq-card--story .uq-card__image__wrapper,.uq-grid__col:first-child:nth-last-child(3) .uq-card--event .uq-card__image__wrapper,.uq-grid__col:first-child:nth-last-child(3)~.uq-grid__col .uq-card--story .uq-card__image__wrapper,.uq-grid__col:first-child:nth-last-child(3)~.uq-grid__col .uq-card--event .uq-card__image__wrapper{min-width:98px;min-height:100%}.uq-grid__col:first-child:nth-last-child(3) .uq-card--story .uq-card__image,.uq-grid__col:first-child:nth-last-child(3) .uq-card--event .uq-card__image,.uq-grid__col:first-child:nth-last-child(3)~.uq-grid__col .uq-card--story .uq-card__image,.uq-grid__col:first-child:nth-last-child(3)~.uq-grid__col .uq-card--event .uq-card__image{min-height:100%;padding-bottom:0%}.uq-grid__col:first-child:nth-last-child(3) .uq-card--story .uq-card__content__wrapper,.uq-grid__col:first-child:nth-last-child(3) .uq-card--event .uq-card__content__wrapper,.uq-grid__col:first-child:nth-last-child(3)~.uq-grid__col .uq-card--story .uq-card__content__wrapper,.uq-grid__col:first-child:nth-last-child(3)~.uq-grid__col .uq-card--event .uq-card__content__wrapper{min-width:50%}.uq-grid__col:first-child:nth-last-child(3) .uq-card--story .uq-card__content,.uq-grid__col:first-child:nth-last-child(3) .uq-card--event .uq-card__content,.uq-grid__col:first-child:nth-last-child(3)~.uq-grid__col .uq-card--story .uq-card__content,.uq-grid__col:first-child:nth-last-child(3)~.uq-grid__col .uq-card--event .uq-card__content{padding:0 1rem}.uq-grid__col:first-child:nth-last-child(3) .uq-card--story .uq-card__title,.uq-grid__col:first-child:nth-last-child(3) .uq-card--event .uq-card__title,.uq-grid__col:first-child:nth-last-child(3)~.uq-grid__col .uq-card--story .uq-card__title,.uq-grid__col:first-child:nth-last-child(3)~.uq-grid__col .uq-card--event .uq-card__title{margin:0 0 .5rem}.uq-grid__col:first-child:nth-last-child(3) .uq-card--story .uq-card__body,.uq-grid__col:first-child:nth-last-child(3) .uq-card--event .uq-card__body,.uq-grid__col:first-child:nth-last-child(3)~.uq-grid__col .uq-card--story .uq-card__body,.uq-grid__col:first-child:nth-last-child(3)~.uq-grid__col .uq-card--event .uq-card__body{display:none}.uq-grid__col:first-child:nth-last-child(3) .uq-card--story .uq-card__actions,.uq-grid__col:first-child:nth-last-child(3) .uq-card--event .uq-card__actions,.uq-grid__col:first-child:nth-last-child(3)~.uq-grid__col .uq-card--story .uq-card__actions,.uq-grid__col:first-child:nth-last-child(3)~.uq-grid__col .uq-card--event .uq-card__actions{padding:0 1rem 0}.uq-grid__col:first-child:nth-last-child(4) .uq-card--story,.uq-grid__col:first-child:nth-last-child(4) .uq-card--event,.uq-grid__col:first-child:nth-last-child(4)~.uq-grid__col .uq-card--story,.uq-grid__col:first-child:nth-last-child(4)~.uq-grid__col .uq-card--event{flex-direction:row;padding-bottom:1rem;border:none;border-bottom:1px solid #dcdcdd;box-shadow:0 .25rem .25rem rgba(59,56,62,0)}.uq-grid__col:first-child:nth-last-child(4) .uq-card--story:hover,.uq-grid__col:first-child:nth-last-child(4) .uq-card--story:focus,.uq-grid__col:first-child:nth-last-child(4) .uq-card--event:hover,.uq-grid__col:first-child:nth-last-child(4) .uq-card--event:focus,.uq-grid__col:first-child:nth-last-child(4)~.uq-grid__col .uq-card--story:hover,.uq-grid__col:first-child:nth-last-child(4)~.uq-grid__col .uq-card--story:focus,.uq-grid__col:first-child:nth-last-child(4)~.uq-grid__col .uq-card--event:hover,.uq-grid__col:first-child:nth-last-child(4)~.uq-grid__col .uq-card--event:focus{box-shadow:0 .5rem .5rem rgba(59,56,62,.1)}.uq-grid__col:first-child:nth-last-child(4) .uq-card--story .uq-card__image__wrapper,.uq-grid__col:first-child:nth-last-child(4) .uq-card--event .uq-card__image__wrapper,.uq-grid__col:first-child:nth-last-child(4)~.uq-grid__col .uq-card--story .uq-card__image__wrapper,.uq-grid__col:first-child:nth-last-child(4)~.uq-grid__col .uq-card--event .uq-card__image__wrapper{min-width:98px;min-height:100%}.uq-grid__col:first-child:nth-last-child(4) .uq-card--story .uq-card__image,.uq-grid__col:first-child:nth-last-child(4) .uq-card--event .uq-card__image,.uq-grid__col:first-child:nth-last-child(4)~.uq-grid__col .uq-card--story .uq-card__image,.uq-grid__col:first-child:nth-last-child(4)~.uq-grid__col .uq-card--event .uq-card__image{min-height:100%;padding-bottom:0%}.uq-grid__col:first-child:nth-last-child(4) .uq-card--story .uq-card__content__wrapper,.uq-grid__col:first-child:nth-last-child(4) .uq-card--event .uq-card__content__wrapper,.uq-grid__col:first-child:nth-last-child(4)~.uq-grid__col .uq-card--story .uq-card__content__wrapper,.uq-grid__col:first-child:nth-last-child(4)~.uq-grid__col .uq-card--event .uq-card__content__wrapper{min-width:50%}.uq-grid__col:first-child:nth-last-child(4) .uq-card--story .uq-card__content,.uq-grid__col:first-child:nth-last-child(4) .uq-card--event .uq-card__content,.uq-grid__col:first-child:nth-last-child(4)~.uq-grid__col .uq-card--story .uq-card__content,.uq-grid__col:first-child:nth-last-child(4)~.uq-grid__col .uq-card--event .uq-card__content{padding:0 1rem}.uq-grid__col:first-child:nth-last-child(4) .uq-card--story .uq-card__title,.uq-grid__col:first-child:nth-last-child(4) .uq-card--event .uq-card__title,.uq-grid__col:first-child:nth-last-child(4)~.uq-grid__col .uq-card--story .uq-card__title,.uq-grid__col:first-child:nth-last-child(4)~.uq-grid__col .uq-card--event .uq-card__title{margin:0 0 .5rem}.uq-grid__col:first-child:nth-last-child(4) .uq-card--story .uq-card__body,.uq-grid__col:first-child:nth-last-child(4) .uq-card--event .uq-card__body,.uq-grid__col:first-child:nth-last-child(4)~.uq-grid__col .uq-card--story .uq-card__body,.uq-grid__col:first-child:nth-last-child(4)~.uq-grid__col .uq-card--event .uq-card__body{display:none}.uq-grid__col:first-child:nth-last-child(4) .uq-card--story .uq-card__actions,.uq-grid__col:first-child:nth-last-child(4) .uq-card--event .uq-card__actions,.uq-grid__col:first-child:nth-last-child(4)~.uq-grid__col .uq-card--story .uq-card__actions,.uq-grid__col:first-child:nth-last-child(4)~.uq-grid__col .uq-card--event .uq-card__actions{padding:0 1rem 0}}@media(min-width: 37.5rem){.uq-grid__col--md-8 .uq-card,.uq-grid__col--xl-12 .uq-card{flex-direction:row}}.uq-grid__col--md-8 .uq-card__image-wrapper,.uq-grid__col--xl-12 .uq-card__image-wrapper{min-width:100%;overflow:hidden}@media(min-width: 37.5rem){.uq-grid__col--md-8 .uq-card__image-wrapper,.uq-grid__col--xl-12 .uq-card__image-wrapper{min-width:50%;max-height:100%}}.uq-grid__col--md-8 .uq-card__image,.uq-grid__col--xl-12 .uq-card__image{padding-bottom:70%}@media(min-width: 37.5rem){.uq-grid__col--md-8 .uq-card__image,.uq-grid__col--xl-12 .uq-card__image{min-height:100%;padding-bottom:0%}}.uq-grid__col--md-8 .uq-card__content-wrapper,.uq-grid__col--xl-12 .uq-card__content-wrapper{min-width:100%}@media(min-width: 37.5rem){.uq-grid__col--md-8 .uq-card__content-wrapper,.uq-grid__col--xl-12 .uq-card__content-wrapper{min-width:50%}}.uq-grid__col--md-8 .uq-card__content,.uq-grid__col--xl-12 .uq-card__content{padding:1.5rem}@media(min-width: 37.5rem){.uq-grid__col--md-8 .uq-card__content,.uq-grid__col--xl-12 .uq-card__content{padding:3.5rem 3.5rem 1.5rem}}.uq-grid__col--md-8 .uq-card__body p,.uq-grid__col--xl-12 .uq-card__body p{white-space:normal;overflow:hidden;max-height:75px}.uq-grid__col--md-8 .uq-card__actions,.uq-grid__col--xl-12 .uq-card__actions{padding:0 1.5rem 1.5rem}@media(min-width: 37.5rem){.uq-grid__col--md-8 .uq-card__actions,.uq-grid__col--xl-12 .uq-card__actions{padding:0 3.5rem 3.5rem}}.height-non-equalised .uq-card{height:auto}.text--link{color:#0d6dcd;text-decoration:none;transition:.2s color}.text--link:hover{color:#0d6dcd;text-decoration:underline}
+:root{--card-title-font-size: 24px}@media(max-width: 37.4375rem){:root{--card-title-font-size: 22px}}.uq-card,.uq-story-card{position:relative;display:flex;flex-direction:column;border-radius:4px;border:1px solid #dcdcdd;background:#fff}.uq-card:has(a:focus-visible),.uq-story-card:has(a:focus-visible){outline:4px solid #0d6dcd;outline-offset:-1px}.uq-card:hover,.uq-story-card:hover{background:#f3f3f4}.uq-card:hover .uq-card__content::after,.uq-story-card:hover .uq-card__content::after{left:8px}.uq-card__content{flex:1;display:flex;flex-direction:column;padding:1.5rem}.uq-card__content::after{content:"";height:24px;width:24px;margin-top:auto;padding-top:1.5rem;position:relative;box-sizing:content-box;background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4 12h15M14 18l6-6-6-6' stroke='%2351247a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-position:right bottom;background-size:24px;background-repeat:no-repeat;transition:left 200ms ease-in-out;left:0}.uq-story-card__title,.uq-card__title{margin:0;color:#19151c;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;font-size:var(--card-title-font-size)}.uq-story-card__title a,.uq-card__title a{color:#19151c}.uq-story-card__title a::after,.uq-card__title a::after{content:"";position:absolute;inset:0}.uq-story-card__title a:focus,.uq-card__title a:focus{outline:none}.uq-card__description,.uq-story-card__description{margin-top:.5rem}.uq-card__image,.uq-story-card__image{aspect-ratio:1.5/1;position:relative;flex-shrink:0}.uq-card__image img,.uq-story-card__image img,.uq-card__image picture,.uq-story-card__image picture{width:100%;height:100%;inset:0;position:absolute;object-fit:cover}.uq-card__icon{margin-bottom:.5rem}.uq-card__icon .uq-icon::before{height:56px;width:56px}.uq-card--text .uq-card__image,.uq-card--text .uq-story-card__image,.uq-card--text .uq-card__icon{display:none}.uq-card--image .uq-card__icon{display:none}.uq-card--icon .uq-card__image,.uq-card--icon .uq-story-card__image,.uq-card--icon-nav .uq-card__image,.uq-card--icon-nav .uq-story-card__image{display:none}@media(max-width: 37.4375rem){.uq-card--icon-nav .uq-card__content{display:flex;align-items:center;flex-direction:row}.uq-card--icon-nav .uq-card__content::after{padding-top:0;margin-top:0;margin-left:auto}.uq-card--icon-nav .uq-card__description,.uq-card--icon-nav .uq-story-card__description{display:none}.uq-card--icon-nav .uq-card__icon{margin:0 1rem 0 0}.uq-card--icon-nav .uq-card__icon .uq-icon::before{height:40px;width:40px}}@media(max-width: 37.4375rem){.uq-story-card{border-radius:0;border-inline-width:0;border-top-width:0;display:flex;flex-direction:row-reverse;align-items:center;gap:1rem;padding-bottom:1rem;background-color:rgba(0,0,0,0)}.uq-story-card:hover{background-color:rgba(0,0,0,0)}}.uq-story-card__content{flex:1;position:relative;display:flex;flex-direction:column;padding:1.5rem}@media(max-width: 37.4375rem){.uq-story-card__content{padding:0}}@media(max-width: 37.4375rem){.uq-story-card__title{-webkit-line-clamp:3}}@media(max-width: 37.4375rem){.uq-story-card__description{display:none}}.uq-story-card__top-label{margin-bottom:.25rem;color:#757377;font-weight:500}@media(max-width: 37.4375rem){.uq-story-card__top-label{margin-bottom:0}}.uq-story-card__bottom-label{padding-top:1.5rem;margin-top:auto}@media(max-width: 37.4375rem){.uq-story-card__bottom-label{margin-top:.5rem}}@media(max-width: 37.4375rem){.uq-story-card__image{width:120px;height:100px;aspect-ratio:unset;flex-shrink:0}}.uq-story-card--event .uq-story-card__top-label{color:#51247a}.uq-story-card--event .uq-story-card__description,.uq-story-card--story .uq-story-card__description{display:none}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uqds/card",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.1",
   "description": "Card components",
   "keywords": [
     "uqds",
@@ -40,7 +40,8 @@
     "url": "https://github.com/uq-its-ss/design-system/issues"
   },
   "dependencies": {
-    "@uqds/core": "^1.2.0-alpha.0"
+    "@uqds/core": "^1.2.0-alpha.0",
+    "@uqds/icon": "^0.0.15-alpha.4"
   },
-  "gitHead": "78891f49ec037688e08f67f30a52691404325da7"
+  "gitHead": "0a1a6e48689f330d9cb6ac9d0d47b8f8a4edf2ff"
 }

package/src/scss/_card.scss

@@ -0,0 +1,152 @@
+@use "@uqds/core/src/scss/global" as core;
+@use "@uqds/icon/src/scss/global" as icon;
+
+.uq-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  border: 1px solid #{core.$grey-200};
+  background: core.$white;
+
+  &:has(a:focus-visible) {
+    outline: 4px solid core.$utility-500;
+    outline-offset: -1px;
+  }
+
+  &:hover {
+    background: core.$grey-50;
+
+    & .uq-card__content::after {
+      left: 8px;
+    }
+  }
+}
+
+.uq-card__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: core.$space-l;
+
+  &::after {
+    content: "";
+    height: 24px;
+    width: 24px;
+    margin-top: auto;
+    padding-top: core.$space-l;
+    position: relative;
+    box-sizing: content-box;
+    background-image: url(icon.get-icon(
+      "standard--arrow-right",
+      core.$purple-500
+    ));
+    background-position: right bottom;
+    background-size: 24px;
+    background-repeat: no-repeat;
+    transition: left 200ms ease-in-out;
+    left: 0;
+  }
+}
+
+%uq-card__title,
+.uq-card__title {
+  margin: 0;
+  color: core.$black;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  overflow: hidden;
+  font-size: var(--card-title-font-size);
+
+  & a {
+    color: core.$black;
+
+    &::after {
+      content: "";
+      position: absolute;
+      inset: 0;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.uq-card__description {
+  margin-top: core.$space-s;
+}
+
+.uq-card__image {
+  aspect-ratio: 1.5 / 1;
+  position: relative;
+  flex-shrink: 0;
+
+  & img,
+  & picture {
+    width: 100%;
+    height: 100%;
+    inset: 0;
+    position: absolute;
+    object-fit: cover;
+  }
+}
+
+.uq-card__icon {
+  margin-bottom: core.$space-s;
+
+  & .uq-icon::before {
+    height: 56px;
+    width: 56px;
+  }
+}
+
+.uq-card--text {
+  & .uq-card__image,
+  & .uq-card__icon {
+    display: none;
+  }
+}
+
+.uq-card--image {
+  & .uq-card__icon {
+    display: none;
+  }
+}
+
+.uq-card--icon,
+.uq-card--icon-nav {
+  & .uq-card__image {
+    display: none;
+  }
+}
+
+.uq-card--icon-nav {
+  @media #{core.$screen-md-down} {
+    & .uq-card__content {
+      display: flex;
+      align-items: center;
+      flex-direction: row;
+
+      &::after {
+        padding-top: 0;
+        margin-top: 0;
+        margin-left: auto;
+      }
+    }
+
+    & .uq-card__description {
+      display: none;
+    }
+
+    & .uq-card__icon {
+      margin: 0 core.$space-m 0 0;
+    }
+
+    .uq-card__icon .uq-icon::before {
+      height: 40px;
+      width: 40px;
+    }
+  }
+}

package/src/scss/_custom-properties.scss

@@ -0,0 +1,11 @@
+@use "@uqds/core/src/scss/global" as core;
+
+:root {
+  --card-title-font-size: 24px;
+}
+
+@media #{core.$screen-md-down} {
+  :root {
+    --card-title-font-size: 22px;
+  }
+}

package/src/scss/_story-card.scss

@@ -0,0 +1,93 @@
+@use "@uqds/core/src/scss/global" as core;
+@use "card";
+
+.uq-story-card {
+  @extend .uq-card;
+
+  @media #{core.$screen-md-down} {
+    border-radius: 0;
+    border-inline-width: 0;
+    border-top-width: 0;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    gap: core.$space-m;
+    padding-bottom: core.$space-m;
+    background-color: transparent;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}
+
+.uq-story-card__content {
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: core.$space-l;
+
+  @media #{core.$screen-md-down} {
+    padding: 0;
+  }
+}
+
+.uq-story-card__title {
+  @extend %uq-card__title;
+
+  @media #{core.$screen-md-down} {
+    -webkit-line-clamp: 3;
+  }
+}
+
+.uq-story-card__description {
+  @extend .uq-card__description;
+
+  @media #{core.$screen-md-down} {
+    display: none;
+  }
+}
+
+.uq-story-card__top-label {
+  margin-bottom: core.$space-xs;
+  color: core.$grey-700;
+  font-weight: core.$font-weight-medium;
+
+  @media #{core.$screen-md-down} {
+    margin-bottom: 0;
+  }
+}
+
+.uq-story-card__bottom-label {
+  padding-top: core.$space-l;
+  margin-top: auto;
+
+  @media #{core.$screen-md-down} {
+    margin-top: core.$space-s;
+  }
+}
+
+.uq-story-card__image {
+  @extend .uq-card__image;
+
+  @media #{core.$screen-md-down} {
+    width: 120px;
+    height: 100px;
+    aspect-ratio: unset;
+    flex-shrink: 0;
+  }
+}
+
+.uq-story-card--event {
+  & .uq-story-card__top-label {
+    color: core.$purple-500;
+  }
+}
+
+.uq-story-card--event,
+.uq-story-card--story {
+  .uq-story-card__description {
+    display: none;
+  }
+}

package/src/scss/main.scss

@@ -1 +1,3 @@
-@use "component";
+@use "custom-properties";
+@use "card";
+@use "story-card";

package/src/scss/_component.scss

@@ -1,223 +0,0 @@
-@use "@uqds/core/src/scss/global" as core;
-@use "global" as *;
-
-// Card Default
-.uq-card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  font-family: core.$font-body;
-  font-size: core.$font-size-m;
-  font-weight: core.$font-weight-normal;
-  line-height: core.$line-height;
-  height: 100%;
-  background-color: core.$white;
-  border: 1px solid core.$grey-200;
-  border-radius: core.$space-xs;
-  color: core.$text;
-  line-height: core.$space-l;
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-
-  // Link that wraps the whole card
-  &__link {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    text-indent: -1000%;
-    box-shadow: 0 core.$space-xs core.$space-xs rgba(core.$grey-900, 0.05);
-    transition: all ease 0.25s;
-    z-index: 10;
-
-    &:hover,
-    &:focus {
-      box-shadow: 0 core.$space-s core.$space-m rgba(core.$grey-900, 0.15);
-    }
-  }
-
-  &__image-wrapper {
-    max-height: 190px;
-    overflow: hidden;
-
-    @media #{core.$screen-md-up} {
-      max-height: 15rem;
-    }
-  }
-  &__image {
-    position: relative;
-    padding-bottom: 70%;
-    overflow: hidden;
-
-    img {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 100%;
-      transform: translate(-50%, -50%);
-      -o-object-fit: cover;
-      object-fit: cover;
-      z-index: 0;
-    }
-  }
-
-  &__content-wrapper {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-  }
-  &__content {
-    flex-grow: 1;
-    padding: core.$space-l;
-
-    :last-child .uq-card__title {
-      margin-bottom: core.$space-none;
-    }
-  }
-
-  &__header {
-    :last-child {
-      margin: core.$space-none core.$space-none core.$space-s;
-    }
-  }
-
-  &__body {
-    p {
-      margin-top: 0;
-    }
-    p:last-child {
-      margin-bottom: core.$space-none;
-    }
-  }
-
-  &__actions {
-    padding: core.$space-none core.$space-l core.$space-l;
-
-    p:last-child {
-      margin-bottom: core.$space-none;
-    }
-  }
-
-  &__title {
-    font-size: core.$font-size-xl;
-    color: core.$grey-900;
-    margin: core.$space-none core.$space-none core.$space-s;
-
-    @media #{core.$screen-md-up} {
-      font-size: core.$font-size-xxl;
-    }
-
-    &-super {
-      font-size: core.$font-size-s;
-      font-weight: 500;
-      color: core.$purple-light;
-      text-transform: uppercase;
-      margin: core.$space-none core.$space-none core.$space-s;
-
-      @media #{core.$screen-md-up} {
-        font-size: core.$font-size-m;
-      }
-
-      &--grey {
-        font-weight: 400;
-        color: core.$grey-800;
-      }
-    }
-  }
-
-  // Shaded
-  &--shaded {
-    background-color: core.$grey-50;
-  }
-}
-
-/* Additional style rules */
-.uq-grid {
-  // On smaller viewports, Story & Event cards when > 3 renders as lists
-  @media #{core.$screen-md-down} {
-    &__col {
-      // When there are 3 items
-      @include with-count(3) {
-        @include card-list-style();
-      }
-
-      // When there are 4 items
-      @include with-count(4) {
-        @include card-list-style();
-      }
-    }
-  }
-
-  // Full width cards
-  &__col--md-8,
-  &__col--xl-12 {
-    .uq-card {
-      @media #{core.$screen-md-up} {
-        flex-direction: row;
-      }
-
-      &__image-wrapper {
-        min-width: 100%;
-        overflow: hidden;
-
-        @media #{core.$screen-md-up} {
-          min-width: 50%;
-          max-height: 100%;
-        }
-      }
-      &__image {
-        padding-bottom: 70%;
-
-        @media #{core.$screen-md-up} {
-          min-height: 100%;
-          padding-bottom: 0%;
-        }
-      }
-      &__content-wrapper {
-        min-width: 100%;
-
-        @media #{core.$screen-md-up} {
-          min-width: 50%;
-        }
-      }
-      &__content {
-        padding: core.$space-l;
-
-        @media #{core.$screen-md-up} {
-          padding: core.$space-xxxxl core.$space-xxxxl core.$space-l;
-        }
-      }
-      &__body {
-        p {
-          @include truncate-card-1col-body-text;
-        }
-      }
-
-      &__actions {
-        padding: core.$space-none core.$space-l core.$space-l;
-
-        @media #{core.$screen-md-up} {
-          padding: core.$space-none core.$space-xxxxl core.$space-xxxxl;
-        }
-      }
-    }
-  }
-}
-
-// Set height of card to not equalise
-.height-non-equalised .uq-card {
-  height: auto;
-}
-
-// This should be replaced with a component specfic class or removed and documented as a body package dependancy for usage with cards.
-.text--link {
-  color: core.$link;
-  text-decoration: none;
-  transition: 0.2s color;
-
-  &:hover {
-    color: core.$link;
-    text-decoration: underline;
-  }
-}