Skip to content

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

PropTypeDefaultOptionalDescription
childrenReactNodeThe content of the Card.
classNamestringThe class name of the component, generally used when extending the component with a styled component.