Card

Card is a flexible container component for grouping related content and actions.

Cards are versatile UI components that organize information into digestible sections. They typically contain a header with title and description, main content area, and optional footer for actions. Cards help create visual hierarchy and group related information together, making interfaces more scannable and organized.

Cards support various layouts and can be composed with CardHeader, CardTitle, CardDescription, CardContent, and CardFooter subcomponents to create structured content presentations. Use cards to encapsulate distinct pieces of content or functionality, such as user profiles, product listings, settings panels, or dashboard widgets.

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>
  )
}

Installation


npm install @strongtie/design-system

import { Card } from "@strongtie/design-system/card"

Components

This module exports the following components:

Card
CardHeader
CardFooter
CardTitle
CardAction
CardDescription
CardContent

Props

All components accept standard HTML attributes and React props.

Examples

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>
  )
}

With Footer

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>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

card
card-action
card-content
card-description
card-footer
card-header
card-title

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Calendar Carousel

On This Page

Example Installation Components Props Examples With Footer With Header Styling Classes Accessibility

Contribute

Card

Card is a flexible container component for grouping related content and actions.

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>
  )
}

Installation


npm install @strongtie/design-system

import { Card } from "@strongtie/design-system/card"

Components

This module exports the following components:

Card
CardHeader
CardFooter
CardTitle
CardAction
CardDescription
CardContent

Props

All components accept standard HTML attributes and React props.

Examples

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>
  )
}

With Footer

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>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

card
card-action
card-content
card-description
card-footer
card-header
card-title

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Calendar Carousel

On This Page

Example Installation Components Props Examples With Footer With Header Styling Classes Accessibility

Contribute