Card Component

# Make

The Card component allows you to create element cards.

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

make(
    Closure|string $title = '',
    Closure|string $thumbnail = '',
    Closure|string $url = '#',
    Closure|array $values = [],
    Closure|string|null $subtitle = null
)
  • $title - card title,
  • $thumbnail - image,
  • $url - link,
  • $values - list of values
  • $subtitle - subtitle.
use MoonShine\Components\Card; 
 
//...
 
public function components(): array
{
    return [
        Card::make(
            title: fake()->sentence(3),
            thumbnail: '/images/image_1.jpg',
            url: fn() => 'https://cutcode.dev',
            values: ['ID' => 1, 'Author' => fake()->name()],
            subtitle: date('d.m.Y')
        ) 
    ];
}
 
//...
In necessitatibus tenetur.

In necessitatibus tenetur.

20.05.2024
ID: 1
Author: Skyla Stanton

# Header

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

header(Closure|string $value)
  • $value - column or closure returning html code.
Cards::make(
    title: fake()->sentence(3),
    thumbnail: '/images/image_2.jpg',
)
    ->header(static fn() => Badge::make('new', 'success'))
Voluptatem ullam nobis.
new

Voluptatem ullam nobis.

# Buttons

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

actions(Closure|string $value)
Cards::make(
    title: fake()->sentence(3),
    thumbnail: '/images/image_1.jpg',
)
    ->actions(
        static fn() => ActionButton::make('Edit', route('name.edit'))
    )
Enim quod aut.

Enim quod aut.

Edit

# Subtitle 

subtitle(Closure|string $value)
  • $value - column or a closure that returns a subtitle.
Cards::make(
    title: fake()->sentence(3),
    thumbnail: '/images/image_2.jpg',
)
    ->subtitle(static fn() => 'Subtitle')
Repellat illum rerum magni.

Repellat illum rerum magni.

Subtitle

# Link

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

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')
Voluptatum soluta a veniam.

Voluptatum soluta a veniam.

# Thumbnail

To add an image to a card, you can use the thumbnail() method. 

thumbnail(Closure|string $value)
  • $value - url of the image or closure.
Cards::make(
    title: fake()->sentence(3),
)
    ->thumbnail('/images/image_2.jpg')
Molestiae amet nesciunt minima.

Molestiae amet nesciunt minima.

# List of values

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

values(Closure|array $value)
  • $value - associative array of values or closure.
Cards::make(
    title: fake()->sentence(3),
    thumbnail: '/images/image_1.jpg',
)
    ->values([
        'ID' => 1,
        'Author' => fake()->name()
    ])
Repellendus magni veritatis.

Repellendus magni veritatis.

ID: 1
Author: Tod West

# Overlay mode

The overlay mode allows you to place the header and headings on top of the card image.
This mode is activated by the overlay() method of the same name. 

Cards::make(
    title: fake()->sentence(3),
    thumbnail: '/images/image_2.jpg',
    url: fn() => 'https://cutcode.dev',
    values: ['ID' => 1, 'Author' => fake()->name()],
    subtitle: date('d.m.Y')
)
    ->header(static fn() => Badge::make('new', 'success'))
    ->overlay()
new

Quis eos impedit.

20.05.2024
Quis eos impedit.
ID: 1
Author: Prof. Iva Larkin
Components
Badge
ActionButton
ActionButton