Final fixes

components/EventCard.module.css

@@ -1,4 +1,4 @@
-.eventCard {
+.card {
   display: flex;
   flex-direction: row;
   max-width: 1000px;
@@ -6,21 +6,21 @@
   padding: 24px;
 }
 
-.eventCard aside {
+.card aside {
   flex: 0 0 144px;
   margin-right: 24px;
 }
 
-.eventCard aside img {
+.card aside img {
   width: 100%;
   margin-bottom: 16px;
 }
 
-.eventCard aside button {
+.registerButton {
   width: 100%;
 }
 
-.eventCardContent > h2 {
+.content > h2 {
   font-size: 24px;
   font-weight: 700;
   font-style: normal;
@@ -28,9 +28,9 @@
   margin-bottom: 0;
 }
 
-.eventCardContent,
-.eventCardContent > h3 {
-  color: var(--purple-1);
+.content,
+.content > h3 {
+  color: var(--purple-2);
   font-size: 14px;
   font-weight: 400;
   font-style: normal;
@@ -38,6 +38,6 @@
   margin-bottom: 14px;
 }
 
-.eventCardContent {
+.content {
   margin-bottom: 0;
 }

components/EventCard.tsx

@@ -3,7 +3,6 @@ import styles from "./EventCard.module.css";
 
 import { EventSetting } from "./EventSetting";
 import { Image } from "./Image";
-// import Button from ".Button"
 
 interface EventCardProps {
   name: string;
@@ -26,21 +25,21 @@ export function EventCard({
   children,
 }: EventCardProps) {
   return (
-    <section className={styles.eventCard}>
+    <article className={styles.card}>
       <aside>
         <Image alt={name} src={poster} />
-        {/*<Button />*/}
-        <button>
+        {/* TODO: use the <Button /> component */}
+        <button className={styles.registerButton}>
           <a href={registerLink}>Register</a>
         </button>
       </aside>
-      <article className={styles.eventCardContent}>
+      <section className={styles.content}>
         <h2>{name}</h2>
         <h3>
           <EventSetting date={date} online={online} location={location} />
         </h3>
         <div>{children}</div>
-      </article>
-    </section>
+      </section>
+    </article>
   );
 }

pages/playground.mdx

@@ -42,6 +42,7 @@ The `<EventCard />` component is used on the events page, and uses the
 <EventCardDemo />
 
 ---
+
 ## `<TeamMember />`
 
 The `<TeamMember />` component has an image of the team member along with their name and role.