Card

Lockness UI Component

LLM DOCS:VIEW

DOCUMENTATION

Card

Compound components for building flexible card layouts. Cards provide a structured container with header, title, description, content, and footer sections.

Installation

bash

deno run -A jsr:@lockness/ui add card

Usage

tsx

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@lockness/ui/components'

<Card>
  <CardHeader>
    <CardTitle>User Profile</CardTitle>
    <CardDescription>Manage your account settings</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Your content here</p>
  </CardContent>
  <CardFooter>
    <Button>Save</Button>
  </CardFooter>
</Card>

Components

Card

The main container component with border, rounded corners, and shadow.

tsx

<Card>
    {/* Card sections go here */}
</Card>

CardHeader

Header section of the card. Supports optional icons with configurable positioning.

tsx

// Basic header
<CardHeader>
  <CardTitle>Title</CardTitle>
</CardHeader>

// With icon on the left (default)
<CardHeader icon="🎨">
  <CardTitle>Design</CardTitle>
</CardHeader>

// With icon on top
<CardHeader icon="📊" iconPosition="top">
  <CardTitle>Statistics</CardTitle>
</CardHeader>

// With icon on the right
<CardHeader icon="→" iconPosition="right">
  <CardTitle>Next Step</CardTitle>
</CardHeader>

CardTitle

Title typography for card headers.

tsx

<CardTitle>Dashboard</CardTitle>

CardDescription

Muted description text for additional context.

tsx

<CardDescription>Manage your account settings</CardDescription>

CardContent

Main content area of the card.

tsx

<CardContent>
    <p>Your content here</p>
</CardContent>

CardFooter

Footer section for actions, displayed as a flex row.

tsx

<CardFooter>
    <Button>Save</Button>
    <Button variant='outline'>Cancel</Button>
</CardFooter>

Props

CardProps

Prop	Type	Default	Description
children	`unknown`	-	Card content
class	`string`	-	Additional CSS class names
id	`string`	-	Element id attribute

CardHeaderProps

Prop	Type	Default	Description
children	`unknown`	-	Header content
class	`string`	-	Additional CSS class names
icon	`string`	-	Optional icon or emoji to display
iconPosition	`'left' \| 'top' \| 'right'`	`'left'`	Position of the icon relative to content
id	`string`	-	Element id attribute

Complete Example

tsx

<Card class='w-87.5'>
    <CardHeader icon='👤'>
        <CardTitle>Account Settings</CardTitle>
        <CardDescription>
            Update your personal information and preferences.
        </CardDescription>
    </CardHeader>
    <CardContent>
        <div class='space-y-4'>
            <div>
                <Label for='name'>Name</Label>
                <Input id='name' placeholder='Your name' />
            </div>
            <div>
                <Label for='email'>Email</Label>
                <Input id='email' type='email' placeholder='your@email.com' />
            </div>
        </div>
    </CardContent>
    <CardFooter class='justify-between'>
        <Button variant='outline'>Cancel</Button>
        <Button>Save Changes</Button>
    </CardFooter>
</Card>

CSS Variables

css

@theme {
    --card-header-padding: 1.5rem;
    --card-content-padding: 1.5rem;
    --card-footer-padding: 1.5rem;
    --card-title-font-size: 1.5rem;
    --radius: 0.5rem;
}

CARD VARIANTS

Basic Card

A simple card with header and content

This is the content area of the card.

Card with Footer

Includes an action footer

Cards can have footers for actions.

Feature Card

With multiple actions

✓Type-safe
✓Composable
✓Accessible

tsx

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@lockness/ui/components'

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>Content goes here</CardContent>
  <CardFooter>Footer content</CardFooter>
</Card>

AUTHENTICATION FORMS

Login

Enter your credentials to access your account

Password

Create Account

Full Name

Password

tsx

<Card>
  <CardHeader>
    <CardTitle>Login</CardTitle>
    <CardDescription>Enter your credentials</CardDescription>
  </CardHeader>
  <CardContent class='space-y-4'>
    <div class='space-y-2'>
      <Label for='email'>Email</Label>
      <Input id='email' type='email' placeholder='you@example.com' />
    </div>
    <div class='space-y-2'>
      <Label for='password'>Password</Label>
      <Input id='password' type='password' />
    </div>
  </CardContent>
  <CardFooter>
    <Button variant='primary' class='w-full'>Sign In</Button>
  </CardFooter>
</Card>

Edit this page