Card

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

Live Examples

Storybook: components-card--default

Storybook: components-card--with-footer

Storybook: components-card--interactive

Code Examples

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>
        <p>This is the content of the card.</p>
      </CardContent>
      <CardFooter>
        <p>Footer content</p>
      </CardFooter>
    </Card>
  )
}

With Buttons

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>
        <p>Product description and details.</p>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline">Read more</Button>
        <Button>Buy now</Button>
      </CardFooter>
    </Card>
  )
}

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>

Props

Card

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Card content
`className`	`string`	-	Additional CSS classes

CardHeader

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Header content
`className`	`string`	-	Additional CSS classes

CardTitle

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Title content
`className`	`string`	-	Additional CSS classes

CardDescription

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Description content
`className`	`string`	-	Additional CSS classes

CardContent

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Content
`className`	`string`	-	Additional CSS classes

CardFooter

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Footer content
`className`	`string`	-	Additional CSS classes

Skeleton Table