Components

Card

Basics

The Card component allows you to create element cards.

make(
    Closure|string $title = '',
    Closure|array|string $thumbnail = '',
    Closure|string $url = '#',
    Closure|array $values = [],
    Closure|string|null $subtitle = null,
    bool $overlay = false,
)
make(
    Closure|string $title = '',
    Closure|array|string $thumbnail = '',
    Closure|string $url = '#',
    Closure|array $values = [],
    Closure|string|null $subtitle = null,
    bool $overlay = false,
)
  • $title - title,
  • $thumbnail - images,
  • $url - link,
  • $values - list of values,
  • $subtitle - subtitle,
  • $overlay - the overlay mode allows placing the header and titles over the card image.
use MoonShine\UI\Components\Card;
 
Card::make(
    title: fake()->sentence(3),
    thumbnail: 'https://moonshine-laravel.com/images/image_1.jpg',
    url: fn() => 'https://cutcode.dev',
    values: ['ID' => 1, 'Author' => fake()->name()],
    subtitle: date('d.m.Y'),
)
use MoonShine\UI\Components\Card;
 
Card::make(
    title: fake()->sentence(3),
    thumbnail: 'https://moonshine-laravel.com/images/image_1.jpg',
    url: fn() => 'https://cutcode.dev',
    values: ['ID' => 1, 'Author' => fake()->name()],
    subtitle: date('d.m.Y'),
)
<x-moonshine::card
        :title="fake()->sentence(3)"
        :thumbnail="'https://moonshine-laravel.com/images/image_1.jpg'"
        :url="'https://cutcode.dev'"
        :subtitle="'test'"
        :values="['ID' => 1, 'Author' => fake()->name()]"
>
    {{ fake()->text(100) }}
</x-moonshine::card>
<x-moonshine::card
        :title="fake()->sentence(3)"
        :thumbnail="'https://moonshine-laravel.com/images/image_1.jpg'"
        :url="'https://cutcode.dev'"
        :subtitle="'test'"
        :values="['ID' => 1, 'Author' => fake()->name()]"
>
    {{ fake()->text(100) }}
</x-moonshine::card>

The header() method allows you to set a header for the cards.

header(Closure|string $value)
header(Closure|string $value)
  • $value - a column or closure that returns HTML code.
Card::make(
    title: fake()->sentence(3),
)
    ->header(static fn() => Badge::make('new', 'success'))
Card::make(
    title: fake()->sentence(3),
)
    ->header(static fn() => Badge::make('new', 'success'))

Buttons

To add buttons to the card, you can use the actions() method.

actions(Closure|string $value)
actions(Closure|string $value)
Card::make(
    title: fake()->sentence(3),
)
    ->actions(
        static fn() => ActionButton::make('Edit', route('name.edit'))
    )
Card::make(
    title: fake()->sentence(3),
)
    ->actions(
        static fn() => ActionButton::make('Edit', route('name.edit'))
    )

Subtitle

subtitle(Closure|string $value)
subtitle(Closure|string $value)
  • $value - a column or closure that returns a subtitle.
Card::make(
    title: fake()->sentence(3),
)
    ->subtitle(static fn() => 'Subtitle')
Card::make(
    title: fake()->sentence(3),
)
    ->subtitle(static fn() => 'Subtitle')

URL

The url() method allows you to set a link for the card header.

url(Closure|string $value)
url(Closure|string $value)
  • $value - url or closure.
Card::make(
    title: fake()->sentence(3),
    thumbnail: '/images/image_1.jpg',
)
    ->url(static fn() => 'https://cutcode.dev')
Card::make(
    title: fake()->sentence(3),
    thumbnail: '/images/image_1.jpg',
)
    ->url(static fn() => 'https://cutcode.dev')

Thumbnails

To add a carousel of images to the card, you can use the thumbnail() method.

thumbnail(Closure|string|array $value)
thumbnail(Closure|string|array $value)
Card::make(
    title: fake()->sentence(3),
)
    ->thumbnail([
        '/images/image_2.jpg',
        '/images/image_1.jpg',
    ])
Card::make(
    title: fake()->sentence(3),
)
    ->thumbnail([
        '/images/image_2.jpg',
        '/images/image_1.jpg',
    ])

Values List

To add a list of values to the card, you can use the values() method.

values(Closure|array $value)
values(Closure|array $value)
  • $value - an associative array of values or a closure.
Card::make(
    title: fake()->sentence(3),
)
    ->values([
        'ID' => 1,
        'Author' => fake()->name(),
    ])
Card::make(
    title: fake()->sentence(3),
)
    ->values([
        'ID' => 1,
        'Author' => fake()->name(),
    ])