Card

A flexible container component for displaying content in a card layout.

Installation

npm install fuyukaki-ui

Usage

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter
} from 'fuyukaki-ui'

function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>Card description</CardDescription>
      </CardHeader>
      <CardContent>
        <p>Card content goes here</p>
      </CardContent>
      <CardFooter>
        <Button>Action</Button>
      </CardFooter>
    </Card>
  )
}

Examples

Simple Card

A basic card with header and content

This is the card content area where you can place any content.

Card with Footer

Includes action buttons

Cards can include footer sections for actions.

Components

ComponentDescription
CardMain container component
CardHeaderHeader section of the card
CardTitleTitle text in the header
CardDescriptionDescription text in the header
CardContentMain content area
CardFooterFooter section for actions