Tulip Logo IconTulip
Components

Card

Displays a card with header, content, and footer.

Login to your account
Enter your email below to login to your account

Forgot your password?

Usage

import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@tulip-systems/core/components";
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
    <CardAction>Card Action</CardAction>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>

Examples

Size

Use the size="sm" prop to set the size of the card to small. The small size variant uses smaller spacing.

Small Card
This card uses the small size variant.

The card component supports a size prop that can be set to "sm" for a more compact appearance.

Image

Add an image before the card header to create a card with an image.

Event cover

Featured

Design systems meetup

A practical talk on component APIs, accessibility, and shipping faster.

Calendar

A calendar component that allows users to select a date or a range of dates.

Carousel

A carousel with motion and swipe built using Embla.

On this page

UsageExamplesSizeImage