Svelte 500 Pages - Flowbite Svelte Blocks

Get started with a collection of 500 status code pages coded with Tailwind CSS to show when a server error is being triggered.

Default 500 page #

Use this example of a page to show when an internal server error has happened and a 500 status code has to be shown.

Edit on GitHub
  • Svelte
<script>
  import { Section, Page500 } from 'flowbite-svelte-blocks';
</script>

<Section name="page500">
  <Page500>
    <svelte:fragment slot="h1">500</svelte:fragment>
    <svelte:fragment slot="paragraph">
      <p class="mb-4 text-3xl tracking-tight font-bold text-gray-900 md:text-4xl dark:text-white">Internal Server Error.</p>
      <p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">We are already working to solve the problem.</p>
    </svelte:fragment>
  </Page500>
</Section>

Component data

Page500

Props

    Name Type Default
    divClassstring'mx-auto max-w-screen-sm text-center'
    h1Classstring'mb-4 text-7xl tracking-tight font-extrabold lg:text-9xl text-primary-600 dark:text-primary-500'

Slots

    Names
    h1
    paragraph

Section

Props

    Name Type Default
    sectionClassstring'relative py-6 sm:py-10'
    name'blog' | 'comment' |'cta' | 'ctawithimg' | 'contact' | 'content' | 'contentwithimg' | 'crudcreatedrawer' | 'crudcreateform' | 'crudreadsection' | 'default' | 'faq' | 'feature' | 'forgotpassword' | 'headingwithctabutton' | 'heroDefault' | 'heroVisual' | 'login' | 'logos' | 'maintenance' | 'newsletter' | 'none' | 'page500' | 'page404' | 'portfolio' | 'pricing' | 'register' | 'reset' | 'schedule' | 'social' | 'tableheader' | 'team' | 'testimonial''default'