Card Components

Card components provide structured containers for displaying product information, pricing plans, blog posts, and other content in a clean, organized format.

E-commerce Card

The card-ecommerce component displays product information with an image, name, description, price, and action button.

<x-card-ecommerce 
    img="/images/grand-theft-office.webp"
    name="Premium Headphones"
    description="High-quality wireless headphones with noise cancellation"
    :price="29900"
    currency="USD"
    href="/products/headphones"
    buttonLabel="View Details"
/>

Featured E-commerce Card

Use the isFeatured prop to highlight special products:

<x-card-ecommerce 
    img="/images/grand-theft-office.webp"
    name="Limited Edition Watch"
    description="Exclusive timepiece with premium materials"
    :price="59900"
    currency="USD"
    href="/products/watch"
    buttonLabel="Shop Now"
    :isFeatured="true"
/>

Without Price

Omit the price prop for products with custom pricing:

<x-card-ecommerce 
    img="/images/grand-theft-office.webp"
    name="Custom Service"
    description="Contact us for personalized pricing"
    href="/contact"
    buttonLabel="Get Quote"
/>

Subscription Plan Card

The card-subscription-plan component displays pricing plans with features, pricing details, and call-to-action buttons.

Basic Plan Card

<x-card-subscription-plan class="max-w-md" :plan="(object)[
        'name' => 'Starter',
        'description' => 'Perfect for individuals getting started',
        'price' => 999,
        'currency' => 'USD',
        'billing_period' => 'month',
        'paddle_id' => 'pri_123',
        'features' => [
            'Up to 10 active projects with full access to core features',
            '5GB of secure cloud storage for your files',
            'Email support from our responsive team',
            'Access to professionally designed basic templates',
            'Join our community forum to connect with other users',
            'Monthly reports on your usage and performance',
            'Mobile app access to manage projects on the go',
        ]
    ]" />

Featured Plan Card

Use is_featured to highlight the most popular plan:

<x-card-subscription-plan class="max-w-md" :plan="(object)[
        'name' => 'Professional',
        'description' => 'Best for growing teams',
        'price' => 2999,
        'currency' => 'USD',
        'billing_period' => 'month',
        'is_featured' => true,
        'paddle_id' => 'pri_456',
        'features' => [
            'Unlimited projects with access to all premium features',
            '100GB of secure cloud storage for your files and data',
            'Priority support with faster response times from our team',
            'Advanced analytics and reporting tools for insights',
        ]
    ]" />

With Free Trial

Add trial period information:

<x-card-subscription-plan class="max-w-md" :plan="(object)[
        'name' => 'Enterprise',
        'description' => 'For large organizations',
        'price' => 9999,
        'currency' => 'USD',
        'billing_period' => 'month',
        'trial_period' => 14,
        'trial_interval' => 'day',
        'paddle_id' => 'pri_789',
        'features' => [
            'Unlimited everything with no restrictions on usage',
            'Dedicated support with a personal account manager',
            'Custom integrations tailored to your workflow',
            'SLA guarantee with 99.9% uptime commitment',
        ]
    ]" />

One-Time Payment

For lifetime access plans:

<x-card-subscription-plan class="max-w-md" :plan="(object)[
        'name' => 'Lifetime',
        'description' => 'Pay once, use forever',
        'price' => 29900,
        'currency' => 'USD',
        'billing_period' => 'one-time',
        'href' => route('checkout', 'lifetime'),
        'button_text' => 'Buy Now',
        'features' => [
            'All features included with full access to everything',
            'Lifetime updates and new features at no extra cost',
            'No recurring fees with a one-time payment only',
        ]
    ]" />

Post Card

The card-post component displays blog post information in a vertical layout, perfect for grid displays.

Basic Post Card

<x-card-post class="max-w-sm" :post="$post"/>

Post Card Grid

Post cards work beautifully in responsive grid layouts:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    @foreach($posts as $post)
        <x-card-post :post="$post" />
    @endforeach
</div>

Horizontal Post Card

The card-post-horizontal component displays blog post information in a horizontal layout, ideal for featured posts.

Basic Horizontal Card

<x-card-post-horizontal :post="$post" />

Testimonial Card

The card-testimonial component displays customer testimonials with a quote, author information, and avatar.

Basic Testimonial Card

<x-card-testimonial 
    :author="[
        'name' => 'John Doe',
        'role' => 'CEO',
        'avatar' => '/images/avatars/avatar-1.webp'
    ]"
    quote="Simply put, this software transformed my workflow! Its intuitive interface and powerful features make tasks a breeze."
/>

E-commerce Card Props

Prop	Type	Default	Description
img	string|null	null	Product image URL
name	string|null	null	Product name
description	string|null	null	Product description (max 2 lines displayed)
price	int|null	null	Price in cents (e.g., 2999 for $29.99)
currency	string|null	null	Currency code (e.g., USD, EUR, GBP)
href	string|null	null	URL for the action button
buttonLabel	string	View	Text for the action button
isFeatured	bool	false	Highlights the card with special styling

Subscription Plan Card Props

Prop	Type	Default	Description
plan	object	-	Required. Plan object containing all plan details (see structure below)

Plan Object Structure

Property	Type	Required	Description
name	string	Yes	Plan name
description	string	Yes	Plan description
price	int	Yes	Price in cents
currency	string	No	Currency code (defaults to USD)
billing_period	string	No	Billing frequency: month, year, one-time
is_featured	bool	No	Show "Most Popular" badge and special styling
paddle_id	string	No	Paddle price ID (used if href not provided)
href	string	No	Custom URL for the subscribe button
button_text	string	No	Custom button text (defaults to "Subscribe")
trial_period	int	No	Number of trial days/months
trial_interval	string	No	Trial interval unit: day, month
features	array	No	Array of feature strings to display with checkmarks

Post Card Props

Both card-post and card-post-horizontal accept a post object with the following properties:

Property	Type	Required	Description
title	string	No	Post title
description	string	No	Post description or excerpt
image_url	string|null	No	URL of the post's featured image
slug	string	No	Post slug for generating links
created_at	Carbon	No	Post creation date
author	string	No	Post author name (only displayed in horizontal card)

Testimonial Card Props

Prop	Type	Default	Description
author	array	See below	Author information object containing name, role, and avatar
quote	string	See below	The testimonial quote text

Author Object Structure

Property	Type	Required	Description
name	string	No	Author's full name
role	string	No	Author's job title or role
avatar	string	No	URL to the author's avatar image

References

Category	Path / Name	Description
Component	resources/views/components/card-ecommerce.blade.php	E-commerce product card
Component	resources/views/components/card-subscription-plan.blade.php	Subscription pricing plan card
Component	resources/views/components/card-post.blade.php	Vertical blog post card
Component	resources/views/components/card-post-horizontal.blade.php	Horizontal blog post card
Component	resources/views/components/card-testimonial.blade.php	Customer testimonial card

For the detailed documentation, please visit the Penguin UI Cards.