Container Components

PUI provides various container components for organizing content with consistent styling.

Basic Card

A simple card component with default styling for containing content.

This is a basic card with default styling. It provides a clean container for any content.

This card has custom styling applied via the class attribute.

<PUI.Container.card>
<p>This is a basic card with default styling.</p>
</PUI.Container.card>

<PUI.Container.card class="bg-blue-50 border-blue-200">
<p>This card has custom styling.</p>
</PUI.Container.card>

Card with Header

Using card_header, card_title, and card_description for structured card headers.

Card Title

This is a description that provides additional context about the card content.

<PUI.Container.card>
<PUI.Container.card_header>
<PUI.Container.card_title>Card Title</PUI.Container.card_title>
<PUI.Container.card_description>
  This is a description that provides additional context.
</PUI.Container.card_description>
</PUI.Container.card_header>
</PUI.Container.card>

Complete Card

A full card example with header, content, and footer sections.

User Profile

Manage your account settings and preferences.

John Doe

john@example.com

This card demonstrates how all card components work together to create a complete UI section with consistent styling.

<PUI.Container.card>
<PUI.Container.card_header>
<PUI.Container.card_title>User Profile</PUI.Container.card_title>
<PUI.Container.card_description>
  Manage your account settings and preferences.
</PUI.Container.card_description>
</PUI.Container.card_header>

<PUI.Container.card_content>
<p>Your profile information goes here.</p>
</PUI.Container.card_content>

<PUI.Container.card_footer class="gap-2">
<.button variant="outline">Cancel</.button>
<.button>Save Changes</.button>
</PUI.Container.card_footer>
</PUI.Container.card>

Card with Action

Using card_action to place action elements on the right side of the card header.

Notifications

Configure how you receive notifications.

Email Notifications

Enabled

Push Notifications

Disabled

<PUI.Container.card>
<PUI.Container.card_header>
<PUI.Container.card_title>Notifications</PUI.Container.card_title>
<PUI.Container.card_description>
  Configure how you receive notifications.
</PUI.Container.card_description>
<PUI.Container.card_action>
  <.button variant="outline" size="sm">Settings</.button>
</PUI.Container.card_action>
</PUI.Container.card_header>

<PUI.Container.card_content>
<p>Notification settings content here.</p>
</PUI.Container.card_content>
</PUI.Container.card>

Card Grid Layout

Cards work well in grid layouts for dashboards and data displays.

2,543

Total Users

$12,450

Revenue

98.5%

Uptime

<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<PUI.Container.card class="border-l-4 border-l-green-500">
<PUI.Container.card_header>
  <PUI.Container.card_title class="text-2xl">2,543</PUI.Container.card_title>
  <PUI.Container.card_description>Total Users</PUI.Container.card_description>
</PUI.Container.card_header>
</PUI.Container.card>
...
</div>

Props

Name	Type	Default	Description
class	string	nil	Additional CSS classes
rest	global	nil	Arbitrary HTML attributes for card container