IxDF Developer Docs

Appearance

Card Types ​

Help Cards ​

Used to display contextual help information in Nova views.

php
namespace App\Nova\Cards;

class IndexHelpCard extends HtmlCard
{
    public function __construct(string $content)
    {
        parent::__construct($this->formatContent($content));

        $this->width('full')
             ->onlyOnIndex();
    }

    protected function formatContent(string $content): string
    {
        return sprintf(
            '<div class="px-3 py-3">%s</div>',
            $content
        );
    }
}

Detail Cards ​

Extend help cards for specific detail views:

php
namespace App\Nova\Cards;

use App\Nova\Cards\IndexHelpCard;final class DetailsHelpCard extends IndexHelpCard
{
    public function __construct(string $content)
    {
        parent::__construct($content);

        $this->onlyOnDetail();
    }
}

Usage Examples ​

In Resources ​

php
use App\Nova\Cards\DetailsHelpCard;use App\Nova\Cards\IndexHelpCard;

public function cards(NovaRequest $request): array
{
    return [
        new IndexHelpCard('This is a help message for the index view'),
        new DetailsHelpCard('This is a help message for the detail view'),
    ];
}

In Dashboards ​

php
namespace App\Modules\Course\Nova\Dashboards;

use Laravel\Nova\Dashboard;

final class CoursesDashboard extends Dashboard
{
    public function cards(): array
    {
        return [
            new IndexHelpCard('Dashboard help information'),
            // Other metrics and cards
        ];
    }
}

Best Practices ​

  1. Card Placement

    • Use appropriate width for different views
    • Consider card positioning in the layout
    • Group related cards together

  2. Content Formatting

    • Use consistent HTML structure
    • Apply appropriate CSS classes
    • Consider responsive design

  3. View Restrictions

    • Use onlyOn* methods to restrict card visibility
    • Consider user permissions when showing cards

  4. Performance

    • Cache card content when appropriate
    • Minimize database queries in card rendering

Card Configuration ​

Width Options ​

php
protected function configureWidth(): void
{
    $this->width('1/3')      // One-third width
         ->width('1/2')      // Half width
         ->width('full');    // Full width
}

View Restrictions ​

php
protected function configureViews(): void
{
    $this->onlyOnIndex()     // Show only on index view
         ->onlyOnDetail()    // Show only on detail view
         ->exceptOnForms();  // Hide on forms
}

Styling ​

php
protected function configureStyle(): void
{
    $this->withMeta([
        'class' => 'bg-white rounded-lg shadow',
        'style' => 'border: 1px solid #e3e3e3',
    ]);
}

Dynamic Content ​

php
protected function resolveContent(): string
{
    return view('nova.cards.help', [
        'content' => $this->content,
        'type' => $this->type,
    ])->render();
}

Examples ​

Custom Dashboard Card ​

php
namespace App\Nova\Cards;

use Laravel\Nova\Card;

final class CustomDashboardCard extends Card
{
    public function __construct(array $data)
    {
        parent::__construct();

        $this->withMeta([
            'data' => $data,
        ])
        ->width('full')
        ->view('nova.cards.custom-dashboard');
    }
}

Help Card with Icons ​

php
namespace App\Nova\Cards;

use App\Nova\Cards\IndexHelpCard;final class IconHelpCard extends IndexHelpCard
{
    public function __construct(string $content, string $icon)
    {
        parent::__construct(
            sprintf(
                '<div class="flex items-center"><div class="mr-2">%s</div><div>%s</div></div>',
                $this->renderIcon($icon),
                $content
            )
        );
    }

    private function renderIcon(string $icon): string
    {
        return sprintf(
            '<svg class="h-6 w-6" fill="currentColor">%s</svg>',
            $icon
        );
    }
}