🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Card

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.

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
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.

Component Slots

The following data attributes are used to identify component parts:

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

Additional Classes

Other CSS classes used by this component:

card
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 Component Slots Additional Classes Accessibility

Contribute

Card

A flexible container component for grouping related content and actions.

Cards support various layouts and can be composed with CardHeader, CardTitle, CardDescription, CardContent, and CardFooter subcomponents to create structured content presentations.

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
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.

Component Slots

The following data attributes are used to identify component parts:

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

Additional Classes

Other CSS classes used by this component:

card
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 Component Slots Additional Classes Accessibility

Contribute