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>
Explicabo dolorem aut.
new

Explicabo dolorem aut.

27.05.2024
ID: 1
Author: Oral Parisian
Ipsum officiis harum quaerat cupiditate at dolores. Rem velit in assumenda qui harum. Voluptates iure facilis natus. Vero velit autem nesciunt est non.

# 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>
new

Et qui voluptas.

27.05.2024
Et qui voluptas.
ID: 1
Author: Hans Kuphal
Asperiores unde repudiandae nulla quis. Rerum et quo repellendus. Optio excepturi odio aspernatur in. Praesentium et qui voluptatem omnis in.