Card
The Card component is a simple container for content. It's designed to be used as a container for other components. If you want a container component without a border or other styling, you can use the Container, Row, or Column components instead.
See all the examples and details in the Storybook.
Usage
tsx
import { Card } from "@samgl/graffiti-ui";
const MyCard = () => {
return (
<Card>
<Heading $level={3}>Card Title</Heading>
<Text>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
convallis sed libero vitae rutrum. Vivamus porta, ipsum pellentesque
commodo gravida, risus elit efficitur tortor, at laoreet lacus diam
vitae risus. Donec id erat aliquam, bibendum justo sed, faucibus
risus.
</p>
</Text>
</Card>
);
};
Props
Prop | Type | Default | Optional | Description |
---|---|---|---|---|
children | ReactNode | ❌ | The content of the Card. | |
className | string | ✅ | The class name of the component, generally used when extending the component with a styled component. |