Notched 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 NotchedCard from "./NotchedCard";

export default function Example() {
  return (
    <NotchedCard
      eyebrow={"FIELD NOTES / 004"}
      children={"Objects with\na point of view."}
      footer={"An ongoing collection"}
      accent={"#dfb081"}
      background={"#29221c"}
      color={"#eee0ce"}
      notch={28}
      style={{
        "fontSize": 35
      }}
    />
  );
}

Using Notched Card

Supply the main content through children, with optional eyebrow and footer content. The card does not supply sample copy.

notch changes the corner cuts while accent colours the folded detail. Use style to fit the card's typography and width into your layout.

Props

Name	Type	Required	Default	Description
children	ReactNode	No	undefined	Your main card content.
eyebrow	ReactNode	No	undefined	Optional small label above the content.
footer	ReactNode	No	undefined	Optional footer content below the divider.
accent	string	No	"#dbad81"	Fold and detail colour.
background	string	No	"#24201d"	Card surface colour.
color	string	No	"#f1e5d6"	Text colour.
notch	number	No	25	Corner cut in pixels, clamped to 0–60.
className	string	No	""	Additional classes for the root element.
style	CSSProperties	No	undefined	Inline styles for caller-defined size, typography, and appearance.