1 files changed, 51 insertions, 0 deletions
diff --git a/docs/src/components/Examples/CardLink.tsx b/docs/src/components/Examples/CardLink.tsx
new file mode 100644
index 000000000..f17ee724f
--- /dev/null
+++ b/docs/src/components/Examples/CardLink.tsx
@@ -0,0 +1,51 @@
+import { JSX } from '@babel/types';
+import type { Component } from 'preact';
+import { h, Fragment } from 'preact';
+import { useRef } from 'preact/hooks';
+
+export type CardLinkProps ={
+    href:string
+    name:string
+    children:JSX | JSX[]
+}
+
+const CardLink:Component<CardLinkProps>=({href,name,children}:CardLinkProps):JSX.Element=>{
+    const Card = useRef(null)
+    /**
+     * Set Title Attribute when Hovering over Card
+     * @param e - Mouse Enter Event
+     */
+    function handleOnMouseEnter(e){
+        const cardBody = Card.current.querySelector('.card-body')
+        const cardThumb = Card.current.querySelector('.icon-image')
+        const cardImg = Card.current.querySelector('.heroImg')
+
+        if(e.target === cardBody || e.target === cardThumb || e.target === cardImg ) {
+            e.target.setAttribute('title',`Click to find out more about our ${name} template`)
+        }
+    
+        
+    }
+    /**
+     * Click Link Card to Page
+     * @param e - Click Event
+     * @returns new window location
+     */
+    function handleOnClick(e){
+        const card = e.target
+        const mainLink = card.querySelector('.main-link')
+        const clickableArea = ['.card-body','.icon-image','.heroImg']
+        for(let area of clickableArea){
+            if(e.currentTarget.classList.contains(area)) {
+                return mainLink.click()
+            }
+        }
+    }
+    return(
+        <div  ref={Card} onClick={handleOnClick} onMouseOver={handleOnMouseEnter} aria-label={`Clickable Card taking you directly to the ${name} template`} tabIndex="0">
+            {children}
+        </div>
+    )
+}
+
+export default CardLink
+\ No newline at end of file