@uqds/card 0.0.5-alpha.0 → 0.0.8-alpha.0

package/README.md

@@ -1,26 +1,26 @@
-# @uqds/card
-
-> Card components
-
-## Usage
-
-### Installation
-
-With Yarn:
-```shell
-yarn add @uqds/card
-```
-
-With NPM:
-```shell
-npm i @uqds/card
-```
-
----
-
-## Dependency graph
-
-```shell
-@uqds/card
-└─ @uqds/core
-```
+# @uqds/card
+
+> Card components
+
+## Usage
+
+### Installation
+
+With Yarn:
+```shell
+yarn add @uqds/card
+```
+
+With NPM:
+```shell
+npm i @uqds/card
+```
+
+---
+
+## Dependency graph
+
+```shell
+@uqds/card
+└─ @uqds/core
+```

package/dist/css/main.css

@@ -0,0 +1 @@
+.uq-card{position:relative;display:flex;flex-direction:column;height:100%;background-color:#fff;border:1px solid #efedeb;border-radius:.25rem;color:#565452;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(43,42,41,.05);transition:all ease .25s;z-index:10}.uq-card__link:hover,.uq-card__link:focus{box-shadow:0 .5rem 1rem rgba(43,42,41,.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: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:#2b2a29;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:#565452}.uq-card--shaded{background-color:#f7f6f5}@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 #efedeb;box-shadow:0 .25rem .25rem rgba(43,42,41,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(43,42,41,.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 #efedeb;box-shadow:0 .25rem .25rem rgba(43,42,41,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(43,42,41,.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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uqds/card",
-  "version": "0.0.5-alpha.0",
+  "version": "0.0.8-alpha.0",
   "description": "Card components",
   "keywords": [
     "uqds",
@@ -26,8 +26,12 @@
     "lib": "src"
   },
   "files": [
-    "src/*"
+    "src/*",
+    "dist/*"
   ],
+  "scripts": {
+    "prepare": "gulp -f ../../gulpfile.js --cwd=. prepare"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/uq-its-ss/design-system.git"
@@ -36,7 +40,7 @@
     "url": "https://github.com/uq-its-ss/design-system/issues"
   },
   "dependencies": {
-    "@uqds/core": "^0.0.5-alpha.0"
+    "@uqds/core": "^0.0.8-alpha.0"
   },
-  "gitHead": "0d2250c3ff44460d2902ea08102e6423b3fcc3aa"
+  "gitHead": "ec1e27ff2c58ae9bdcd0eef7516ad5d57a00bafb"
 }

package/src/scss/_component.scss

