Add Card component (#11)

* Add Card component * Change em to rem and uitlize padding and margins to position elements
CarletonComputerScienceSociety · Jun 30, 2022 · 4f44621 · 4f44621
1 parent 7af6533
commit 4f44621
Showing 1 changed file with 46 additions and 0 deletions.
diff --git a/src/components/Card.astro 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>