Fix minor card bugs

nice-digital · Dec 8, 2017 · b1dd36f · b1dd36f
1 parent 59dfcf9
commit b1dd36f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 18 deletions.
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
@@ -14,10 +14,6 @@
   padding: em($spacing-small 0);
   position: relative;
 
-  &:hover a {
-    text-decoration: underline;
-  }
-
   &__heading {
     @include font-size(0);
     font-weight: bold;
@@ -26,6 +22,10 @@
     a {
       text-decoration: none;
 
+      &:hover {
+        text-decoration: underline;
+      }
+
       &:before {
         content: '';
         display: block;
@@ -51,21 +51,20 @@
   &__metadata {
     @include font-size(-1);
     color: $colour-nice-dark-grey;
+    display: inline-block;
     margin: em($spacing-x-small 0 0);
-    overflow: hidden;
-
-    dt {
-      display: inline-block;
-      margin: em(0 $spacing-x-small 0 0);
-    }
-    dd {
-      display: inline-block;
-      margin: em(0 $spacing-medium 0 0);
-    }
+    position: relative;
+    z-index: 1;
   }
 
   &__metadatum {
     display: block;
+    margin: em(0 $spacing-medium 0 0);
+
+    dt, dd {
+      display: inline-block;
+      margin: 0;
+    }
   }
 
   @include mq($from: sm) {

diff --git a/src/components/card/card.njk b/src/components/card/card.njk
@@ -3,15 +3,15 @@
 {% macro card(card) %}
 	<article class="card">
 		<header class="card__header">
-			<h{{ (card.heading.level if card.heading.level else "4") }} class="card__heading">
+			<h{{ (card.heading.level if card.heading.level else "3") }} class="card__heading">
 				<a href="{{ card.href }}">
 					{% if card.heading.icon %}
 						<span class="card__icon icon icon--{{ card.heading.icon }}" aria-hidden="false"></span>
 					{% endif %}
 
 					{{ card.heading.text }}
 				</a>
-			</h{{ card.heading.level if card.heading.level else "4" }}>
+			</h{{ card.heading.level if card.heading.level else "3" }}>
 		</header>
 		{% if card.metadata %}
 			<dl class="card__metadata">
@@ -20,15 +20,15 @@
 						<dt>
 							{{ tag({ className: "card__tag", label: card.tag.label, modifier: card.tag.modifier }) }}
 						</dt>
-						<dt class="visually-hidden">Yes</dt>
+						<dd class="visually-hidden">Yes</dd>
 					</div>
 				{% elif card.tags %}
 					{% for t in card.tags %}
 						<div class="card__metadatum">
 							<dt>
 								{{ tag({ className: "card__tag", label: t.label, modifier: t.modifier }) }}
 							</dt>
-							<dt class="visually-hidden">Yes</dt>
+							<dd class="visually-hidden">Yes</dd>
 						</div>
 					{% endfor %}
 				{% endif %}