NotFoundLayout

The Not Found Layout component has been ported over from our first berlitz USA website. As a result we now have a reusable Not found template we can use for any future websites that require a 404 not found page. This currently takes 4 props. Heading, Subheading below the main heading, a content block of text, and backLink to take the user back home base on the prefix.

Installation

yarn add @berlitz/not-found-layout

Props

| Argument | Type | Required | Default | Example | | ------------ | ------ | -------- | ---------------- | ------------------------------------------------- | | heading | string | | "404" | | | subheading | string | | "Page not Found" | | | contentBlock | string | | | | | backLink | node | ✅ | | {backLink.title} |

exampleData.js

export default {
  heading: '404',
  subheading: 'Page not Found',
  contentBlock:
    '<p>We’re all for adventure… but this one has led you to a dead end.</p>',
  backLink: {
    label: 'Back to home',
    link: '/en-de',
  },
}

Usage

import React from 'react'
import NotFoundLayout from '@berlitz/not-found-layout'

const BackLink = () => <Link href={backLink.url}>{backLink.title}</Link>
const MyApp = () => (
  <NotFoundLayout
    heading={heading}
    subheading={subheading}
    contentBlock={contentBlock}
    backLink={<BackLink />}
  />
)

When to use this component

404 Pages