Displays a card with header, content, and footer.
<x-portal::card class="w-[350px] space-y-6">
<div class="space-y-1">
<x-portal::heading size="lg">Log in to your account</x-portal::heading>
<x-portal::heading.sub>Welcome back!</x-portal::heading.sub>
</div>
<x-portal::alert>
<x-tabler-bell class="h-4 w-4" />
<x-portal::alert.title>Push Notifications</x-portal::alert.title>
<x-portal::alert.description>
Send notifications to device.
</x-portal::alert.description>
</x-portal::alert>
<div class="space-y-2">
<x-portal::button class="w-full">Login</x-portal::button>
<x-portal::button variant="ghost" class="w-full">Sign up for a new account</x-portal::button>
</div>
</x-portal::card>
If you want to customize the components, you can publish them by running the following command :
php artisan vendor:publish --tag=portal-ui:card --force