Overview
PageCard provides a consistent wrapper for page content with optional header, significant padding, and responsive design. It's the primary container for content sections within a page.
Key Features
- Generous responsive padding (p-6 mobile, p-12 desktop)
- Optional title and subtitle with separator line
- Centered mode for login pages and focused content
- Gradient border option for premium/highlighted sections
- Table mode removes padding for edge-to-edge content
Examples
Content Only (No Header)
Simple wrapper with generous padding. No header is shown.
This is a simple PageCard with content only and generous padding. No header is shown.
With Title (Left-Aligned)
Left-aligned title with automatic separator. Perfect for settings and forms.
Left-aligned title with automatic separator and consistent padding. Perfect for settings pages and forms.
With Title and Subtitle (Centered)
Centered header. Ideal for login pages and focused single-purpose content.
Centered header with title and subtitle. Ideal for login pages, welcome screens, and focused single-purpose pages.
Gradient Border
Premium styling for highlighted sections and special features.
Premium styling with gradient border. Perfect for highlighting special features or important content sections.
Table Mode (No Padding)
Removes padding for edge-to-edge tables and lists.
| Name | Role | |
|---|---|---|
| Sarah Anderson | sarah@example.com | Admin |
| Michael Chen | michael@example.com | Editor |
| Emma Wilson | emma@example.com | Viewer |
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | - | Optional heading text displayed in the card header |
subtitle | string | - | Optional descriptive text below the title |
centered | boolean | false | Center-align the header content |
gradient | boolean | false | Apply gradient border styling |
tableMode | boolean | false | Remove content padding for edge-to-edge layouts |
className | string | - | Additional CSS classes for the container |
Usage
import { PageCard } from '@/ui/components';
// Content only (no header)
<PageCard>
<p>Simple wrapper with generous padding</p>
</PageCard>
// With title and subtitle (left-aligned)
<PageCard title="Settings" subtitle="Manage preferences">
<form>{/* Form content */}</form>
</PageCard>
// Centered with gradient border
<PageCard title="Welcome" subtitle="Get started" centered gradient>
<p>Content with centered header and gradient border</p>
</PageCard>
// Table mode (no padding for edge-to-edge content)
<PageCard title="Users" tableMode>
<ListTableBlock items={users} columns={columns} />
</PageCard>