Cards / React + CSS
Reveal card
Layered artwork opens on hover to reveal a project’s next step.
"use client";
import styles from "./RevealCard.module.css";
export default function RevealCard({
title = "From idea to interface",
label = "Product design",
href = "/resources/guides/design-to-code-workflow/",
}) {
return (
<a href={href} className={styles.root}>
<div className={styles.art} aria-hidden="true">
<div className={styles.sheet}>
<i />
<i />
<div>
<b />
<b />
<b />
</div>
</div>
<div className={styles.chip}>Aa</div>
<div className={styles.swatch} />
</div>
<div className={styles.footer}>
<span>{label}</span>
<h3>{title}</h3>
<div className={styles.reveal}>
Explore the workflow <span aria-hidden="true">↗</span>
</div>
</div>
</a>
);
}
Make it yours
Use a reveal card for a project or resource preview. Keep the action and title readable at rest so touch users do not need to discover a hover state.
- Use a React project with CSS Modules support, such as Next.js or Vite.
- Save the JSX as
RevealCard.jsxand the CSS asRevealCard.module.cssin the same folder. - Import
RevealCardand connect its props to your application. Controlled components need parent state and change handlers.
No third-party component or animation package is required. Use the theme controls to adjust accent, corners, spacing, and type. Copy the Theme CSS into your stylesheet and wrap your components in <div className="tdp-components">. The theme applies to every component inside that wrapper. TDP defaults work without a theme file.
Props
| Prop | Type | Use |
|---|---|---|
title | string | Project or resource title. |
label | string | Category label. |
href | string | Destination for the card. |
Accessibility & behavior
The artwork is hidden from assistive technology. The native link has a visible focus ring. Hover and keyboard focus produce equivalent movement.
Visible focus styles and reduced-motion support are included. Check labels, contrast, keyboard behavior, and screen-reader output again after adapting the component to your product.