diff --git a/components/TeamMemberCard.module.css b/components/TeamMemberCard.module.css new file mode 100644 index 00000000..86527d28 --- /dev/null +++ b/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; +} diff --git a/components/TeamMemberCard.tsx b/components/TeamMemberCard.tsx new file mode 100644 index 00000000..c1448147 --- /dev/null +++ b/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 ( +
{props.children}
+