# Основы
Для создания карточек в админ-панели используется компонент moonshine::card
.
<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>
![Quas ut non laboriosam.](/images/image_1.jpg)
new
Nobis vel modi cum aperiam blanditiis. Doloremque consequatur natus adipisci quis facilis velit. Fuga blanditiis ea officiis nobis sed. Qui veniam tempore quam molestias.
Quas ut non laboriosam.
08.09.2024
ID: | 1 |
---|---|
Author: | Barton Turner PhD |
# Overlay режим
Для карточки доступен режим overlay
.
<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: | Emerson Conn MD |
# Карусель изображений
Для добавления к карточке карусели изображений передать в параметр thumbnail
массив изображений.
<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: | Rosemary Crooks |