Card

# Basics

To create cards in the admin panel, use the moonshine::card component.

<x-moonshine::card
    url="#"
    thumbnail="/images/image_1.jpg"
    :title="fake()->sentence(3)"
    :subtitle="date('d.m.Y')"
    :values="['ID' => 1, 'Author' => fake()->name()]"
>
    <x-slot:header>
        <x-moonshine::badge color="green">new</x-moonshine::badge>
    </x-slot:header>
 
    {{ fake()->text() }}
 
    <x-slot:actions>
        <x-moonshine::link-button href="#">Read more</x-moonshine::link-button>
    </x-slot:actions>
</x-moonshine::card>

<x-moonshine::card
    url="#"
    thumbnail="/images/image_1.jpg"
    :title="fake()->sentence(3)"
    :subtitle="date('d.m.Y')"
    :values="['ID' => 1, 'Author' => fake()->name()]"
>
    <x-slot:header>
        <x-moonshine::badge color="green">new</x-moonshine::badge>
    </x-slot:header>

    {{ fake()->text() }}

    <x-slot:actions>
        <x-moonshine::link-button href="#">Read more</x-moonshine::link-button>
    </x-slot:actions>
</x-moonshine::card>

new

Tempore earum ducimus et.

23.11.2024

ID:	1
Author:	Asa Block I

Voluptatem deleniti placeat repudiandae. Odio aut sed cumque tenetur architecto harum. Et id nobis minus itaque.

# Overlay mode

The overlay mode is available for the card.

<x-moonshine::card
    url="#"
    :overlay="true"
    thumbnail="/images/image_1.jpg"
    :title="fake()->sentence(3)"
    :subtitle="date('d.m.Y')"
    :values="['ID' => 1, 'Author' => fake()->name()]"
>
    <x-slot:header>
        <x-moonshine::badge color="green">new</x-moonshine::badge>
    </x-slot:header>
 
    {{ fake()->text() }}
 
    <x-slot:actions>
        <x-moonshine::link-button href="#">Read more</x-moonshine::link-button>
    </x-slot:actions>
</x-moonshine::card>

<x-moonshine::card
    url="#"
    :overlay="true"
    thumbnail="/images/image_1.jpg"
    :title="fake()->sentence(3)"
    :subtitle="date('d.m.Y')"
    :values="['ID' => 1, 'Author' => fake()->name()]"
>
    <x-slot:header>
        <x-moonshine::badge color="green">new</x-moonshine::badge>
    </x-slot:header>

    {{ fake()->text() }}

    <x-slot:actions>
        <x-moonshine::link-button href="#">Read more</x-moonshine::link-button>
    </x-slot:actions>
</x-moonshine::card>

new

Et eos eum aut aut.

23.11.2024

ID:	1
Author:	Daniella McCullough

Maxime vel et impedit voluptas sunt voluptas architecto. Accusantium sunt quas corporis aut deleniti veritatis. Quisquam ipsam aut maiores rerum qui soluta.

# Image carousel

To add an images carousel to a card, you can add to thumbnail parameter array of images.

<x-moonshine::card
    url="#"
    :overlay="true"
    :thumbnail="['/images/image_1.jpg', '/images/image_2.jpg']"
    :title="fake()->sentence(3)"
    :subtitle="date('d.m.Y')"
    :values="['ID' => 1, 'Author' => fake()->name()]"
>
    <x-slot:header>
        <x-moonshine::badge color="green">new</x-moonshine::badge>
    </x-slot:header>
 
    {{ fake()->text() }}
 
    <x-slot:actions>
        <x-moonshine::link-button href="#">Read more</x-moonshine::link-button>
    </x-slot:actions>
</x-moonshine::card>

<x-moonshine::card
    url="#"
    :overlay="true"
    :thumbnail="['/images/image_1.jpg', '/images/image_2.jpg']"
    :title="fake()->sentence(3)"
    :subtitle="date('d.m.Y')"
    :values="['ID' => 1, 'Author' => fake()->name()]"
>
    <x-slot:header>
        <x-moonshine::badge color="green">new</x-moonshine::badge>
    </x-slot:header>

    {{ fake()->text() }}

    <x-slot:actions>
        <x-moonshine::link-button href="#">Read more</x-moonshine::link-button>
    </x-slot:actions>
</x-moonshine::card>

new

Et beatae ut.

23.11.2024

/ 2

ID:	1
Author:	Carrie Grimes

Qui occaecati et nostrum et eaque similique sint voluptatibus. Omnis quos dicta est aperiam mollitia. Qui distinctio qui et ex ut mollitia. Aut veritatis et non quia dolorem cupiditate corporis.