Message layout
A full-page message layout for 404, 403, 500, maintenance and coming-soon pages: a large code, a heading, a description, buttons and an optional illustration. On a page that has its own document, use `acun:message-panel` for the same screen.
Error page
For an error code, Laravel automatically uses the resources/views/errors/{code}.blade.php file. code is shown large above the heading; heading is required. Put the buttons in the action slot; your application's CSS and JS files go in the head slot.
{{-- resources/views/errors/404.blade.php --}}
<acun:layout.message code="404" heading="Page not found" description="The page you are looking for may have been moved or deleted.">
<acun:slot:head>@vite(['resources/css/app.css', 'resources/js/app.js'])</acun:slot:head>
<acun:slot:action>
<acun:button :href="url('/')">Back to home</acun:button>
<acun:button :href="url()->previous()" variant="white">Go back</acun:button>
</acun:slot:action>
</acun:layout.message>| Prop | Values |
|---|---|
code | 404, 403, 500… |
heading | Main heading (required) |
description | Text below the heading |
action | Buttons (slot) |
Maintenance page
If code is not given, the code line is not shown at all; suited to maintenance and coming-soon pages. The content you write inside the component goes between the description and the buttons. When php artisan down is run, Laravel shows the errors/503.blade.php file.
{{-- resources/views/errors/503.blade.php --}}
<acun:layout.message heading="Maintenance in progress" description="The panel will be available again shortly.">
<acun:slot:head>@vite(['resources/css/app.css', 'resources/js/app.js'])</acun:slot:head>
<p class="mt-4 text-sm text-gray-500 dark:text-zinc-400">Estimated completion: 14:00</p>
</acun:layout.message>| Prop | Values |
|---|---|
(slot) | Extra content between the description and the buttons |
Illustration
The illustration slot is placed at the very bottom of the page, in a narrow centered area. Instead of an image, you can also use a large acun:icon.
<acun:layout.message code="403" heading="You do not have access to this page" description="Contact your system administrator for access.">
<acun:slot:head>@vite(['resources/css/app.css', 'resources/js/app.js'])</acun:slot:head>
<acun:slot:action><acun:button :href="url('/')">Back to home</acun:button></acun:slot:action>
<acun:slot:illustration>
<div class="flex justify-center text-brand-200 dark:text-brand-500/30"><acun:icon name="lock-closed" size="40" stroke="1" /></div>
</acun:slot:illustration>
</acun:layout.message>| Prop | Values |
|---|---|
illustration | Image at the bottom of the page (slot) |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
heading | — | Main heading (required) |
code | null | Large code above the heading; not shown when empty |
description | null | Description below the heading |
title | null | Tab title; heading is used when empty |
theme | null | light · dark · system |
brand-color | null | default · green · red · yellow · blue · gray · dark or #rrggbb |