#Card

A container for displaying content with an optional header, cover, and actions.

#When to Use

• To group related information in a box
• For product listings, profile cards, or summaries
• When content needs a header with title and actions

#Import

import { Card } from "orizon";

#Examples

#Basic

<Card title="Card Title" extra={<a href="#">More</a>} style={{ width: 300 }}>
  <p>Card content</p>
  <p>More card content</p>
</Card>

#No Border

<Card title="No Border" bordered={false} style={{ width: 300 }}>
  <p>Card without border</p>
</Card>

#Hoverable

<Card hoverable style={{ width: 240 }}>
  <Card.Meta title="Hoverable Card" description="Hover to see the effect" />
</Card>

#Loading

<Card loading title="Loading Card" style={{ width: 300 }}>
  Content is loading...
</Card>

#With Actions

<Card
  title="Card with Actions"
  style={{ width: 300 }}
  actions={[<span key="edit">Edit</span>, <span key="delete">Delete</span>]}
>
  <p>Card content with action bar</p>
</Card>

#API

#CardProps

• title — ReactNode — Card header title
• extra — ReactNode — Extra content in header (e.g., links)
• cover — ReactNode — Cover image at top
• actions — ReactNode[] — Action list at bottom
• bordered — boolean — Show border (default: true)
• hoverable — boolean — Lift on hover (default: false)
• loading — boolean — Show skeleton placeholder (default: false)
• size — "default" | "small" — Card size (default: "default")
• type — "inner" — For nested cards
• bodyStyle — CSSProperties — Body container styles
• headStyle — CSSProperties — Header styles

#Card.Meta Props

• title — ReactNode — Meta title
• description — ReactNode — Meta description
• avatar — ReactNode — Avatar element