404 (Not Found) | Notion

Admin User Requirements for "404 - Not Found"

Schema Overview

Category: Error Pages
Label: Not Found (404)
Key: notFound
Preview Image: No preview image specified.

Key Functionalities

Customizable Error Page
- Provides a customizable 404 error page to display when a requested page is not found.
Image and Text Configuration
- Admins can set background images, customize text, and add call-to-action buttons.
Responsive Design
- Ensures the page layout adjusts for optimal display across all devices.
Overlay and Alignment Options
- Admins can enable a dark overlay and control text alignment and position.

Fields and Defaults

Image Settings

Field	Required	Default	Description
Image Alt	Optional	"Rack of green t-shirts"	Alt text for the image.
Image (Desktop)	Optional	Placeholder image provided	Background image for desktop/tablet.
Image Position (Desktop)	Optional	`md:object-center`	Positioning of the image on desktop/tablet.
Image (Mobile)	Optional	Placeholder image provided	Background image for mobile.
Image Position (Mobile)	Optional	`object-center`	Positioning of the image on mobile.

Text Settings

Field	Required	Default	Description
Heading	Optional	"Page Not Found"	Text displayed as the main heading.
Subheading	Optional	Empty	Text displayed below the main heading.
Text Color	Optional	`var(--white)`	Color of the text.
Buttons	Optional	"Continue Shopping" Button	Call-to-action buttons (max 2).

Content Settings

Field	Required	Default	Description
Enable Dark Overlay	Optional	`false`	Adds a dark overlay over the background image.
Content Position (Desktop)	Optional	`md:justify-center md:items-center`	Controls the horizontal and vertical alignment of content on desktop.
Content Alignment (Desktop)	Optional	`md:text-center md:items-center`	Aligns the text content on desktop.
Max Content Width (Desktop)	Optional	`md:max-w-[30rem] lg:max-w-[38rem]`	Restricts the width of content on desktop.
Content Position (Mobile)	Optional	`justify-center items-center`	Controls the horizontal and vertical alignment of content on mobile.
Content Alignment (Mobile)	Optional	`text-center items-center`	Aligns the text content on mobile.
Max Content Width (Mobile)	Optional	`max-w-[22.5rem]`	Restricts the width of content on mobile.