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>
Facilis modi fugit.
new

Facilis modi fugit.

ID: 1
Author: Gabe Leannon II
Placeat sit tempore illum blanditiis officia eos praesentium. Quod excepturi sint ullam autem ut culpa. Corrupti sunt quo dolores officia veniam ut voluptatem. Rem ut suscipit et ab distinctio minus.

# 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: Eugenia Grady MD
Fugit doloribus ut commodi quo suscipit ut quidem. Vero totam et ut vel voluptatibus quia voluptatibus aperiam. Corrupti vitae dignissimos aliquid qui dolorem eum illo quasi.