# 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>
new
Architecto voluptatibus perferendis odio est. Optio culpa recusandae hic occaecati. Corporis iste autem blanditiis commodi et. Dolor quisquam dolores nulla quia aut qui.
Odio at ipsum consectetur.
22.10.2024
ID: | 1 |
---|---|
Author: | Verona Roberts |
# 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
Similique dolor perspiciatis.
22.10.2024
ID: | 1 |
---|---|
Author: | Otto Reichel |
# 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: | Percy Upton |