# 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>
![Mollitia pariatur dolorem qui.](/images/image_1.jpg)
new
Quia qui nihil asperiores vitae. Et autem nemo rem. At sunt vitae quae. Harum iste veritatis neque rerum doloribus nihil optio odit. Dignissimos sed consequatur perferendis laboriosam molestiae.
Mollitia pariatur dolorem qui.
27.07.2024
ID: | 1 |
---|---|
Author: | Efren Kertzmann |
# 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>
ID: | 1 |
---|---|
Author: | Mr. Cordelia Gerlach MD |
# Image carousel
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: | Roosevelt Yost PhD |