Card

You're browsing the documentation for an old version of MoonShine. Consider upgrading your project to MoonShine 2.x.

Sections
- Basics
- Overlay view

# 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 href="#">Read more</x-moonshine::link>
    </x-slot:actions>
</x-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 href="#">Read more</x-moonshine::link>
    </x-slot:actions>
</x-moonshine::card>

new

Minus ea quos.

ID:	1
Author:	Chaz Stanton

Quidem placeat occaecati reprehenderit vel et repellat omnis quaerat. Aperiam ab qui enim aut occaecati. Nam et laborum numquam cumque. Dicta doloribus exercitationem quibusdam tempora et et aut.

# Overlay view

The overlay view 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 href="#">Read more</x-moonshine::link>
    </x-slot:actions>
</x-moonshine::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 href="#">Read more</x-moonshine::link>
    </x-slot:actions>
</x-moonshine::card>

new

Assumenda provident perspiciatis optio suscipit.

21.11.2024

ID:	1
Author:	Ms. Elda Moore

Repellat aut ullam mollitia tempora. Ad totam necessitatibus necessitatibus nihil nisi et vel. Voluptate sunt aut in aut nostrum repellat porro. Et saepe molestiae nemo hic voluptates sit.