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,
|
EventDescriptionCardDemo,
|
||||||
} from "../components/playground";
|
} from "../components/playground";
|
||||||
|
|
||||||
|
import { TeamMemberCard } from "../components/TeamMemberCard";
|
||||||
|
|
||||||
# Playground
|
# Playground
|
||||||
|
|
||||||
## `<MiniEventCard />`
|
## `<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!
|
on the events page. It uses the `<details>` tag and works without JS!
|
||||||
|
|
||||||
<MiniEventCardDemo />
|
<MiniEventCardDemo />
|
||||||
|
@ -31,3 +33,16 @@ The `<EventDescriptionCard />` component is used on the home page, and uses the
|
||||||
<EventDescriptionCardDemo />
|
<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