Component reference
Card
A composable surface for related content and actions.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Loading the interactive example?
Width adapts to the available space
"use client";
import { useState } from "react";
import {
Avatar,
Button,
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle
} from "@pimolu/react";
export function CardExample() {
const [saved, setSaved] = useState(false);
return (
<div className="space-y-6">
<Card appearance="outline" size="lg" fullWidth>
<CardHeader>
<Avatar name="Morgan Lee" />
<CardTitle className="mt-4">Room for a new idea.</CardTitle>
<CardDescription>
A considered starting point for your next product.
</CardDescription>
</CardHeader>
<CardContent>
<Button aria-pressed={saved} onClick={() => setSaved(!saved)}>
{
saved
? "Saved to your ideas"
: "Save this idea"
}
</Button>
</CardContent>
</Card>
</div>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Sizes
sm, md and lg scale the padding, the gap and the title.
Variants
The semantic tone consumed by the outline and soft appearances.
Appearances
Outline, soft, elevated and glass.
Usage
Use CardHeader, CardTitle, CardDescription and CardContent to establish hierarchy. Card owns its padding; avoid adding an unintended second padding layer.
A Card is a div, not an interactive control. Put a real Button or Link inside it for an action, and choose a suitable heading level with CardTitle's as prop.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluCardProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | undefined | "md" | Component size. |
variant | "primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefined | "neutral" | Variant exposed by this component. |
appearance | "soft" | "outline" | "glass" | "elevated" | undefined | "outline" | Visual treatment of the control or surface. |
fullWidth | boolean | undefined | false | Use the available width of the parent. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLDivElement> | undefined | — | Standard React/HTML attribute. |
size"sm" | "md" | "lg" | undefinedDefault: "md"
Component size.
variant"primary" | "secondary" | "neutral" | "success" | "warning" | "danger" | undefinedDefault: "neutral"
Variant exposed by this component.
appearance"soft" | "outline" | "glass" | "elevated" | undefinedDefault: "outline"
Visual treatment of the control or surface.
fullWidthboolean | undefinedDefault: false
Use the available width of the parent.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onChangeChangeEventHandler<HTMLDivElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLDivElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluCardHeaderProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLDivElement> | undefined | — | Standard React/HTML attribute. |
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onChangeChangeEventHandler<HTMLDivElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLDivElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluCardContentProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLDivElement> | undefined | — | Standard React/HTML attribute. |
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onChangeChangeEventHandler<HTMLDivElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLDivElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluCardFooterProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLDivElement> | undefined | — | Standard React/HTML attribute. |
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onChangeChangeEventHandler<HTMLDivElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLDivElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluCardTitleProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
as | "h2" | "h3" | "h4" | "h5" | "h6" | undefined | "h3" | Underlying element or component. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onChange | ChangeEventHandler<HTMLHeadingElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLHeadingElement> | undefined | — | Standard React/HTML attribute. |
as"h2" | "h3" | "h4" | "h5" | "h6" | undefinedDefault: "h3"
Underlying element or component.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onChangeChangeEventHandler<HTMLHeadingElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLHeadingElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluCardDescriptionProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
children | ReactNode | — | Standard React/HTML attribute. |
onChange | ChangeEventHandler<HTMLParagraphElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLParagraphElement> | undefined | — | Standard React/HTML attribute. |
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenReactNodeNo default extracted.
Standard React/HTML attribute.
onChangeChangeEventHandler<HTMLParagraphElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLParagraphElement> | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Use headings that match the surrounding document structure.
- Do not add click handlers to the card surface as a substitute for an accessible control.