@@ -1,209 +1,209 @@
-@use '@uqds/core/src/scss/global' as core;
-@use 'global' as *;
-
-// Card Default
-.uq-card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: core.$uq-white;
-  border: 1px solid core.$uq-neutral-light60;
-  border-radius: core.$space-xs;
-  color: core.$uq-neutral-dark60;
-  line-height: core.$space-m; 
-  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.$uq-neutral-dark80, 0.05);
-    transition: all ease .25s;
-    z-index: 10;
-
-    &:hover,
-    &:focus {
-      box-shadow: 0 core.$space-s core.$space rgba(core.$uq-neutral-dark80, 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-m;
-
-    :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:last-child {
-      margin-bottom: core.$space-none;
-    }
-  }
-
-  &__actions {
-    padding: core.$space-none core.$space-m core.$space-m;
-
-    p:last-child {
-      margin-bottom: core.$space-none;
-    }
-  }
-
-  &__title {
-    font-size: core.$font-size-l;
-    color: core.$uq-neutral-dark80;
-    margin: core.$space-none core.$space-none core.$space-s;
-
-    @media #{core.$screen-md-up} {
-      font-size: core.$font-size-xl;
-    }
-
-    &-super {
-      font-size: core.$font-size-s;
-      font-weight: 500;
-      color: core.$uq-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;
-      }
-  
-      &--grey {
-        font-weight: 400;
-        color: core.$uq-neutral-dark60;
-      }
-    }
-  }
-
-  // Shaded
-  &--shaded {
-    background-color: $card-shaded-bg;
-  }
-}
-
-/* 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-m;
-
-        @media #{core.$screen-md-up} {
-          padding: core.$space-xxxl core.$space-xxxl core.$space-m;
-        }
-      }
-      &__body {
-        p {
-          @include truncate-card-1col-body-text;
-        }
-      }
-      
-      &__actions {
-        padding: core.$space-none core.$space-m core.$space-m;
-
-        @media #{core.$screen-md-up} {
-          padding: core.$space-none core.$space-xxxl core.$space-xxxl;
-        }
-      }
-    }
-  }
-}
-
-// Set height of card to not equalise
-.height-non-equalised .uq-card {
-  height: auto;
-}
+@use '@uqds/core/src/scss/global' as core;
+@use 'global' as *;
+
+// Card Default
+.uq-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: core.$uq-white;
+  border: 1px solid core.$uq-neutral-light60;
+  border-radius: core.$space-xs;
+  color: core.$uq-neutral-dark60;
+  line-height: core.$space-m; 
+  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.$uq-neutral-dark80, 0.05);
+    transition: all ease .25s;
+    z-index: 10;
+
+    &:hover,
+    &:focus {
+      box-shadow: 0 core.$space-s core.$space rgba(core.$uq-neutral-dark80, 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-m;
+
+    :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:last-child {
+      margin-bottom: core.$space-none;
+    }
+  }
+
+  &__actions {
+    padding: core.$space-none core.$space-m core.$space-m;
+
+    p:last-child {
+      margin-bottom: core.$space-none;
+    }
+  }
+
+  &__title {
+    font-size: core.$font-size-l;
+    color: core.$uq-neutral-dark80;
+    margin: core.$space-none core.$space-none core.$space-s;
+
+    @media #{core.$screen-md-up} {
+      font-size: core.$font-size-xl;
+    }
+
+    &-super {
+      font-size: core.$font-size-s;
+      font-weight: 500;
+      color: core.$uq-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;
+      }
+  
+      &--grey {
+        font-weight: 400;
+        color: core.$uq-neutral-dark60;
+      }
+    }
+  }
+
+  // Shaded
+  &--shaded {
+    background-color: $card-shaded-bg;
+  }
+}
+
+/* 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-m;
+
+        @media #{core.$screen-md-up} {
+          padding: core.$space-xxxl core.$space-xxxl core.$space-m;
+        }
+      }
+      &__body {
+        p {
+          @include truncate-card-1col-body-text;
+        }
+      }
+      
+      &__actions {
+        padding: core.$space-none core.$space-m core.$space-m;
+
+        @media #{core.$screen-md-up} {
+          padding: core.$space-none core.$space-xxxl core.$space-xxxl;
+        }
+      }
+    }
+  }
+}
+
+// Set height of card to not equalise
+.height-non-equalised .uq-card {
+  height: auto;
+}

package/src/scss/_global.scss

@@ -1,70 +1,70 @@
-@use '@uqds/core/src/scss/global' as core;
-
-$card-shaded-bg: core.$uq-neutral-light80;
-
-// Truncate card body text
-@mixin truncate-card-1col-body-text {
-    white-space: normal;
-    overflow: hidden;
-    max-height: 75px;
-}
-
-// Find number of child items in a parent container and apply style based on it
-@mixin with-count($n) {
-    @if $n == 1 {
-        &:first-child:nth-last-child(1) {
-            @content;
-        }
-    }
-    @else {
-        &:first-child:nth-last-child(#{$n}),
-        &:first-child:nth-last-child(#{$n}) ~ & {
-            @content;
-        }
-    }
-}
-
-// Card list styles for story/event cards when more than 2 in the grid on small viewports.
-@mixin card-list-style() {
-    .uq-card {
-
-        &--story,
-        &--event {
-        
-            flex-direction: row;
-            padding-bottom: 1rem;
-            border: none;
-            border-bottom: 1px solid core.$uq-neutral-light60;
-            box-shadow: 0 core.$space-xs core.$space-xs rgba(core.$uq-neutral-dark80, 0);
-
-            &:hover,
-            &:focus {
-                box-shadow: 0 core.$space-s core.$space-s rgba(core.$uq-neutral-dark80, 0.1);
-            }
-
-            .uq-card__image__wrapper {
-                min-width: 98px;
-                min-height: 100%;
-            }
-            .uq-card__image {
-                min-height: 100%;
-                padding-bottom: 0%;
-            }
-            .uq-card__content__wrapper {
-                min-width: 50%;
-            }
-            .uq-card__content {
-                padding: core.$space-none core.$space;
-            }
-            .uq-card__title {
-                margin: core.$space-none core.$space-none core.$space-s;
-            }
-            .uq-card__body {
-                display: none;
-            }
-            .uq-card__actions {
-                padding: core.$space-none core.$space core.$space-none;
-            }
-        }
-    }
+@use '@uqds/core/src/scss/global' as core;
+
+$card-shaded-bg: core.$uq-neutral-light80;
+
+// Truncate card body text
+@mixin truncate-card-1col-body-text {
+    white-space: normal;
+    overflow: hidden;
+    max-height: 75px;
+}
+
+// Find number of child items in a parent container and apply style based on it
+@mixin with-count($n) {
+    @if $n == 1 {
+        &:first-child:nth-last-child(1) {
+            @content;
+        }
+    }
+    @else {
+        &:first-child:nth-last-child(#{$n}),
+        &:first-child:nth-last-child(#{$n}) ~ & {
+            @content;
+        }
+    }
+}
+
+// Card list styles for story/event cards when more than 2 in the grid on small viewports.
+@mixin card-list-style() {
+    .uq-card {
+
+        &--story,
+        &--event {
+        
+            flex-direction: row;
+            padding-bottom: 1rem;
+            border: none;
+            border-bottom: 1px solid core.$uq-neutral-light60;
+            box-shadow: 0 core.$space-xs core.$space-xs rgba(core.$uq-neutral-dark80, 0);
+
+            &:hover,
+            &:focus {
+                box-shadow: 0 core.$space-s core.$space-s rgba(core.$uq-neutral-dark80, 0.1);
+            }
+
+            .uq-card__image__wrapper {
+                min-width: 98px;
+                min-height: 100%;
+            }
+            .uq-card__image {
+                min-height: 100%;
+                padding-bottom: 0%;
+            }
+            .uq-card__content__wrapper {
+                min-width: 50%;
+            }
+            .uq-card__content {
+                padding: core.$space-none core.$space;
+            }
+            .uq-card__title {
+                margin: core.$space-none core.$space-none core.$space-s;
+            }
+            .uq-card__body {
+                display: none;
+            }
+            .uq-card__actions {
+                padding: core.$space-none core.$space core.$space-none;
+            }
+        }
+    }
 }

package/src/scss/main.scss

@@ -0,0 +1 @@
+@use 'component';