UI Component Code Gallery for React - by Mirado Andria

Card Frame A

Card style frame.

Preview

Card Content

Card Content

Card Content

Code

import React from "react";
import styles from "./card-frame-a.module.css";

type Props = {
  className?: string;
  children?: React.ReactNode;
  shadow?: "default" | "none" | "medium";
  rounded?: "none" | "small" | "medium" | "large";
  overflow?: "initial" | "hidden";
  hoverAnimation?: "none" | "shadow";
  // Put additional variants here, then define them in the CSS
  variant?: "default" | "flat" | "blue";
};

export default function CardFrameA({
  className,
  children,
  shadow,
  overflow,
  hoverAnimation,
  rounded = "small",
  variant = "default",
}: Props) {
  return (
    <div
      className={[
        styles["wrapper"],
        styles[`of-${overflow}`],
        rounded && styles[`r-${rounded}`],
        shadow && styles[`sh-${shadow}`],
        hoverAnimation && styles[`ha-${hoverAnimation}`],
        styles[`variant-${variant}`],
        className,
      ].join(" ")}
    >
      {children}
    </div>
  );
}

Design

Figma design file:

Documentation

Properties

Props of the component:

  • className (string): Specifies the CSS class of the component.
  • title (string or ReactNode): Specifies the text that will be used as the title.
  • shadow ("default" | "small" | "medium"): Specifies the size of the shadow of the frame.
  • rounded ("none" | "small" | "medium" | "large"): Specifies the border radius of the frame.
  • hoverAnimation ("none" | "shadow" ): animation on hoverA.
  • variant ("default" | "flat" | "blue" 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-flat {
    --shadow-x: 0.5rem;
    --shadow-y: 0.5rem;
    --shadow-blur: 0px;
    --shadow-spread: 0px;
    --shadow-color: rgba(71, 73, 74, 0.5);
}