UI Component Code Gallery for React - by Mirado Andria

Image Text A

Picture with text.

Preview

Melon
Tasty melon

Sweet and yummy

Lemon
Citron Jaune

Sweet and yummy

Code

import styles from "./image-text-a.module.css";

type Props = {
  className?: string;
  imageSrc?: string;
  imageClassName?: string;
  alt?: string;
  textContent?: React.ReactNode;
  textAlignHorizontal?: "start" | "center" | "end";
  textAlignVertical?: "start" | "center" | "end";
  rounded?: "none" | "small" | "medium" | "large";
  // Put additional variants here, then define them in the CSS
  variant?: "default" | "dark";
};

export default function ImageTextA({
  className,
  imageSrc,
  imageClassName,
  alt,
  textContent,
  textAlignHorizontal,
  textAlignVertical,
  rounded,
  variant,
}: Props) {
  return (
    <div
      className={[
        className,
        styles["wrapper"],
        rounded && styles[`r-${rounded}`],
        variant && styles[`variant-${variant}`],
        textAlignHorizontal && styles[`th-${textAlignHorizontal}`],
        textAlignVertical && styles[`tv-${textAlignVertical}`],
      ].join(" ")}
    >
      <div className={styles["image-wrapper"]}>
        {/* If you use Next.js, replace 'img' with 'Image' element */}
        <img
          className={[styles["image"], imageClassName].join(" ")}
          src={imageSrc}
          alt={alt || "Image"}
          width={360}
          height={360}
          loading="lazy"
        />
      </div>
      {textContent && (
        <div className={styles["text-content"]}>
          <div className={styles["text-wrapper"]}>
            {typeof textContent === "string" ? (
              <p>{textContent}</p>
            ) : (
              <>{textContent}</>
            )}
          </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.
  • imageClassName (string): Specifies the CSS class of the image.
  • alt (string): Specifies the text that will be used as the alt attribute of the image.
  • textContent (string or ReactNode): Specifies the text content.
  • textAlignHorizontal ("start" | "center" | "end"): Specifies the horizontal alignment of the text.
  • textAlignVertical ("start" | "center" | "end"): Specifies the vertical alignment of the text.
  • rounded ("none" | "small" | "medium" | "large"): Specifies the border radius of the images.
  • variant ("default" | "dark" 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.
Sample CSS customization
.variant-dark{
    --fg-color: #424242;
}