A card that floats on a shell with a matching corner radius. This is a custom component with no Base UI primitive. LayerCard.Root is a shell, and LayerCard.Inner is a card that floats on it with a matching corner radius.
Here is the component implementation code that you can copy to your project:
// https://devie-ui.com/components/layer-card
import clsx from "clsx";
import type React from "react";
import styles from "./LayerCard.module.scss";
function Root({ className, children, ...props }: LayerCard.Root.Props) {
return (
<div className={clsx(styles.root, className)} {...props}>
{children}
</div>
);
}
function Inner({ className, children, ...props }: LayerCard.Inner.Props) {
return (
<div className={clsx(styles.inner, className)} {...props}>
{children}
</div>
);
}
const LayerCard = {
Root,
Inner,
};
namespace LayerCard {
export namespace Root {
export interface Props extends React.HTMLAttributes<HTMLDivElement> {
className?: string;
}
}
export namespace Inner {
export interface Props extends React.HTMLAttributes<HTMLDivElement> {
className?: string;
}
}
}
export default LayerCard;Put one LayerCard.Inner inside LayerCard.Root.
Stack several LayerCard.Inner inside one LayerCard.Root. The gap between cards equals the shell padding.
Bare children are allowed. Put a title as a direct child of LayerCard.Root, then wrap the content in LayerCard.Inner.
Put the content in LayerCard.Inner, then add a bare paragraph below it for helper text or a secondary link.