Card

Content container with header, body, footer sections. Supports flush body, stats, pricing, and profile variants.

<x-card>

Standard Card with Header & Footer

Base card anatomy: .vui-card-header, .vui-card-body, .vui-card-footer.

Project Summary

Last updated 2 hours ago

Veldora UI ships zero-dependency pure CSS components designed to integrate cleanly into any PHP project.

<x-card>
    <x-slot name="header">
        <x-card-title>Project Summary</x-card-title>
        <x-card-subtitle>Last updated 2 hours ago</x-card-subtitle>
    </x-slot>
    Veldora UI ships zero-dependency pure CSS components...
    <x-slot name="footer">
        <x-button variant="ghost" size="sm">Cancel</x-button>
        <x-button variant="primary" size="sm">Save</x-button>
    </x-slot>
</x-card>

Pricing Tier Card

Highlighted card with accent border, price, feature checklist, and CTA button.

Pro

Popular

$29 / mo

Unlimited components
SQLite & MySQL ORM
Priority support

<x-card variant="pricing" title="Pro" price="$29" :highlight="true">
    <x-feature>Unlimited components</x-feature>
    <x-feature>SQLite &amp; MySQL ORM</x-feature>
    <x-feature>Priority support</x-feature>
    <x-slot name="footer">
        <x-button variant="primary" :full="true">Get Started</x-button>
    </x-slot>
</x-card>

User Profile Card

Avatar, display name, role, stat counters, and a follow CTA.

Veldora Dev

Full-stack PHP Engineer

42Components

1.4kStars

<x-card variant="profile" name="Veldora Dev" role="Full-stack PHP Engineer">
    <x-slot name="stats">
        <x-stat label="Components" value="42" />
        <x-stat label="Stars" value="1.4k" />
    </x-slot>
    <x-button variant="outline-primary" size="sm" :full="true">Follow</x-button>
</x-card>

← Previous Rating Next → Table