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

Porro dolorem quam porro.

27.07.2024

ID:	1
Author:	Prof. Brennon Abbott

Temporibus nesciunt sint aut voluptas vel dolore. Quisquam eligendi dicta mollitia dolorum sed nam.

# 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

Laboriosam nobis.

27.07.2024

ID:	1
Author:	Mrs. Andreanne Shanahan V

Vero quae in sit quaerat ut quia modi. Quod vel ea suscipit et laudantium et totam. Quos veniam eligendi sunt nemo cum perferendis quis voluptatem.

# 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

Recusandae natus qui.

27.07.2024

/ 2

ID:	1
Author:	Roxane Cruickshank

Laboriosam tempora nam est hic. Et eaque animi deserunt eum. Labore tempora ea velit dolores vero. Quia numquam doloribus similique.