Card

The Card component provides a flexible container for organizing content with clear visual hierarchy and structure.

Basic Usage

<Card>
  <Header>
    <h3 class="text-lg font-semibold">Welcome to ShellUI</h3>
    <p class="text-sm text-muted-foreground">Build beautiful Blazor applications</p>
  </Header>
  <ChildContent>
    <p>Your content goes here</p>
  </ChildContent>
  <Footer>
    <Button>Learn More</Button>
  </Footer>
</Card>

Card Structure

Cards use RenderFragment parameters for flexible content:

Contains the title and description at the top of the card.

<Card>
  <Header>
    <h3 class="text-lg font-semibold">Card Title</h3>
    <p class="text-sm text-muted-foreground">This is a description of the card content</p>
  </Header>
  <ChildContent>
    <p>Main content goes here</p>
  </ChildContent>
</Card>

ChildContent

The main content area of the card.

<Card>
  <ChildContent>
    <p>Main content goes here</p>
    <Input Placeholder="Enter something" />
  </ChildContent>
</Card>

Actions or secondary content at the bottom of the card.

<Card>
  <ChildContent>
    <p>Content</p>
  </ChildContent>
  <Footer>
    <Button Variant="outline">Cancel</Button>
    <Button>Save</Button>
  </Footer>
</Card>

Variants

Default Card

<Card>
  <Header>
    <h3 class="text-lg font-semibold">Default Card</h3>
  </Header>
  <ChildContent>
    <p>This is a standard card with default styling.</p>
  </ChildContent>
</Card>

<Card>
  <Header>
    <h3 class="text-lg font-semibold">Settings</h3>
    <p class="text-sm text-muted-foreground">Manage your account preferences</p>
  </Header>
  <ChildContent>
    <div class="space-y-4">
      <div>
        <Label>Email Notifications</Label>
        <Switch />
      </div>
      <div>
        <Label>Dark Mode</Label>
        <Switch />
      </div>
    </div>
  </ChildContent>
  <Footer>
    <Button Variant="outline">Cancel</Button>
    <Button>Save Changes</Button>
  </Footer>
</Card>

Layout Examples

Product Card

<Card>
  <Header>
    <div class="flex items-center space-x-4">
      <Avatar>
        <AvatarImage src="/product.jpg" />
        <AvatarFallback>PR</AvatarFallback>
      </Avatar>
      <div>
        <h3 class="text-lg font-semibold">Premium Plan</h3>
        <p class="text-sm text-muted-foreground">$29/month</p>
      </div>
    </div>
  </Header>
  <ChildContent>
    <ul class="space-y-2 text-sm">
      <li>✓ Unlimited projects</li>
      <li>✓ Priority support</li>
      <li>✓ Advanced analytics</li>
    </ul>
  </ChildContent>
  <Footer>
    <Button Class="w-full">Upgrade Now</Button>
  </Footer>
</Card>

Stats Card

<Card>
  <Header>
    <div class="flex flex-row items-center justify-between space-y-0 pb-2">
      <h3 class="text-sm font-medium">Total Revenue</h3>
      <span class="text-muted-foreground">$</span>
    </div>
  </Header>
  <ChildContent>
    <div class="text-2xl font-bold">$45,231.89</div>
    <p class="text-xs text-muted-foreground">+20.1% from last month</p>
  </ChildContent>
</Card>

API Reference

Property	Type	Default	Description
`Header`	`RenderFragment`	`null`	Header content (title, description, etc.)
`Footer`	`RenderFragment`	`null`	Footer content (actions, buttons, etc.)
`ChildContent`	`RenderFragment`	`null`	Main card content

Styling

Cards use Tailwind CSS classes and can be customized using CSS variables:

/* Custom card styling */
.card {
  --card-background: #ffffff;
  --card-border: #e5e7eb;
  --card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

Accessibility

The Card component includes:

Proper semantic HTML structure
Screen reader compatibility
Keyboard navigation support
Focus management

Installation

shellui add card