Add TeamMemberCard basic layout and styling

components/TeamMemberCard.module.css

@@ -0,0 +1,48 @@
+.card {
+  --name-size: 2.25rem;
+  --role-size: 1.5rem;
+
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: calc(var(--name-size) + 0.75rem) calc(var(--role-size) + 0.75rem) auto;
+  grid-template-areas:
+    "picture name"
+    "picture role"
+    "picture description";
+  column-gap: 1.875rem;
+  row-gap: 0.25rem;
+  justify-items: start;
+  align-items: start;
+
+  width: 53rem;
+}
+
+.picture {
+  grid-area: picture;
+  justify-self: center;
+
+  clip-path: circle(50%);
+}
+
+.name {
+  grid-area: name;
+  margin: 0;
+
+  color: var(--blue-1);
+  font-size: var(--name-size);
+  font-weight: 700;
+}
+
+.role {
+  grid-area: role;
+  margin: 0;
+
+  color: var(--purple-2);
+  font-size: var(--role-size);
+  font-weight: 600;
+}
+
+.description {
+  grid-area: description;
+  margin: 0;
+}

components/TeamMemberCard.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import Image from "next/image";
+import styles from "./TeamMemberCard.module.css";
+
+interface TeamMemberCardProps {
+  name: string;
+  role: string;
+  image?: string; // path to image of person, relative to public directory
+  children: React.ReactNode;
+}
+
+export function TeamMemberCard(props: TeamMemberCardProps) {
+  return (
+    <div className={styles.card}>
+      <Image
+        className={styles.picture}
+        src={
+          props.image !== undefined
+            ? props.image
+            : "/images/team-member-placeholder.svg"
+        }
+        width={126}
+        height={126}
+        alt={`Picture of ${props.name}`}
+      />
+      <h1 className={styles.name}>{props.name}</h1>
+      <h2 className={styles.role}>{props.role}</h2>
+      <p className={styles.description}>{props.children}</p>
+    </div>
+  );
+}

pages/playground.mdx

@@ -4,11 +4,13 @@ import {
   EventDescriptionCardDemo,
 } from "../components/playground";
 
+import { TeamMemberCard } from "../components/TeamMemberCard";
+
 # Playground
 
 ## `<MiniEventCard />`
 
-The `<MiniEventCard />` component has a collapsible description, and it is used 
+The `<MiniEventCard />` component has a collapsible description, and it is used
 on the events page. It uses the `<details>` tag and works without JS!
 
 <MiniEventCardDemo />
@@ -31,3 +33,16 @@ The `<EventDescriptionCard />` component is used on the home page, and uses the
 <EventDescriptionCardDemo />
 
 ---
+
+## `<TeamMemberCard />`
+
+The `<TeamMemberCard />` component is used on the "Meet the Team!" page to
+display information about the execs: prez, VP, trez, AVP, and syscom overlord.
+
+<TeamMemberCard name="Codey" role="Mascot">
+  The one, the only, Codey! Codey is ecstatic to be your mascot for this term.
+  Codey loves programming and playing on their laptop. You can often find Codey
+  posing for event promo graphics, or chilling in the CSC discord.
+</TeamMemberCard>
+
+---

public/images/team-member-placeholder.svg

@@ -0,0 +1,3 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="512" height="512" fill="#5CAFF9" fill-opacity="0.2"/>
+</svg>