Components

Card

Basics

The Card component allows you to create element cards.

You can create a Card using the static method make() of the Card class.

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 - the title of the card,
  • $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'),
)
{{ fake()->text(100) }}
<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.
Cards::make( title: fake()->sentence(3), thumbnail: '/images/image_2.jpg', ) ->header(static fn() => Badge::make('new', 'success')) 
Cards::make(
    title: fake()->sentence(3),
    thumbnail: '/images/image_2.jpg',
)
    ->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)
Cards::make( title: fake()->sentence(3), thumbnail: '/images/image_1.jpg', ) ->actions( static fn() => ActionButton::make('Edit', route('name.edit')) ) 
Cards::make(
    title: fake()->sentence(3),
    thumbnail: '/images/image_1.jpg',
)
    ->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.
Cards::make( title: fake()->sentence(3), thumbnail: '/images/image_2.jpg', ) ->subtitle(static fn() => 'Subtitle') 
Cards::make(
    title: fake()->sentence(3),
    thumbnail: '/images/image_2.jpg',
)
    ->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.
Cards::make( title: fake()->sentence(3), thumbnail: '/images/image_1.jpg', ) ->url(static fn() => 'https://cutcode.dev') 
Cards::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 thumbnails() method.

thumbnails(Closure|string|array $value) 
thumbnails(Closure|string|array $value)
Cards::make( title: fake()->sentence(3), ) ->thumbnail(['/images/image_2.jpg','/images/image_1.jpg']) 
Cards::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.
Cards::make( title: fake()->sentence(3), thumbnail: '/images/image_1.jpg', ) ->values([ 'ID' => 1, 'Author' => fake()->name() ]) 
Cards::make(
    title: fake()->sentence(3),
    thumbnail: '/images/image_1.jpg',
)
    ->values([
        'ID' => 1,
        'Author' => fake()->name()
    ])