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,
    array $escapeValueLabels = [],
    ?bool $escapeLabel = null,
)
make(
    Closure|string $title = '',
    Closure|array|string $thumbnail = '',
    Closure|string $url = '#',
    Closure|array $values = [],
    Closure|string|null $subtitle = null,
    bool $overlay = false,
    array $escapeValueLabels = [],
    ?bool $escapeLabel = null,
)
  • $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,
  • $escapeValueLabels - per-key escaping preferences for labels in the values list,
  • $escapeLabel - default escaping for value labels in this card; null uses the global setting.
 namespaces
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'),
)
 namespaces
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(),
    ])

Value Labels

Keys in the values list are escaped according to the global escapes.label setting, which is enabled by default. Use escapeValueLabels() to override escaping for individual keys. false allows HTML, while true enables escaping even when the global default is disabled.

 namespaces
use MoonShine\UI\Components\Card;
 
Card::make(values: ['<strong>Author</strong>' => 'Alice'])
    ->escapeValueLabels(['<strong>Author</strong>' => false]);
 namespaces
use MoonShine\UI\Components\Card;
 
Card::make(values: ['<strong>Author</strong>' => 'Alice'])
    ->escapeValueLabels(['<strong>Author</strong>' => false]);

The keys remain unchanged in the data. This setting controls the labels, not the values rendered next to them.

You can also pass escapeLabel: false to Card::make() to allow HTML in all value labels in that card. Per-key escapeValueLabels() preferences take priority. In Blade, use :escape-label and :escape-value-labels. Overrides of values, escapeLabel, and escapeValueLabels supplied through customView() are also respected.