Merge pull request #183 from digitalnsw/feature/horizontal-card

Feature/horizontal card
digitalnsw · Nov 15, 2021 · 98a1a30 · 98a1a30
2 parents c372370 + 723a270
commit 98a1a30
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 5 deletions.
diff --git a/src/components/card/_card.hbs b/src/components/card/_card.hbs
@@ -1,4 +1,4 @@
-<div class="nsw-card{{#if headline}} nsw-card--headline{{/if}}{{#if highlight}} nsw-card--highlight{{/if}}{{#if theme}} nsw-card--{{theme}}{{/if}}">
+<div class="nsw-card{{#if headline}} nsw-card--headline{{/if}}{{#if highlight}} nsw-card--highlight{{/if}}{{#if horizontal}} nsw-card--horizontal{{/if}}{{#if theme}} nsw-card--{{theme}}{{/if}}">
   {{#if img}}
   <div class="nsw-card__image">
     <img src="{{img}}" alt="{{heading}}">

diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
@@ -5,8 +5,7 @@
   overflow: hidden;
   height: 100%;
   color: var(--nsw-text-dark);
-  border-top-left-radius: var(--nsw-border-radius);
-  border-top-right-radius: var(--nsw-border-radius);
+  border-radius: var(--nsw-border-radius);
 
   &:hover {
     color: var(--nsw-text-light);
@@ -63,7 +62,7 @@
     @include font-size('md');
     font-weight: var(--nsw-font-bold);
 
-    a {      
+    a {
       @include pseudo-clickable-block;
       text-decoration: none;
       color: var(--nsw-text-dark);
@@ -122,7 +121,7 @@
     img {
       width: 100%;
       height: 100%;
-      object-fit: cover;      
+      object-fit: cover;
     }
 
     + .nsw-card__content {
@@ -237,4 +236,50 @@
       }
     }
   }
+
+  &--horizontal {
+    @include breakpoint('md') {
+      flex-direction: row;
+      align-items: stretch;
+
+      .nsw-card__content {
+        flex: 1 1 50%;
+        height: auto;
+
+        > .nsw-material-icons {
+          left: calc(50% + #{rem(16px)});
+        }
+      }
+
+      .nsw-card__image {
+        flex: 1 1 50%;
+        position: relative;
+        height: auto;
+
+        + .nsw-card__content {
+          border-top-right-radius: var(--nsw-border-radius);
+          border-bottom-left-radius: 0;
+          border-top-width: 1px;
+          border-left-width: 0;
+        }
+      }
+
+      &.nsw-card--highlight {
+        .nsw-card__image::after {
+          top: 0;
+          bottom: 0;
+          left: auto;
+          right: -6px;
+          width: 6px;
+          height: auto;
+        }
+      }
+    }
+
+    @include breakpoint('lg') {
+      .nsw-card__content > .nsw-material-icons {
+        left: calc(50% + #{rem(32px)});
+      }
+    }
+  }
 }
diff --git a/src/components/card/blank.hbs b/src/components/card/blank.hbs
@@ -15,6 +15,8 @@ model:
   card-news-1: ../../components/card/json/card-news-1.json
   card-news-2: ../../components/card/json/card-news-2.json
   card-news-3: ../../components/card/json/card-news-3.json
+  card-media-1: ../../components/card/json/card-media-1.json
+  card-media-2: ../../components/card/json/card-media-2.json
 ---
 {{#>_layout-container}}
 <div class="nsw-grid">
@@ -88,4 +90,19 @@ model:
     {{>_card model.card-news-1 highlight=true}}
   </div>
 </div>
+
+<div class="nsw-grid">
+  <div class="nsw-col nsw-col-lg-6">
+    {{>_card model.card-media-1 horizontal=true}}
+  </div>
+  <div class="nsw-col nsw-col-lg-6">
+    {{>_card model.card-media-2 horizontal=true theme="light"}}
+  </div>
+</div>
+
+<div class="nsw-grid">
+  <div class="nsw-col nsw-col-lg-6">
+    {{>_card model.card-media-1 horizontal=true highlight=true}}
+  </div>
+</div>
 {{/_layout-container}}
diff --git a/src/components/card/index.hbs b/src/components/card/index.hbs
@@ -19,6 +19,8 @@ model:
   card-news-1: ../../components/card/json/card-news-1.json
   card-news-2: ../../components/card/json/card-news-2.json
   card-news-3: ../../components/card/json/card-news-3.json
+  card-media-1: ../../components/card/json/card-media-1.json
+  card-media-2: ../../components/card/json/card-media-2.json
 ---
 
 
@@ -169,3 +171,22 @@ model:
   </div>
 </div>
 {{/_docs-example}}
+
+{{#>_docs-example separated="true"}}
+<div class="nsw-grid">
+  <div class="nsw-col nsw-col-lg-6">
+    {{>_card model.card-media-1 horizontal=true}}
+  </div>
+  <div class="nsw-col nsw-col-lg-6">
+    {{>_card model.card-media-2 horizontal=true theme="light"}}
+  </div>
+</div>
+{{/_docs-example}}
+
+{{#>_docs-example separated="true"}}
+<div class="nsw-grid">
+  <div class="nsw-col nsw-col-lg-6">
+    {{>_card model.card-media-1 horizontal=true highlight=true}}
+  </div>
+</div>
+{{/_docs-example}}