Glass Frame C

Glass style frame.

Preview

Card Content

This is a sample text content

Card Content

This is a sample text content

Card Content

This is a sample text content

Code

import React from "react"; import styles from "./glass-frame-c.module.css"; type Props = { className?: string; children?: React.ReactNode; shadow?: "default" | "none" | "medium"; rounded?: "none" | "small" | "medium" | "large"; hoverAnimation?: "none" | "shadow"; overflow?: "initial" | "hidden"; // Put additional variants here, then define them in the CSS variant?: "default" | "dark" | "blue" | "flat"; }; export default function GlassC({ className, children, shadow, overflow, hoverAnimation, rounded = "medium", 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(" ")} > <div className={styles["glass-wrapper"]}>{children}</div> </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" | "dark" | "blue" | "flat" 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-blue { --bg-color: rgba(86, 127, 239, 0.1); --border-color: rgba(86, 127, 239, 0.25); --shadow-color: rgba(86, 127, 239, 0.17); }