Card component is a container for text, photos, and actions in the context of a single subject.
Experiment with all the properties of the Card component in real time.
Configuration for the card header.
Configuration for the card actions.
Main content of the card.
Configuration for the card image.
Defines the visual style of the card.
Controls the overall card size.
Controls the roundness of the corners.
Card Description
import { Card } from "lambda-ui-components";
export default function App() {
return (
<Card
header={{ title: "Card Title", description: "Card Description" }}
image={{ src: "image-url.jpg", alt: "Image Alt" }}
>
<p>This is the main content of the card.</p>
</Card>
);
}Prop | Default | Type |
|---|---|---|
image | undefined | ICardImage |
header | undefined | ICardHeader |
actions | undefined | ICardActions[] |
variant | "solid" | "solid" | "outline" | "soft" |
size | "medium" | "small" | "medium" | "large" |
radius | "medium" | "none" | "tiny" | "small" | "medium" | "large" | "full" |
children | undefined | ReactNode |