Foil Card React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import FoilCard from "./FoilCard";

export default function Example() {
  return (
    <FoilCard
      children={"Objects of\nquiet distinction."}
      color={"#c2b6e5"}
      background={"#222027"}
      radius={22}
      strength={12}
      eyebrow={"COLLECTED / EDITION 009"}
      footer={"A study in light and material"}
    />
  );
}

Using Foil Card

Place your own content in children and set width or minHeight with style. The foil layer is decorative and does not block links or controls inside the card.

Keep strength subtle for readable content. The card returns to its resting position when the pointer leaves, and reduced motion disables its tilt.

Props

Name	Type	Required	Default	Description
children	ReactNode	No	undefined	Your card content, including nested markup.
footer	ReactNode	No	undefined	Optional footer content supplied by the caller.
eyebrow	ReactNode	No	undefined	Optional eyebrow content supplied by the caller.
color	string	No	"#c2b6e5"	Edge tint of the metallic card.
background	string	No	"#222027"	Base surface colour.
radius	number	No	22	Corner radius in pixels.
strength	number	No	12	Maximum pointer tilt range in degrees.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.