Card

You're browsing the documentation for an old version of MoonShine. Consider upgrading your project to MoonShine 2.x.

# 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 href="#">Read more</x-moonshine::link>
</x-slot:actions>
</x-moonshine::card>
Optio aspernatur quis molestiae.
new

Optio aspernatur quis molestiae.

ID: 1
Author: Prof. Marvin Bogisich PhD
Libero iure expedita vel ut ea et unde. Porro qui quasi iste exercitationem quisquam omnis est. Est repellat ducimus voluptatibus incidunt. Incidunt odio quod ut blanditiis rerum.

# Overlay view

The overlay view 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 href="#">Read more</x-moonshine::link>
</x-slot:actions>
</x-moonshine::card>
new

Accusamus a.

26.04.2025
Accusamus a.
ID: 1
Author: Brent Wintheiser
Ea quisquam minus reiciendis quo. Maxime consequatur ut harum qui. Sed et modi totam doloribus dolor autem eum odio. Aut quibusdam molestiae iure necessitatibus numquam et asperiores in.