Card

Card Components

These components provide a styled container (Card) with optional loading state and tooltip support, plus a Card.Title subcomponent for titles with an optional divider.

---

Example Usage

<x-card :loading="true" tooltip="Loading card">
    <x-divider />
    <x-button variant="outline" loading="test" wire:click="test">
        Test
    </x-button>
</x-card>

<x-card>
    <x-card.title divider="true">
        Card Title
    </x-card.title>
    <p>Card content goes here...</p>
</x-card>

---

Components & Props

<x-card>

• loading (bool): When true, shows a pulsing skeleton placeholder instead of the content.
• tooltip (string|null): Tooltip text shown on hover using Alpine.js.
• Accepts all other HTML attributes like class, id, etc., merged with default styling.

<x-card.title>

• divider (bool): Whether to display a divider line below the title. Default is true.
• Renders title text styled as bold and large font.

---

Overview

The Card component is a flexible content container with padding, border, and background styling. It supports a loading skeleton to indicate asynchronous loading states and can display tooltips on hover. The Card.Title subcomponent adds a styled heading with an optional dividing line to visually separate content sections within the card.