add new tag to video card

Author: hmillersarah

ims-videos.html

@@ -177,7 +177,8 @@
             <div class="pure-u-1 card-section-header"><h3>IMS database</h3></div>
             <!-- Preparing IMS DB -->
             <card-tile 
-              name="A beginner’s guide to making an IMS database ready for use" 
+              new="true"
+              name="Making an IMS database ready for use" 
               desc="Learn how to prepare an IMS database by defining its metadata characteristics, allocating and initializing its data sets, and more."
               level="Beginner"
               time="6.6 hours"

web-components/card-tile/card-tile.css

@@ -74,6 +74,11 @@ a {
     margin: 0em;
 }
 
+/* New tag styling */
+.card-new {
+    font-weight: bold;
+}
+
 /* 1024px and above screen sizes */
 @media screen and (min-width: 64em) {
     /* Set consistent height for video card */

web-components/card-tile/card-tile.html

@@ -2,16 +2,17 @@
 <link href="web-components/card-tile/card-tile.css" rel="stylesheet">
 <div class="card">
     <div>
-    <h2 class="card-name"></h2>
-    <p class="card-desc"></p>
-    <div class="inline-g">
-        <p><b>Level: </b><span class="card-level"></span></p>
-        <p><b>Time: </b><span class="card-time"></span></p>
-    </div>
-    </div>
-    <div class="link-g">
-    <a class="card-link" target="_blank" rel="noopener noreferrer"></a>
-    <a class="card-link-2" target="_blank" rel="noopener noreferrer"></a>
-    <a class="card-link-3" target="_blank" rel="noopener noreferrer"></a>
+        <div class="card-new"></div>
+        <h2 class="card-name"></h2>
+        <p class="card-desc"></p>
+        <div class="inline-g">
+            <p><b>Level: </b><span class="card-level"></span></p>
+            <p><b>Time: </b><span class="card-time"></span></p>
+        </div>
+        </div>
+        <div class="link-g">
+        <a class="card-link" target="_blank" rel="noopener noreferrer"></a>
+        <a class="card-link-2" target="_blank" rel="noopener noreferrer"></a>
+        <a class="card-link-3" target="_blank" rel="noopener noreferrer"></a>
     </div>
 </div>

web-components/card-tile/card-tile.js

@@ -66,7 +66,7 @@ function createComponent(html) {
          * @returns {Array} An array of property names.
         */
         static get observedAttributes() {
-            return ['cardtype', 'name', 'desc', 'level', 'time', 'link', 'linktext', 'link2', 'linktext2', 'link3', 'linktext3'];
+            return ['cardtype', 'name', 'desc', 'level', 'time', 'link', 'linktext', 'link2', 'linktext2', 'link3', 'linktext3', 'new'];
         }
 
         /**
@@ -99,6 +99,8 @@ function createComponent(html) {
                     break;
             } 
 
+            // Display new tag
+            if (this.new === "true") {setContent('.card-new', "New!", shadow)}; 
             // Set card name
             setContent('.card-name', this.name, shadow);
             // Set card desc