Hanging 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 HangingCard from "./HangingCard";

export default function Example() {
  return (
    <HangingCard
      eyebrow={"VISITOR / STUDIO 010"}
      children={"Good things\ntake shape."}
      footer={"DESIGN DEPARTMENT"}
      color={"#c5b29d"}
      background={"#e4dacb"}
      strapColor={"#777b92"}
      height={420}
      width={240}
      label={"Move card"}
      disabled={false}
    />
  );
}

Using Hanging Card

Drag the handle at the top of the badge to set it in motion. The left and right arrow keys also swing the card, and Home returns it to the centre.

Supply all badge content through children, eyebrow and footer. Reserve enough height for your content and leave room around the card for its swing.

Props

Name	Type	Required	Default	Description
children	ReactNode	No	undefined	Main badge content.
eyebrow	ReactNode	No	undefined	Optional small heading.
footer	ReactNode	No	undefined	Optional footer content.
color	string	No	"#c5b29d"	Footer divider colour.
background	string	No	"#e4dacb"	Badge surface colour.
strapColor	string	No	"#777b92"	Woven strap colour.
height	number \| string	No	420	Reserved height around the swinging card.
width	number	No	240	Badge width in pixels, limited to 70% of the available width.
label	string	No	"Move card"	Accessible drag-handle label.
disabled	boolean	No	false	Disable the drag handle.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.