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>
Aperiam iusto a deserunt.
new

Aperiam iusto a deserunt.

15.07.2024
ID: 1
Author: Niko Jones
Quas tempore culpa quas quia voluptatem necessitatibus qui. Et blanditiis quia nisi distinctio quia porro. Quia molestiae fugit id. Quod saepe sit accusantium incidunt quidem blanditiis recusandae.

# 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 Expedita ex aperiam ut.
ID: 1
Author: Ms. Elisabeth Wehner Jr.
Aliquid aut possimus maiores dolore eum nihil. Asperiores facere quo pariatur et molestias quas incidunt. Dolore officiis aut quo.

To add an images carousel to a card, you can add to thumbnail parameter array of images.

<x-moonshine::card
url="#"
:overlay="true"
:thumbnail="['/images/image_1.jpg', '/images/image_2.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>
ID: 1
Author: Salvador Block
Id accusamus vero et quasi et at. Beatae autem ex ut provident. Illum in libero labore. Architecto ut voluptatem animi.