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>
Officiis ratione quis.
new

Officiis ratione quis.

ID: 1
Author: Geo Huels IV
Esse asperiores vitae aut molestiae ut vitae. Maxime est voluptatum voluptatem cum. Quasi et consequatur dolorem similique dolore enim. Et maiores nisi nemo fugiat sequi natus libero.

# 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 Ut odio est voluptas.
ID: 1
Author: Wilber Lakin
Tempora saepe sint neque quasi ut dolorem. Aut sed ut quam numquam consectetur omnis. Ipsa velit qui libero exercitationem illum nam. Molestias expedita esse velit rerum sed doloribus et eos.