Card F

Card layout representing an item with image and text.

Preview

Code

import styles from "./card-f.module.css"; type Props = { className?: string; children?: React.ReactNode; imageSrc?: string; title?: React.ReactNode; href?: string; icon?: React.ReactNode; viewText?: string; viewIcon?: React.ReactNode; type?: "link" | "button"; rounded?: "none" | "small" | "medium" | "large"; aspect?: "auto" | "square"; horizontalAlign?: "left" | "start" | "center" | "right" | "end"; verticalAlign?: "top" | "center" | "bottom"; // Put additional variants here, then define them in the CSS variant?: "default" | "gradient-orange"; onClick?: () => void; }; export default function CardF({ children, className, imageSrc, title, href, icon, viewText, viewIcon, type = "link", rounded = "medium", aspect = "auto", horizontalAlign = "center", verticalAlign = "center", variant, onClick, }: Props) { const contentProps = { title, imageSrc, icon, viewText, viewIcon }; return ( <div className={[ styles["wrapper"], styles[`ar-${aspect}`], styles[`r-${rounded}`], styles[`va-${verticalAlign}`], styles[`ha-${horizontalAlign}`], styles[`variant-${variant}`], className, ].join(" ")} > {(href || type === "link") && ( <a href={href} className={styles["link-type"]}> <Content {...contentProps}>{children}</Content> </a> )} {type === "button" && ( <button type="button" className={styles["button-type"]} onClick={onClick} > <Content {...contentProps}>{children}</Content> </button> )} </div> ); } function Content({ children, title, imageSrc, icon, viewText, viewIcon }: Props) { return ( <> <div className={styles["content"]}> {/* If you use Next.js, replace 'img' with 'Image' element */} {imageSrc && ( <img className={[styles["image"]].join(" ")} src={imageSrc} alt={title?.valueOf()?.toString()} width={360} height={360} loading="lazy" /> )} {/* You can replace this content */} {icon && <div className={styles["icon-wrapper"]}>{icon}</div>} {title && <h4 className={styles["title"]}>{title}</h4>} {children && <div className={styles["desc"]}>{children}</div>} </div> {(viewText || viewIcon) && ( <footer className={styles["footer"]}> {/* You may need to replace the a tag with a Link if you use Next.js */} <div className={styles["footer-view"]}> {viewText && ( <span className={styles["view-text"]}>{viewText}</span> )} {viewIcon && ( <span className={styles["view-icon"]}>{viewIcon}</span> )} </div> </footer> )} </> ); }

Design

Figma design file:

Documentation

Properties

Props of the component:

  • className (string): Specifies the CSS class of the component.
  • children (ReactNode): React children of the component. Specifies the ReactNode placed inside 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.
  • href (string): Specifies the URL if the component is a link.
  • icon (ReactNode): Specifies the icon component.
  • viewText (string): Specifies the text of the view button.
  • viewIcon (ReactNode): Specifies the icon of the view button.
  • type ("button" | "link"): Specifies the type of the component.
  • rounded ("none" | "small" | "medium" | "large"): Specifies the border radius of the frame.
  • horizontalAlign ("left" | "start" | "center" | "right" | "end"): Specifies the horizontal alignment.
  • verticalAlign ("top" | "center" | "bottom"): Specifies the vertical alignment.
  • variant ("default" | "gradient-orange" 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.
  • onClick (function): Fires when component is clicked.
Sample CSS customization
.variant-gradient-orange { --fg-color: #ffffff; --bg-color: #fa7d2a; } .variant-gradient-orange .content { background: linear-gradient(to top right, #e64441, #fece36); }