Card

Import

import { Card } from "@sugarcoat/ui-nxt";

Usage

<Card>
<Card.Header>
  <Card.Title>Card Title</Card.Title>
</Card.Header>
<Card.Content>Card content</Card.Content>
</Card>

Basic Usage#

A simple card with content.

Basic Card

Anatomy#

The Card component uses a compound component pattern:

<Card>
  <Card.Cover />       {/* Optional image/media area */}
  <Card.Header>        {/* Header section */}
    <Card.Title />     {/* Card title */}
    <Card.Meta />      {/* Metadata/subtitle */}
  </Card.Header>
  <Card.Content />     {/* Main content area */}
  <Card.Footer />      {/* Footer with actions */}
</Card>

With Cover Image#

Cards can include a cover image area.

With Cover

Sizes#

Cards come in three sizes: sm, md (default), and lg.

Small

Medium

Large

Variants#

Different visual styles for various contexts.

Default

Glass

Active

Ghost

Shadow#

Control the shadow depth with none, sm, md (default), or lg.

Shadows

Border Radius#

Control corner rounding with none, sm, md (default), or lg.

Border Radius

Layout#

Cards support vertical (default) and horizontal layouts.

Vertical Layout

Horizontal Layout

Interactive#

Make cards clickable with hover effects.

Interactive

Full Width#

Use block to make the card span the full width of its container.

Block

Cover Inset#

Control whether the cover image has inset margins or extends to edges.

Inset Cover

Edge-to-Edge Cover

Props#

Card (Root)#

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	Size of the card
variant	"default" \| "glass" \| "active" \| "ghost"	"default"	Visual style variant
layout	"vertical" \| "horizontal"	"vertical"	Layout direction
shadow	"none" \| "sm" \| "md" \| "lg"	"md"	Shadow depth
radius	"none" \| "sm" \| "md" \| "lg"	"md"	Border radius
block	boolean	false	Whether card takes full width
interactive	boolean	false	Enable hover/click effects
inset	boolean	false	Whether cover has inset margins
animation	boolean	true	Enable transition animations
as	ElementType	"div"	Element type to render as
css	SystemStyleObject	-	Additional Panda CSS styles

Card.Header, Card.Cover, Card.Content, Card.Footer, Card.Meta#

Prop	Type	Default	Description
as	ElementType	"div"	Element type to render as
css	SystemStyleObject	-	Additional Panda CSS styles

Card.Title#

Prop	Type	Default	Description
as	ElementType	"h3"	Element type to render as
css	SystemStyleObject	-	Additional Panda CSS styles