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>
Ipsa impedit quam molestias.
new

Ipsa impedit quam molestias.

ID: 1
Author: Prof. Helen McDermott Jr.
Dolores tenetur iure aliquid error. Iste excepturi quaerat adipisci ipsum fugit. Aliquid vero et animi. Aut odit ratione qui labore praesentium deleniti atque. Molestiae quisquam sunt autem atque.

# 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>
ID: 1
Author: Vernie Connelly
Sequi laborum omnis laboriosam vel. Distinctio qui perferendis error porro natus placeat nihil. Omnis beatae dolorum veniam assumenda ea rem quaerat. Non sint odit sunt quas temporibus nisi voluptas.