Add TeamMemberCard basic layout and styling
This commit is contained in:
parent
8a9935ba27
commit
88b0522ea2
|
@ -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;
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -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>
|
||||
|
||||
---
|
||||
|
|
|
@ -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>
|
After Width: | Height: | Size: 174 B |
Loading…
Reference in New Issue