Card

The Card component provides you with content cards and layout components.

Import

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@nostromo/ui-core'
// or
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@nostromo/ui-core/card'

Usage

import { Card, CardHeader, CardTitle, CardContent } from '@nostromo/ui-core'
 
export default function Example() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
      </CardHeader>
      <CardContent>
        <p>Card content goes here</p>
      </CardContent>
    </Card>
  )
}

Live Examples

Live Example

☀️

Copy

Storybook →

View Code

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@nostromo/ui-core' export default function CardExample() { return ( <Card> <CardHeader> <CardTitle>Card Title</CardTitle> <CardDescription>Brief description of the content</CardDescription> </CardHeader> <CardContent>...

With Buttons

Live Example

☀️

Copy

Storybook →

View Code

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Button } from '@nostromo/ui-core' export default function CardWithButtons() { return ( <Card> <CardHeader> <CardTitle>Product</CardTitle> <CardDescription>An amazing product</CardDescription> </CardHeader> <CardContent>...

Accessibility

Semantic HTML

Card: Uses semantic <div> element
CardHeader: Uses semantic <div> element for header content
CardTitle: Uses semantic <h3> element for titles
CardDescription: Uses semantic <p> element for descriptions
CardContent: Uses semantic <div> element for main content
CardFooter: Uses semantic <div> element for footer content

Screen Reader Support

Title hierarchy: CardTitle uses proper heading level
Content structure: Clear content hierarchy for screen readers
Descriptive text: CardDescription provides context

Examples

// Accessible card with proper structure
<Card>
  <CardHeader>
    <CardTitle>Product Information</CardTitle>
    <CardDescription>Details about this product</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Product description and features.</p>
  </CardContent>
  <CardFooter>
    <Button>Learn More</Button>
  </CardFooter>
</Card>

Best Practices

Do ✅

Use CardTitle for semantic heading structure
Provide CardDescription for context
Use CardFooter for actions and metadata
Keep card content focused and scannable
Use proper heading hierarchy (CardTitle should be h3 if inside a section with h2)

Don't ❌

Don't skip CardTitle - always provide a title
Don't nest cards unnecessarily
Don't use cards for simple containers (use divs instead)
Don't forget responsive design for card grids

Props

All Card components extend standard HTML attributes and accept:

Prop	Type	Default	Required	Description
`className`	`string`	`undefined`	No	Additional CSS classes
`children`	`React.ReactNode`	`undefined`	No	Component content

Component-Specific Props

Card: Extends React.HTMLAttributes<HTMLDivElement>
CardHeader: Extends React.HTMLAttributes<HTMLDivElement>
CardTitle: Extends React.HTMLAttributes<HTMLHeadingElement> (renders as <h3>)
CardDescription: Extends React.HTMLAttributes<HTMLParagraphElement> (renders as <p>)
CardContent: Extends React.HTMLAttributes<HTMLDivElement>
CardFooter: Extends React.HTMLAttributes<HTMLDivElement>

All components accept standard HTML attributes for their respective elements (e.g., id, data-*, aria-*).

Skeleton Table