Team member B

A component that represents a person such as an employee, team member, or contact.

Preview

Code

import styles from "./team-member-b.module.css"; type SocialType = { icon?: React.ReactElement; title?: string; href?: string; showTitle?: boolean; }; type Props = { className?: string; imageSrc?: string; title: React.ReactNode; description?: React.ReactNode; href?: string; footerSocials?: SocialType[]; horizontalAlign?: "left" | "start" | "center" | "right" | "end"; rounded?: "none" | "small" | "medium" | "large" | "full"; variant?: "default" | "dark" | "card"; }; export default function TeamMemberB({ className, imageSrc, title, description, href, footerSocials, horizontalAlign = "center", rounded = "small", variant, }: Props) { return ( <div className={[ styles["wrapper"], styles[`r-${rounded}`], styles[`ha-${horizontalAlign}`], styles[`variant-${variant}`], className, ].join(" ")} > <div className={styles["image-wrapper"]}> {href ? ( /* You may need to replace the a tag with a Link if you use Next.js */ <a href={href}> {/* If you use Next.js, replace 'img' with 'Image' element */} <img className={[styles["image"], styles["square"]].join(" ")} src={imageSrc} alt={title?.valueOf()?.toString()} width={360} height={360} loading="lazy" /> </a> ) : ( /* If you use Next.js, replace 'img' with 'Image' element */ <img className={[styles["image"], styles["square"]].join(" ")} src={imageSrc} alt={title?.valueOf()?.toString()} width={360} height={360} loading="lazy" /> )} </div> <div className={styles["body"]}> {/* You may need to replace the a tag with a Link if you use Next.js */} <div className={styles["body-content"]}> <a href={href} className={styles["body-link"]}> <h3 className={styles["title"]}>{title}</h3> {description && ( <div className={styles["desc"]}> {typeof description === "string" ? ( <p>{description}</p> ) : ( <>{description}</> )} </div> )} </a> {footerSocials && ( <div className={styles["socials"]}> {footerSocials.map((social, index) => { return ( <a key={`social-${index}`} className={styles["social-link"]} title={social.title} href={social.href} > {social.showTitle && ( <div className={styles["text"]}>{social.title}</div> )} <div className={styles["icon"]}>{social.icon}</div> </a> ); })} </div> )} </div> </div> </div> ); }

Design

Figma design file:

Documentation

Properties

Props of the component:

  • className (string): Specifies the CSS class of the component.
  • imageSrc (string): Specifies the URL of the image.
  • title (string or ReactNode): Specifies the text or component that will be used as the title.
  • description (string or ReactNode): Specifies the text or component that will be used as the description.
  • href (string): Specifies the URL if the component is a link.
  • rounded ("none" | "small" | "medium" | "large" | "full"): Specifies the border radius of the image.
  • variant ("default" | "dark" | "card" or a customized value): Specifies the color or theme variant of the component. Check out the "Sample CSS customization" below for an example of how to use it.
  • footerSocials (array of SocialType): Specifies the social network links.
SocialType item arguments
  • icon (ReactNode): Specifies the action icon component.
  • title (string): Specifies the action title text.
  • href (string): Specifies the URL to the user profile.
  • showTitle (boolean): Show or hide title.
Sample CSS customization
.variant-card { --bg-color: white; --padding: 0.75rem; --body-margin-x: 0.5rem; --body-margin-y: 1rem; /* padding-bottom: calc(var(--body-margin-y) - var(--padding)); */ padding-bottom: var(--body-margin-y); box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.2); }