Error pages

Marketing-styled 4xx/5xx page layouts. simple / split / popular variants.

Preview

simple

404

Page not found

Sorry, we couldn't find the page you're looking for.

Go back home Contact support

split

Goodbones Goodbones

404

Page not found

Sorry, we couldn't find the page you're looking for.

Back to home

popular

404

This page does not exist

Sorry, we couldn't find the page you're looking for.

Popular pages

Back to home

React preview

LiveView (HEEx) 

alias DesignSystem.UI.ErrorPages

<ErrorPages.error_page
  variant="simple"
  status="404"
  title="Page not found"
  message="Sorry, we couldn't find the page you're looking for."
>
  <:primary_cta href={~p"/"}>Go back home</:primary_cta>
  <:secondary_cta href="mailto:support@example.com">Contact support</:secondary_cta>
</ErrorPages.error_page>

<ErrorPages.error_page
  variant="popular"
  status="404"
  title="This page does not exist"
  message="Sorry, we couldn't find the page you're looking for."
>
  <:primary_cta href={~p"/"}>Back to home</:primary_cta>
  <:link href={~p"/docs"} icon="hero-book-open" description="Integration guides.">
    Documentation
  </:link>
</ErrorPages.error_page>

React (JSX) 

import { BookOpenIcon, QueueListIcon } from "@heroicons/react/24/solid"
import { ErrorPage } from "../ui/index.mjs"

<ErrorPage
  variant="simple"
  status="404"
  title="Page not found"
  message="Sorry, we couldn't find the page you're looking for."
  primaryLabel="Go back home"
  primaryHref="/"
  secondaryLabel="Contact support"
  secondaryHref="mailto:support@example.com"
/>

<ErrorPage
  variant="popular"
  status="404"
  title="This page does not exist"
  primaryLabel="Back to home"
  primaryHref="/"
  links={[
    { name: "Documentation", href: "/docs", icon: BookOpenIcon, description: "Integration guides." },
    { name: "API Reference", href: "/api", icon: QueueListIcon, description: "Library reference." },
  ]}
/>