diff --git a/src/components/Card.astro b/src/components/Card.astro
new file mode 100644
index 0000000..b13e335
--- /dev/null
+++ b/src/components/Card.astro
@@ -0,0 +1,46 @@
+---
+const { colour, title, description } = Astro.props;
+---
+
+<style define:vars={{ colour }}>
+* {
+  font-family: Helvetica, sans-serif;
+}
+
+div {
+  background-color: var(--colour);
+  border-radius: 0.3rem;
+  width: 30rem;
+  height: 15rem;
+}
+
+h1 {
+  padding-top: 2rem;
+  padding-left: 2rem;
+  font-weight: 300;
+}
+
+p {
+  padding-top: 0.25rem;
+  padding-left: 2rem;
+}
+
+button {
+  margin-top: 2.5rem;
+  margin-left: 2rem;
+  width: 5.5rem;
+  height: 2.5rem;
+  font-size: medium;
+  border-radius: 5rem;
+  border: 0rem solid black;
+  background-color: black;
+  color: white;
+  font-weight: 200;
+}
+</style>
+
+<div>
+  <h1>{title}</h1>
+  <p>{description}</p>
+  <button>Read</button>
+</div>
\ No newline at end of file