video card component for docs card sections

Author: hmillersarah

ims-docs.html

@@ -65,6 +65,7 @@
     <link rel="stylesheet" href="wp-includes/css/nav.css" />
     <link rel="stylesheet" href="wp-includes/css/dropnav.css" />
     <link href="wp-includes/css/pages/docs.css" rel="stylesheet" />
+    <link rel="stylesheet" href="wp-includes/css/page.css" />
 
     <!-- Hotjar tracking code for ibm.com/demos & GitHub -->
     <script>
@@ -100,6 +101,9 @@
       src="web-components/hero-section/hero-section.js"
       type="module"></script>
     <script src="web-components/footer/footer.js" type="module"></script>
+    <script
+      src="web-components/video-card/video-card.js"
+      type="module"></script>
   </head>
 
   <!-- MASTHEAD_SITENAV_BEGIN -->
@@ -115,92 +119,36 @@
         desc="Find IMS™ and other IBM product documentation."></hero-section>
 
       <!-- =========================== Badges & Docs  =========================== -->
-      <div class="zs-gray-section zs-white-section docs-main">
-        <section class="zs-section pure-g">
-          <div class="pure-u-22-24 docs-card-g">
-            <!-- card 1 -->
-            <div class="ims-m-card docs-card-c">
-              <div class="pure-u-1 docs-card">
-                <div class="pure-u-1 docs-card-text">
-                  <h3>IMS Docs home</h3>
-                  <p>
-                    Start here to search across IMS or IBM product information.
-                  </p>
-                  <br />
-                  <a
-                    aria-label="Explore IMS Docs"
-                    title="IMS Docs home"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href="https://www.ibm.com/docs/en/ims/latest"
-                    >Explore →</a
-                  >
-                </div>
-              </div>
-            </div>
-
-            <!-- card 2 -->
-            <div class="ims-m-card docs-card-c">
-              <div class="pure-u-1 docs-card">
-                <div class="pure-u-1 docs-card-text">
-                  <h3>PDF documentation</h3>
-                  <p>Download PDF files of IMS documentation.</p>
-                  <br />
-                  <a
-                    aria-label="Explore the IMS Docs PDF files"
-                    title="IMS PDF documentation"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href="https://www.ibm.com/docs/en/ims/latest?topic=documentation-pdf-files-ims"
-                    >Explore →</a
-                  >
-                </div>
-              </div>
-            </div>
-
-            <!-- card 3 -->
-            <div class="ims-m-card docs-card-c">
-              <div class="pure-u-1 docs-card">
-                <div class="pure-u-1 docs-card-text">
-                  <h3>Release planning</h3>
-                  <p>
-                    See the latest continuous delivery product updates for IMS
-                    15 and later.
-                  </p>
-                  <br />
-                  <a
-                    aria-label="Explore the IMS release planning"
-                    title="IMS release planning"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href="https://www.ibm.com/docs/en/ims/latest?topic=release-planning-ims"
-                    >Explore →</a
-                  >
-                </div>
-              </div>
-            </div>
-
-            <!-- card 4 -->
-            <div class="ims-m-card docs-card-c">
-              <div class="pure-u-1 docs-card">
-                <div class="pure-u-1 docs-card-text">
-                  <h3>IMS tools</h3>
-                  <p>Start here to get information on all IMS tools.</p>
-                  <br />
-                  <a
-                    aria-label="Explore IMS tool"
-                    title="IMS Tools"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    href="https://www.ibm.com/docs/en/ims-tools"
-                    >Explore →</a
-                  >
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-      </div>
+      <section class="white-bg pure-g card-section">
+        <!-- IMS docs -->
+        <video-card
+          name="IMS Docs home"
+          desc="Start here to search across IMS or IBM product information."
+		  link="https://www.ibm.com/docs/en/ims/latest"
+          class="pure-u-1 pure-u-lg-1-2">
+        </video-card>
+        <!-- PDF docs -->
+        <video-card
+          name="PDF documentation"
+          desc="Download PDF files of IMS documentation."
+          link="https://www.ibm.com/docs/en/ims/latest?topic=documentation-pdf-files-ims"
+          class="pure-u-1 pure-u-lg-1-2">
+        </video-card>
+        <!-- Release planning -->
+        <video-card
+          name="Release planning"
+          desc="See the latest continuous delivery product updates for IMS 15 and later."
+          link="https://www.ibm.com/docs/en/ims/latest?topic=release-planning-ims"
+          class="pure-u-1 pure-u-lg-1-2">
+        </video-card>
+        <!-- IMS tools -->
+        <video-card
+          name="IMS tools"
+          desc="Start here to get information on all IMS tools."
+          link="https://www.ibm.com/docs/en/ims-tools"
+          class="pure-u-1 pure-u-lg-1-2">
+        </video-card>
+      </section>
     </main>
 
     <imscentral-footer></imscentral-footer>