UI Component Code Gallery for React - by Mirado Andria

Account Profile Lite A

Account information. It can be placed on the header bar.

Preview

Code

import styles from "./account-profile-lite-a.module.css";

type Props = {
  className?: string;
  imageSrc?: string;
  title?: string;
  description?: string;
};

export default function AccountProfileLiteA({
  className,
  imageSrc,
  title,
  description,
}: Props) {
  return (
    <div className={[styles["wrapper"], className].join(" ")}>
      <img
        className={[styles["image"], styles["square"]].join(" ")}
        src={imageSrc}
        alt={title}
        width={360}
        height={360}
        loading="lazy"
      />
      <div className={styles["body"]}>
        <div className={styles["b-content"]}>
          {(title || description) && (
            <div className={styles["b-text"]}>
              <div className={styles["text-content"]}>
                <h3 className={styles["title"]}>{title}</h3>
                {description && (
                  <div className={styles["desc"]}>
                    <p>{description}</p>
                  </div>
                )}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Design

Figma design file:

Documentation

Properties

Props of the component:

  • className (string): Specifies the CSS class of the element.
  • imageSrc (string): Specifies the URL of the image.
  • title (string or ReactNode): Specifies the text or element that will be used as the title.
  • description (string or ReactNode): Specifies the text or element that will be used as the description.
  • rounded ("none" | "small" | "medium" | "large"): Specifies the border radius of the frame.
  • actionIcon (ReactNode): Specifies the action icon element.
  • imageRounded ("default" | "none" | "small" | "medium" | "large"): Specifies the border radius of the image.
  • variant ("default" | "card" or a customized value): Specifies the color or theme variant of the component. See the "Sample CSS customization" below for an example of usage.
  • onClickAction (function): Fires when the action button is clicked.
Sample CSS customization
.variant-card {
    --bg-color: white;
    --padding: 0.5rem;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1),
        0px 2px 4px -1px rgba(0, 0, 0, 0.2);
}