Card

Example

Card Title

Card Description

Card content goes here.

"use client"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@strongtie/design-system/card"

export function CardDefault() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card Description</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card content goes here.</p>
      </CardContent>
    </Card>
  )
}

Examples

Create project

Deploy your new project in one-click.

Configure your project settings and deploy to production.

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@strongtie/design-system/card"

export function CardWithFooter() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy your new project in one-click.</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Configure your project settings and deploy to production.</p>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline">Cancel</Button>
        <Button>Deploy</Button>
      </CardFooter>
    </Card>
  )
}

With Header

Card Title

This is a card with only a header section. It displays a title and description.

"use client"

import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@strongtie/design-system/card"

export function CardWithHeader() {
  return (
    <Card className="w-[380px]">
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>
          This is a card with only a header section. It displays a title and
          description.
        </CardDescription>
      </CardHeader>
    </Card>
  )
}

Example

Card Title

Card Description

Card content goes here.

"use client"

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@strongtie/design-system/card"

export function CardDefault() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card Description</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card content goes here.</p>
      </CardContent>
    </Card>
  )
}

Examples

Create project

Deploy your new project in one-click.

Configure your project settings and deploy to production.

"use client"

import { Button } from "@strongtie/design-system/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@strongtie/design-system/card"

export function CardWithFooter() {
  return (
    <Card className="w-[350px]">
      <CardHeader>
        <CardTitle>Create project</CardTitle>
        <CardDescription>Deploy your new project in one-click.</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Configure your project settings and deploy to production.</p>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline">Cancel</Button>
        <Button>Deploy</Button>
      </CardFooter>
    </Card>
  )
}

With Header

Card Title

This is a card with only a header section. It displays a title and description.

"use client"

import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@strongtie/design-system/card"

export function CardWithHeader() {
  return (
    <Card className="w-[380px]">
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>
          This is a card with only a header section. It displays a title and
          description.
        </CardDescription>
      </CardHeader>
    </Card>
  )
}

Example

Install

Components

Props

Examples

With Footer

With Header

Card

Example

Install

Components

Props

Examples

With Footer

With Header