diff --git a/card/card.css b/card/card.css
new file mode 100644
index 0000000..d5301bf
--- /dev/null
+++ b/card/card.css
@@ -0,0 +1,94 @@
+@import url(../style.css);
+@import url(../badge/badge.css);
+
+.card {
+    display: flex;
+    flex-direction: column;
+    width: 15rem;
+    border: 1px solid black;
+    border-radius: .25rem;
+    background-color: var(--bg-cus);
+}
+
+.card-title {
+    border-bottom: 1px solid black;
+    padding: 0.5rem;
+    font-weight: bold;
+
+}
+
+.card-body {
+    padding: 0.5rem;
+}
+
+.card-title.dismiss {
+    display: flex;
+    align-items: center;
+}
+
+.card-title.dismiss img {
+    width: 2rem;
+    margin-left: auto;
+}
+
+.card-title.dismiss img:hover {
+    cursor: pointer;
+}
+
+.card-with-image {
+    width: fit-content;
+}
+
+.card-img img {
+    border-radius: .25rem;
+}
+
+.card-with-image .card-title {
+    border: none;
+}
+
+.horizontal {
+    display: flex;
+    flex-flow: row;
+}
+
+.card-with-image.horizontal {
+    height: 150px;
+    width: 30rem;
+}
+
+.card-side-body {
+    display: flex;
+    flex-direction: column;
+}
+
+.vertical {
+    width: min-content;
+}
+
+.text-overlay {
+    width: min-content;
+}
+
+.text-overlay .card-title {
+    padding: 0;
+    margin: 0;
+}
+
+.text-overlay .card-title {
+    position: relative;
+}
+
+.text-overlay .card-overlay-title {
+    position: absolute;
+    bottom: 1rem;
+    padding: 0.5rem;
+}
+
+.card-with-badge {
+    position: relative;
+}
+
+.shadow {
+    filter: drop-shadow(0 0 0.25rem black);
+}
\ No newline at end of file
diff --git a/card/card.html b/card/card.html
new file mode 100644
index 0000000..c8071e4
--- /dev/null
+++ b/card/card.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>card</title>
+    <link rel="stylesheet" href="card.css">
+    <style>
+
+        /* ONLY FOR DISPLAY PURPOSES. NOT PART OF COMPONENT */
+
+        body {
+            margin: 2rem;
+            display: inline-flex;
+            flex-flow: row wrap;
+        }
+
+        body > div {
+            margin: 2rem;
+        }
+
+    </style>
+        <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
+<body>
+    
+    <div class="card">
+
+        <div class="card-title">
+            Text only Card
+        </div>
+
+        <div class="card-body">
+            <p>
+                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita, dicta!
+            </p>
+        </div>
+
+    </div>
+
+    <div class="card card-with-badge">
+
+        <div class="card-title">
+            Card with Badge
+        </div>
+
+        <div class="card-body">
+            <p>
+                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita, dicta!
+            </p>
+        </div>
+
+        <span class="badge blue">5</span>
+
+    </div>
+
+    <div class="card">
+
+        <div class="card-title dismiss">
+            Card with dismiss
+            <img src="close_black_24dp.svg" alt="close button">
+        </div>
+
+        <div class="card-body">
+            <p>
+                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Expedita, dicta!
+            </p>
+        </div>
+
+    </div>
+
+
+    <div class="card card-with-image">
+
+        <div class="card-img">
+            <img src="https://picsum.photos/300/150" alt="card image">
+        </div>
+
+        <div class="card-title">
+            Card with Image
+        </div>
+
+        <div class="card-body">
+            Lorem ipsum dolor sit amet.
+        </div>
+
+    </div>
+
+    <div class="card card-with-image shadow">
+
+        <div class="card-img">
+            <img src="https://picsum.photos/300/150" alt="card image">
+        </div>
+
+        <div class="card-title">
+            Card with Shadow
+        </div>
+
+        <div class="card-body">
+            Lorem ipsum dolor sit amet.
+        </div>
+
+    </div>
+
+    <div class="card card-with-image horizontal">
+
+        <div class="card-img">
+            <img src="https://picsum.photos/150/150" alt="card image">
+        </div>
+
+        <div class="card-side-body">
+
+            <div class="card-title">
+                Horizontal Card
+            </div>
+
+            <div class="card-body">
+                Lorem ipsum dolor sit Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, doloremque? amet consectetur adipisicing elit. Perspiciatis, odio.
+            </div>
+        </div>
+
+    </div>
+
+    <div class="card card-with-image vertical">
+
+        <div class="card-img">
+            <img src="https://picsum.photos/200/300" alt="card image">
+        </div>
+
+        <div class="card-title">
+            Vertical/Standard Card
+        </div>
+
+        <div class="card-body">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, necessitatibus?
+        </div>
+
+    </div>
+
+    <div class="card card-with-image text-overlay">
+
+        <div class="card-title">
+            <div class="card-img">
+            <img src="https://picsum.photos/300/150" alt="card image">
+            </div>
+            <div class="card-overlay-title">
+                Text Overlay
+            </div>
+        </div>
+
+        <div class="card-body">
+            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Similique, eaque.
+        </div>
+        
+
+    </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/card/close_black_24dp.svg b/card/close_black_24dp.svg
new file mode 100644
index 0000000..5f1267d
--- /dev/null
+++ b/card/close_black_24dp.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>
\ No newline at end of file
