Image Frame C

Two pictures layout.

Preview

Cool imageCool image
Cool imageCool image

Code

import React from "react"; import styles from "./image-frame-c.module.css"; type Props = { className?: string; alt: string; imgMainSrc: string; imgBottomSrc?: string; rounded?: "none" | "small" | "medium" | "large"; }; export default function ImageFrameC({ className, alt, imgMainSrc, imgBottomSrc, rounded = "small", }: Props) { return ( <div className={[styles["wrapper"], className].join(" ")}> <figure className={styles["image-wrapper"]}> {/* If you use Next.js, replace 'img' with 'Image' element */} <img className={[styles["image-main"], styles[`r-${rounded}`]].join(" ")} src={imgMainSrc} alt={alt} width={360} height={360} /> <img className={[styles["image-bottom"], styles[`r-${rounded}`]].join(" ")} src={imgBottomSrc} alt={alt} width={360} height={360} /> </figure> </div> ); }

Design

Figma design file:

Documentation

Properties

Props of the component:

  • className (string): Specifies the CSS class of the component.
  • alt (string): Specifies the text that will be used as the alt attribute of the image.
  • imgMainSrc (string): Specifies the URL of the main image.
  • imgBottomSrc (string): Specifies the URL of the image at bottom.
  • rounded ("none" | "small" | "medium" | "large"): Specifies the border radius of the images.